AngularJS Tutorial(12)from w3school
来源:互联网 发布:数据挖掘技术有哪些 编辑:程序博客网 时间:2024/06/05 02:19
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
<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
<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
myCtrl.js
$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?
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:
AngularJS Example
<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(12)from w3school
- AngularJS Tutorial(1)from w3school
- AngularJS Tutorial(2)from w3school
- AngularJS Tutorial(3)from w3school
- AngularJS Tutorial(4)from w3school
- AngularJS Tutorial(5)from w3school
- AngularJS Tutorial(6)from w3school
- AngularJS Tutorial(7)from w3school
- AngularJS Tutorial(8)from w3school
- AngularJS Tutorial(9)from w3school
- AngularJS Tutorial(10)from w3school
- AngularJS Tutorial(11)from w3school
- AngularJS Tutorial(13)from w3school
- AngularJS Tutorial(14)from w3school
- AngularJS Tutorial(15)from w3school
- AngularJS Tutorial(16)from w3school
- AngularJS Tutorial(17)from w3school
- AngularJS Tutorial(18)from w3school
- AngularJS Tutorial(11)from w3school
- Top HTML5 Frameworks in 2015
- 处理乘法取模爆long long 的方法
- POJ 3907 Build Your Home
- Android学习心得(10) --- MAC下Android反编译(2)
- AngularJS Tutorial(12)from w3school
- 积累linux常用的命令
- try-catch-finally的执行顺序
- hihoCoder 1122 二分图二•二分图最大匹配之匈牙利算法
- java实现文件的上传下载
- Mahone的CTS研究笔记(一):什么是CTS
- C的变长参数
- 指针函数与函数指针的区别
- 优秀代码风格