AngularJS学习篇(十五)

AngularJS 模块

模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是运控制器的容器。

控制器通常属于一个模块。

创立模块

您得由此 AngularJS 的 angular.module 函数来创造模块:

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []); 

</script>

小心:模块的概念[]是概念模块之间因关系,中括号[]表示该模块没有依赖,如果发负之语会在中括号写及负之模块名字

JavaScript 中承诺避免采用全局函数。因为她俩很容易被其他脚本文件覆盖。

AngularJS 模块于所有函数的作用域在拖欠模块下,避免了该问题。

<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>

对 HTML 应用程序,通常建议把所有的脚本还放于 <body>
元素的尽底部。

随即会增高网页加载速度,因为 HTML 加载不受制于脚本加载。

当我们的大多单 AngularJS 实例中,您将张 AngularJS 库是当文档的
<head> 区域被加载。

于我们的实例中,AngularJS 以 <head> 元素中给加载,因为对
angular.module 的调用只能以库加载完成后才会进行。

另一个解决方案是当 <body> 元素中加载 AngularJS
库,但是得放于公的 AngularJS 脚本前面:

<!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="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";
});

 

相关文章