<!–
a.tryitbtn, a.tryitbtn:link, a.tryitbtn:visited {
display: inline-block;
color: #FFFFFF;
background-color: #D84D2D;
font-weight: bold;
text-align: center;
padding: 0.3% 2.0%;
text-decoration: none;
border: 1px solid #D84D2D;
border-radius: 5px;
white-space: nowrap;
cursor: defauilt;
}
a.tryitbtn:hover{
color: #D84D2D;
background-color: #FFFFFF;
cursor: pointer;
}
hr.angular{
margin: 20px 0px 20px 0px; border: 0; border-top: 1px solid #ddd;
}
table.lamp {
width: 100%;
padding: 0px;
border: 1px solid #ddd;
}
table.lamp th {
color: #000000;
background-color: white;
border: none !important;
padding: 10px 5px 10px 10px !important;
}
table.lamp td {
padding: 4px 10px 4px 0px !important;
border: none !important;
background-color: #ffffff;
}
div.chapter {
margin: 10px 0px 10px 0px;
padding: 0px;
width: auto;
overflow: hidden;
}
div.chapter div.prev {
width: 50%;
float: left;
text-align: left;
overflow: hidden;
white-space: nowrap;
}
div.chapter div.next {
width: 50%;
float: right;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
–>
AngularJS模块定义了一个application。
模块是一个application中不同部分的容器。
application中的所有控制器都应该属于一个模块。
带有一个控制器的模块
下面这个application（”myApp”）包含一个控制器（”myCtrl”）：
<!DOCTYPE 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>
在JS文件中定义模块和控制器
在AngularJS applications中，我们通常会将模块和控制器定义到不同的JavaScript文件中。
在下面这个例子中，”myApp.js”包含了一个application的模块定义，”myCtrl.js”包含了控制器的定义：
<!DOCTYPE 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>
myApp.js代码：
var app = angular.module("myApp", []);
 |
这里的参数[]可以被用来指定模块的依赖项（即需要加载的其它模块） |
|---|
myCtrl.js代码：
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Global Namespace中的函数污染
在JavaScript中要尽量避免使用全局函数。因为全局函数容易被其它的JavaScript代码改写或销毁。
AngularJS模块的定义减少了出现这种问题的风险，尽量将函数定义到AngularJS模块中。
何时加载Library？
|
在我们所有的示例代码中，AngularJS library都是在HTML文档的head部分被加载的。 |
|---|
建议将脚本的引用放到<body>元素的最后。但你还是会看到许多的AngularJS示例代码将library的引用放在文档的head部分，这仅仅只是为了在library被加载后对angular.module的访问进行编译。
另一个解决方法是将AngularJS library的引用放到<body>元素的最后，你自己的AngularJS脚本代码之前：
<!DOCTYPE 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>
