Using AngularJS dependency manager.
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).
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).
Check the corresponding box to show system resources and leave it unchecked to hide them.
The dependency table fields include:
- 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.
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
There are some distinctions in their configurations, though.
When creating a new service, two Dependency options are offered for configuring: Enabled and Global.
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.