Introduction

The Dependency Manager is used for managing the order of loading assets to Angular-based applications.

Loading resources is possible any time it is required on the project (not only while loading the app), for example, when switching to a specified routing.
The Dependency Manager also provides the option of defining the modules dependencies: sequencing the added files in the necessary order.

Dependency Manager Overview

In the project, open the App Settings > Resources:

In this view, there are four sections with information on:

Libraries version
Built-in resources
External resources
Internal resources

External Resources Section

Here, for the URL, you can choose to use a relative path or a .js URL from third-party domains.
Configuring the relative path can be useful when connecting third-party libraries and modules (from third-party domains or the ones added to the Source tab).
Alternatively, JavaScript URLs are handy when a .js file cannot be added to the project and is to be loaded with starting the project (for example, Google Maps or APIs of payments systems).
To do it, define the dependency name, its external resource URL or a relative path to the .js file, and select the dependency type (Angular module, Angular service or External lib).
Here you can also learn how theme resources can be added to the source.

Internal Resources Section

This section contains a table with .js assets, Services and Directives that have been added to the app, and are arranged in the order they were added to the project. Below all of the system libraries (Group = System) used in the app (for example, angular, Apperyio, bootstrap, cordova, etc.) are listed.

The list of system libraries is defined by the Libraries version of the project and cannot be modified (with the exception of some Angular modules).

📘
Tip!
Check the corresponding box to show system resources and leave it unchecked to hide them.

The dependency table fields include:

Name
Group (System or Custom)
Type (Angular module, Angular resource, External lib, System module, etc.)
Enabled (resource is active)
Global (resource is connected while loading application)
Shim (used to configure the dependencies, exports, and custom initialization for older, traditional browser globals scripts that do not use define() to declare the dependencies and set a module value)
Shim exports
Shim init code

More on configuring Shim, Shim exports, and Shim init code fields can be found here.

📘
Tip
If the dependency name differs from that of the Angular module, the Angular module name must be specified in the Shim exports parameter.

The Dependency manager offers several options of loading assets and external libraries:

Resource is added while loading application
Resource is added while selecting the specified route
Resource is added after the related dependency is loaded

The initial settings of the resources to be loaded ( Services, JavaScripts, etc.) can also be defined when creating assets in the project (by clicking CREATE NEW > ... ).
There are some distinctions in their configurations, though.
When creating a new service, two Dependency options are offered for configuring: Enabled and Global.
When creating a new JavaScript, a user can choose to add a blank .js file with further editing, create it with entering the URL, or upload from the file along with selecting the resource type (Angular module, Angular service, Angular factory, Angular directive, Angular filter, or External lib) and defining the dependency table fields (Enabled, Global, and Shim parameters).
After you confirm creating a new service and/or JavaScript, new resources appear in the project tree under Services and/or JavaScript folders respectively.

📘
Tip
All the Dependency Manager settings can be changed later under App Settings > Resources.

Adding AngularJS Module To Appery.io App

Let’s add this AngularJS module to your app:

Click Download ZIP to download the module to your computer.
Create a new AngularJS app.
Open Screen1, drag an Input component to the page, set its property ng-model = some_model and add property pickadate = true.
Move to Source tab > WEB_RESOURCES > libs. Click the gear icon and select Upload to this folder.
Select Source = ZIP bundle and click Upload files to add the archive the angular-pickadate-master.zip.It will be unzipped automatically to the libs folder when uploaded.

There is a folder called dist that contains all the necessary CSS and JS files.
Go to Project tab > App Settings > Resources.
Here, you should add a new external resource with Name = pickadate, URL = ../libs/angular-pickadate-master/dist/angular-pickadate.min.js and Type = Angular module.

Click Add to create an external resource.
By default, the following properties are enabled:

Enabled – the resource is active.
Global – the resource will be connected while loading application.

Go to App Settings > General.
Under the General tab, add a Custom tag with Tag name = link and Attributes = href="libs/angular-pickadate-master/dist/angular-pickadate.css" rel="stylesheet".

Save the app and click TEST.