首页 > 代码库 > AngularJS学习之模块
AngularJS学习之模块
1.模块定义了一个应用程序；模块是应用程序中不同部分的容器；模块是应用控制器的容器；控制器通常属于一个模块
2.创建模块：你可以通过AngularJS的angular.module函数来创建模块：
<div ng-app="myApp">...</div>
<script>
var app=angular.module("myApp",[]);
</script>
3.添加控制器：可以使用ng-controller指令来添加应用的控制器：
<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>
4.添加指令：AngularJS提供了很多内置的指令，你可以使用它们来为你的应用添加功能；
<div ng-app="myApp" runoob-directive></div>
<script>
var app=angular.module("myApp",[]);
app.directive("runoobDirective",function(){
return{
template:"我在指令构造器中创建！"
};
});
</script>
5.模块和控制器包含在JS文件中：通常AngularJS应用程序将模块和控制器包含在JavaScript文件中
<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{firstName+" "+lastName}}
</div>
<script src="http://www.mamicode.com/myApp.js"></script> //"myApp.js"包含了应用模块的定义程序
<script src="http://www.mamicode.com/myCtrl.js"></script> //"myCtrl.js"文件包含了控制器
</body>
</html>
6.函数会影响到全局命名空间：
**javaScript中应避免使用全局函数，因为他们很容易被其他脚本文件覆盖
**AngularJS模块让所有函数的作用域在该模块下，避免了该问题；
**对于HTML应用程序，通常建议把所有的脚本都放置在<body>元素的最底部，这会提高网页加载速度，因为HTML加载不受制于脚本加载；
**AngularJS在<head>元素中被加载，因为对angular.module的调用只能在库加载完成后才能进行；
AngularJS学习之模块