AngularJS modules


Module defines an application.

Modules are containers for different parts of your application.

Modules are containers for application controllers.

Controllers usually belong to a module.

Create a module

You can create a module through AngularJS’s angular.module function:

<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, directives, filters, etc. in your AngularJS application.

Add Controller

You can use the ng-controller directive to add an application controller:

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>

Run instance»

Click the "Run instance" button to view the online instance

You can learn in the AngularJS Controller chapter More about controllers.

Add directives

AngularJS provides many built-in directives that you can use to add functionality to your application.

For complete instruction content, please refer to the AngularJS Reference Manual.

Additionally, you can use modules to add your own directives to your application:

Example

<!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" php-directive></div>

<script>

var app = angular.module("myApp", []);

app.directive("phpDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

</body>
</html>

Run Example»

Click the "Run Example" button to view the online example

You can learn more about directives in the AngularJS Directives chapter.

Modules and controllers are included in JS files

Usually AngularJS applications include modules and controllers in JavaScript files.

In the following example, "myApp.js" contains the application module definition program, and the "myCtrl.js" file contains the controller:

Example

<!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>

Run Instance»

Click the "Run Instance" button to view the online instance

myApp.js

var app = angular.module("myApp", []);

NoteIn the module definition, the [] parameter is used to define the dependencies of the module.
The square brackets [] indicate that the module has no dependencies. If there are dependencies, the dependent module name will be written in the square brackets.

##myCtrl.js

app.controller(
"myCtrl", function($scope) { $scope.firstName = "John";
$scope.lastName= "Doe";
});
Function will affect the global namespace

Global functions should be avoided in JavaScript. Because they can easily be overwritten by other script files.

The AngularJS module avoids this problem by making all functions scoped under this module.

When are the libraries loaded?

In our example, all AngularJS libraries are The header of the HTML document is loaded.
Note
For HTML applications, it is generally recommended to place all scripts at the very bottom of the <body> element.

This will increase 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 example, 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 before your AngularJS script:

Example

<!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>

Run Instance»Click the "Run Instance" button to view the online instance

←
→