AngularJS Tutorial(12)from w3school
2015-08-04 09:26
531 查看
An AngularJS module defines an application.
A module is a container for the different parts of an application.
All application controllers should belong to a module.
html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<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 Yourself »
In this example, "myApp.js" contains an application module definition, while "myCtrl.js" contains the controller:
html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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 Yourself »
$scope.firstName = "John";
$scope.lastName= "Doe";
});
AngularJS modules reduces this problem, by keeping all functions local to the module.
A common advise for HTML applications, is to place scripts at the very bottom of the <body> element.
But, in many AngularJS examples, you will see the library in the head of the document.
This is because calls to angular.module can only be compiled after the library has been loaded.
Another solution is to load the AngularJS library in the <body> element, before your own AngularJS scripts:
html>
<html>
<body>
<div
ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
Try it Yourself »
An AngularJS module defines an application.
A module is a container for the different parts of an application.
All application controllers should belong to a module.
A Module With One Controller
This application ("myApp"), has one controller ("myCtrl"):AngularJS Example
<!DOCTYPEhtml>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<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 Yourself »
Modules and Controllers in Files
It is common in AngularJS applications to put the module and the controllers in JavaScript files.In this example, "myApp.js" contains an application module definition, while "myCtrl.js" contains the controller:
AngularJS Example
<!DOCTYPEhtml>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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 Yourself »
myApp.js
var app = angular.module("myApp", []);The [] parameter in the module definition can be used to define dependent modules. |
myCtrl.js
app.controller("myCtrl", function($scope) {$scope.firstName = "John";
$scope.lastName= "Doe";
});
Functions can Pollute the Global Namespace
Global functions should be avoided in JavaScript. They can easily be overwritten or destroyed by other scripts.AngularJS modules reduces this problem, by keeping all functions local to the module.
When to Load the Library?
In all our examples, the AngularJS library is loaded in the head of the HTML document. |
But, in many AngularJS examples, you will see the library in the head of the document.
This is because calls to angular.module can only be compiled after the library has been loaded.
Another solution is to load the AngularJS library in the <body> element, before your own AngularJS scripts:
AngularJS Example
<!DOCTYPEhtml>
<html>
<body>
<div
ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
Try it Yourself »
相关文章推荐
- AngularJS Tutorial(11)from w3school
- AngularJS Tutorial(10)from w3school
- AngularJS Tutorial(9)from w3school
- AngularJS Tutorial(8)from w3school
- AngularJS Tutorial(7)from w3school
- AngularJS Tutorial(6)from w3school
- AngularJS Tutorial(5)from w3school
- AngularJS Tutorial(4)from w3school
- AngularJS Tutorial(3)from w3school
- AngularJS Tutorial(2)from w3school
- AngularJS Tutorial(1)from w3school
- angularjs入门案例 新玩具-中午吃神马
- angular之Directive - Compile vs. Link
- angularjs calling order
- AngularJs学习笔记--Creating Services
- angular之directive定义对象说明
- Angularjs中的标签模式和html5模式
- 《AngularJS》5个实例详解Directive(指令)机制
- angularjs思维
- angular要点总结