AngularJS module
The module defines an application.
A module is a container for different parts of an application.
A module is a container for the application controller.
The controller usually belongs to a module.
Create modules
You can create modules through the angular.module function of AngularJS:
<div ng-app="myApp">...</div><script>var app = angular.module("myApp", []); </script>The "myApp" parameter corresponds to the HTML element that executes the application.
Now you can add controllers, instructions, filters, etc. in your AngularJS application.
Add a controller
You can use the ng-controller directive to add the application's controller:
AngularJS instance
<!DOCTYPE html><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>Running effect:
John Doe
You can learn more about controllers in the AngularJS Controller chapter.
Add command
AngularJS provides a lot of built-in instructions that you can use to add functionality to your application.
For complete instructions, please refer to the AngularJS reference manual.
Additionally, you can use modules to add your own instructions for your application:
AngularJS instance
<!DOCTYPE html><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" runoob-directive></div><script>var app = angular.module("myApp", []);app.directive("runoobDirective", function() { return { template : "I created it in the directive constructor!" };});</script></body></html>Running results:
I created it in the directive constructor!
You can learn more about directives in the AngularJS directives chapter.
Modules and controllers are included in JS files
Typically, AngularJS applications include modules and controllers in JavaScript files.
In the following example, "myApp.js" contains the application module's definer, and the "myCtrl.js" file contains the controller:
AngularJS instance
<!DOCTYPE html><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 src="myApp.js"></script><script src="myCtrl.js"></script></body></html>Running results:
John Doe
myApp.js
var app = angular.module("myApp", []);
Note In the module definition, the [] parameter is used to define the dependencies of the module.
The brackets [] indicate that the module has no dependencies. If there is a dependency, the name of the dependency will be written in the brackets.
myCtrl.js
app.controller("myCtrl", function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe";});Functions affect global namespace
Global functions should be avoided in JavaScript. Because they are easily overwritten by other script files.
The AngularJS module allows all functions to be scoped under this module, avoiding this problem.
When will the library be loaded?
Note: In our instance, all AngularJS libraries are loaded at the head of the HTML document.
For HTML applications, it is generally recommended to place all scripts at the bottom of the <body> element.
This will increase web page loading speed, because HTML loading is not subject to script loading.
In our multiple AngularJS instances, you will see that the AngularJS library is loaded in the <head> area of the document.
In our instance, AngularJS is loaded in the <head> element, because the call to angular.module can only be made after the library is loaded.
Another solution is to load the AngularJS library in the <body> element, but it must be placed in front of your AngularJS script:
AngularJS instance
<!DOCTYPE html><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>Running results:
John Doe
The above is a compilation of AngularJS module information, and we will continue to add it later. I hope that it can help programming friends.