AngularJS module
May 08, 2021 AngularJS
Table of contents
6. Modules and controllers are included in the JS file
10.. Functions affect the global namespace
AngularJS module
The module defines an application.
A module is a container for different parts of an application.
A module is a container for an application controller.
The controller usually belongs to a module.
Create a module
You can create modules from the angular.module function of AngularJS:
< script >
var app = angular.module( " myApp " , []);
The "myApp" parameter corresponds to the HTML element that executes the app.
Now you can add controllers, instructions, filters, etc. to the AngularJS app.
Add a controller
You can use the ng-controller instruction to add the app's controller:
AngularJS instance
{{ firstName + " " + lastName }}
< /div >
< script >
app.controller( "myCtrl" , function ($scope) {
$scope.firstName = "John" ;
$scope.lastName = "Doe" ;
});
Try it out . . .
You can learn more about controllers in the AngularJS Controllers section.
Add instructions
AngularJS provides a number of built-in instructions that you can use to add functionality to your app.
The full instructions can be found in the AngularJS reference manual.
In addition, you can use modules to add your own instructions to your app:
AngularJS instance
< script >
app.directive( "w3cschoolDirective" , function () {
return {
template: "I created it in the instruction constructor!"
};
});
Try it out . . .
You can learn more about instructions in the AngularJS Directives section.
Modules and controllers are included in the JS file
Typically, AngularJS applications include modules and controllers in JavaScript files.
In the following example, "myApp .js" contains the definition program of the application module, and the "myCtrl.js" file contains the controller:
AngularJS instance
< Html >
< script src= "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" > < /script >
< body >
< div ng-app= " myApp " ng-controller= " myCtrl " >
{{ firstName + " " + lastName }}
< /div >
< script src= " myApp.js " > < /script >
< script src= " myCtrl.js " > < /script >
< /body >
< /html >
Try it out . . .
myApp.js
|
In the module definition, the parameter is used to define the dependencies of the module.
The parenthesis indicates that the module is not dependent, and if there is a dependency, the name of the dependent module is written in the parenthesis. |
|---|
myCtrl.js
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Functions affect the global namespace
Global functions should be avoided in JavaScript. Because they are easily overwritten by other script files.
The AngularJS module allows the scope of all functions to be under the module, avoiding the problem.
When will the library be loaded?
|
In our example, all AngularJS libraries are loaded at the head of the HTML document. |
|---|
For HTML applications, it is generally recommended that all scripts be placed at the bottom of the element.
This increases the speed at which web pages load because HTML loads are not subject to script loading.
In one of our multiple AngularJS instances, you'll see that the AngularJS library is loaded in the document's .lt;head.gt;
In our example, AngularJS is loaded in the element, because calls to angular.module can only be made after the library is loaded.
Another solution is to load the AngularJS library in the element, but must be placed in front of your AngularJS script:
AngularJS instance
< Html >
< head >
< meta charset = "utf-8" >
< script src= "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" > < /script >
< /head >
< body >
< div ng-app= "myApp" ng-controller= "myCtrl" >
{{ firstName + " " + lastName }}
< /div >
< script >
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
< /script >
< /body >
< /html >
Try it out . . .