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:表单

 

相关文章