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.
A controller usually belongs to a module.
Creating a Module
You can create modules by using the Angularjs 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, instructions, filters, etc. in the ANGULARJS application.
Add Controller
You can use the Ng-controller directive to add an applied 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>
Operation Effect:
John Doe
You can learn more about the controller in the ANGULARJS controller section.
Add directive
ANGULARJS provides a number of built-in instructions that you can use to add functionality to your application.
The complete instructions can refer to the ANGULARJS reference manual.
In addition, you can use the module to add your own instructions to 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 create it in the instruction Builder!"
}
};
</script>
</body>
</html>
Run Result:
I am creating in the instruction Builder!
You can learn more about instructions in the ANGULARJS instruction 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 for the application module, 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>
Run Result:
John Doe
Myapp.js
var app = Angular.module ("myApp", []);
Note in the module definition [] parameter is used to define the dependencies of the module.
The brackets [] indicate that the module is not dependent, and if it is dependent, it will write the dependent module name in the brackets.
Myctrl.js
App.controller ("Myctrl", function ($scope) {
$scope. FirstName = "John";
$scope. Lastname= "Doe";
function affects the global namespace
You should avoid using global functions in JavaScript. Because they are easily overwritten by other script files.
The Angularjs module allows all functions to be scoped under the module to avoid the problem.
When will the storage be loaded?
Note: In our example, all ANGULARJS libraries are loaded in the header of the HTML document.
For HTML applications, it is often recommended that all scripts be placed at the bottom of the <body> element.
This can increase the speed of Web page loading because the HTML load is not subject to script loading.
In our multiple Angularjs instances, you will see that the ANGULARJS library is loaded in the
In our case, Angularjs is loaded in the
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>
Run Result:
John Doe
The above is the ANGULARJS module data collation, follow-up continue to supplement, hope to help programming friends.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
