AngularJS核心特性——模块化

最新推荐文章于 2019-04-16 10:00:15 发布

原创最新推荐文章于 2019-04-16 10:00:15 发布 · 925 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJS

AngularJS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了AngularJS中如何使用模块和控制器实现代码复用。通过示例展示了无依赖及有依赖模块的定义方法，以及如何在页面中使用控制器。

一点睛

AngularJS为了分离代码达到复用效果，提供了一个module。

定义模块需要使用下面的代码。

无依赖模块：

angular.module("firstModule", []);

有依赖模块：

angular.module("firstModule", ["moduleA","moduleB"]);

模块中控制器的定义方法：

angular.module("firstModule", [])
   .controller("firstController",function(){
    ......
    };
    );

页面中使用ng-controller来和它关联

        <div ng-controller="firstController">
            ......
        </div>

二实战

1 展示页面

<!doctype html>
<html ng-app="HelloAngular">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="helloAngular"><!--指定控制器-->
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <!--指定模块定义文件-->
    <script src="HelloAngular_Module.js"></script>
</html>

2 定义模块

//定义了一个模块HelloAngular
var myModule = angular.module("HelloAngular", []);
//模块中定义一个控制器，控制器名称为helloAngular
//$scope体现了依赖注入的特性
myModule.controller("helloAngular", ['$scope',
    function HelloAngular($scope) {
        $scope.greeting = {
            text: 'Hello'
        };
    }
]);

三效果演示