首页 > 代码库 > 1.AngularJS 模块

1.AngularJS 模块

2024-11-23 19:44:02   203人阅读

上一章讲的数据绑定，是把控制器的代码写到一个全局命名空间中定义的函数里：

function MyController($scope) {
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};

　　

在AngularJS 中，模块是定义应用的主要方式，包含了主要的应用代码。一个应用可以包含多个模块，每个模块包含具体的代码。使用模块有许多好处，比如：

  • 保持全局命名空间的清洁
  • 测试更容易找到相互隔离的功能
  • 可以在不同的应用之间复用代码
  • 是应用能够以任意顺序加载代码的各个部分

我们使用angular.module() 方法来声明模块，这个方法接受两个参数，第一个是模块的名称，第二个是依赖列表，中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

angular.module(‘myApp‘, []) 方法相当于AngularJS 模块的setter 方法，用来定义模块。

angular.module(‘myApp‘)  方法只传递一个参数，相当于getter 方法，用来引用模块。

开发大型应用时，会创建多个模块类承载业务逻辑。将复杂的功能分割成不同的模块，有助于单独为它们编写测试。

1.创建模块

<div ng-app="myApp">...</div>
<script>
<!--通过angular.module 函数创建模块-->
var app = angular.module("myApp", []); 
</script>

　　

2.添加控制器

<!--使用ng-controller 指令添加控制器-->
<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>

　　

3.添加指令

AngularJS 提供了很多内置的指令，可以用它们来为你的应用添加功能。

<div ng-app="myApp" runoob-directive></div>
<script>
var app = angular.module("myApp", []);
<!--用模块为应用添加自己的指令-->
app.directive("runoobDirective", function() {
    return {
        template : "我在指令构造器中创建!"
    };
});
</script>

　　

4.模块和控制器包含在JS文件中

通常AngularJS应用程序将模块和控制器包含在js文件中。

<!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>
<!--myApp.js 包含了应用模块的定义程序-->
<script src="http://www.mamicode.com/myApp.js"></script>
<!--myCtrl.js 包含了控制器-->
<script src="http://www.mamicode.com/myCtrl.js"></script>
</body>
</html>

　　

5.什么时候载入angular.js

对于HTML应用程序，通常建议吧所有的脚本都放置在<body> 元素的最底部。

这回提高网页加载速度，应为HTML加载不受制于脚本加载。

AngularJS 的库文件是在<head>标签里加载的，因为对angular.module 的调用只能在库加载完成后才能进行。

另外也可以在<body>元素中加载，但是必须放在AngularJS脚本前面。

 

1.AngularJS 模块


联系
我们