angularjs入门

AngularJS快速入门指南12:模块

时间:2015-06-15 12:32来源:网络整理 作者:KKWL 点击:
AngularJS模块定义了一个application。 模块是一个application中不同部分的容器。 application中的所有控制器都应该属于一个模块。 带有一个控制器的模块 下面这个application("myApp")包含一个控

  AngularJS模块定义了一个application。

  模块是一个application中不同部分的容器。

  application中的所有控制器都应该属于一个模块。

带有一个控制器的模块

  下面这个application("myApp")包含一个控制器("myCtrl"):

{{ firstName + " " + lastName }} , []); app.controller(($scope) { $scope.firstName ; $scope.lastName ; });

运行

在JS文件中定义模块和控制器

  在AngularJS applications中,我们通常会将模块和控制器定义到不同的JavaScript文件中。

  在下面这个例子中,"myApp.js"包含了一个application的模块定义,"myCtrl.js"包含了控制器的定义:

{{ firstName + " " + lastName }}

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脚本代码之前:

{{ firstName + " " + lastName }} , []); app.controller(($scope) { $scope.firstName ; $scope.lastName ; });

上一章 - AngularJS快速入门指南11:事件

下一章 - AngularJS快速入门指南13:表单

 

------分隔线----------------------------