AngularJs module模块简介

前端之家收集整理的这篇文章主要介绍了AngularJs module模块简介前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在AngularJs中,模块是定义应用的最主要方式。模块包含了主要的应用代码

一个应用可以包含多个模块,每个模块都包含了定义具体功能代码

使用模块能给我们带来许多好处,比如:

1.保持全局命名空间的清洁;

2.编写测试代码更容易,并能保持其清洁,以便更容易找到相互隔离的功能

3.易于在不同应用间复用代码

4.使应用能够以任意顺序加载代码的各个部分。

AngularJs允许我们使用angular.modle()方法来声明模块,这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被依赖注入到模块中的对象列表。

andular.modle('myApp',[]);

注:这个方法相当于AngularJs模块的setter方法,是用来定义模块的。

angular.module('myApp');

注:这个防范用户获取应用,相当于AngularJs的getter方法,用来获取对模块的引用。

参数说明

1.name(字符串)

name是模块的名称,字符串变量。

2.requires(字符串数组)

requires包含了一个字符串变量组成的列表,每个元素都是一个模块名称,本模块依赖于这些模块,依赖需要在本模块加载由注入器 进行预加载

实例1:

<ul ng-app="myApp" ng-controller="myCtrl">
    <li ng-repeat="x in items track by $index">
        <strong>{{x}}</strong>
    </li>
</ul>
<script>
    //自定义模块
    var app = angular.module('myApp',[]);
    app.controller('myCtrl',function ($scope) {
        $scope.items = [1,2,3,2];
    });
</script>


实例2:

<div class="alert alert-danger" ng-app="myApp" ng-controller="myCtrl">
        {{a}}+{{b}}={{c}}
</div>
<script>
    //自定义模块1,angular.module('common',[]).service('addition',function () {
        this.add = function (a,b) {
            return a + b;
        }
    });
    //自定义模块2,依赖于模块一
    var app = angular.module('myApp',['common']);
    app.controller('myCtrl',function ($scope,addition) {
        $scope.a = 3;
        $scope.b = 4;
        $scope.c = addition.add($scope.a,$scope.b);
    });
</script>

猜你在找的Angularjs相关文章