AngularJS快速入门指南12：模块

2024-04-27 14:09:29

字体：大中小

来源：转载

供稿：网友

AngularJS快速入门指南12：模块

　　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>

上一章 - AngularJS快速入门指南11：事件下一章 - AngularJS快速入门指南13：表单

上一篇：Awesomplete

下一篇：浅析js中的闭包