AngularJS module
Module defines an application.
Module is a container in different parts of the application.
Controller module is a container application.
The controller usually belong to a module.
Create a module
You can create a module by AngularJS ofangular.module function:
<Script>
var app = angular.module ( "myApp" , []);
"MyApp" parameter corresponds to the execution of the application HTML elements.
Now you can add a controller instructions, filters, etc. in AngularJS applications.
Add Controller
You can useng-controller instructions to add applications Controller:
AngularJS examples
{{FirstName + "" + lastName }}
</ Div>
<Script>
app.controller ( "myCtrl", function ( $ scope) {
$ scope.firstName = "John";
$ scope.lastName = "Doe";
});
try it"
You can AngularJS Controllers learn more knowledge about the controller section.
Add instructions
AngularJS provides many built-in commands, you can use them to add functionality to your application.
Complete instructions can be found in the contents of AngularJS reference manual .
In addition, you can use the module to add your own instruction applications:
AngularJS examples
<Script>
app.directive ( "w3bigDirective", function ( ) {
return {
template: "I created the instruction constructor!"
};
});
try it"
You can AngularJS directives learn more knowledge about instruction section.
Modules and controllers included in the JS file
Typically AngularJS application module and the controller is included in the JavaScript file.
In the following examples, "myApp.js" contains the definition of the program application modules, "myCtrl.js" file contains the controller:
AngularJS examples
<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"
myApp.js
 | In the module definition [] parameter is used to define module dependencies. Brackets [] indicates that the module does not rely on, if there is dependency, then will depend on the module name written in parentheses. |
|---|
myCtrl.js
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Function will affect the global namespace
JavaScript should avoid using global functions. Because they can easily be covered with another script file.
AngularJS module scope so that all functions in the module, to avoid the problem.
When loading the library?
| In our example, all AngularJS HTML document libraries are loaded in the head. |
|---|
For HTML applications is generally recommended to all scripts are placed in the bottom of <body> element.
This will increase the page loading speed, because HTML is not subject to load script to load.
In our multiple AngularJS example, you will see AngularJS library is loaded in the <head> area of the document.
In our example, AngularJS in the <head> element is loaded, because the call to angular.module only be carried out after the completion of loading the library.
Another solution is to load AngularJS library <body> element, but must be placed in front of your AngularJS script:
AngularJS examples
<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"