AngularJS学习篇(十五)

AngularJS 模块

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

模块是应用程序中分歧部分的器皿。

模块是应用控制器的容器。

控制器经常属于二个模块。

始建模块

您能够经过 AngularJS 的 angular.moduleAngularJS, 函数来创设模块:

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

 

相关文章