一. 模块基础

1. 创建模块

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <title>Test</title>
    <script type="text/javascript">
        var myApp = angular.module("exampleApp", []);
        myApp.controller('dayCtrl', function ($scope) {
            // controller statements will go here
        });
    </script>
</head>
<body>
    <div class="panel" ng-controller="dayCtrl">
        <!-- HTML code here -->
    </div>
</body>
</html>

模块的三种重要角色:

  • 将一个 AngularJS 应用程序 与 HTML 文档中的一部分相关联
  • 起到通往 AngularJS 框架的关键特性的门户作用.
  • 帮助组织一个 AngularJS 应用程序中的代码和组件.

angular.module 方法所接受的参数

名称 描述
name 新模块的名称
requires 该模块所以来的模块集合
config 盖默快的配置, 等效于调用 Module.config 方法.

angular.module 方法返回一个 Module 对象. 该 Module 对象的成员方法如下表:

名称 描述
animation(name, factory) 支持动画特性, 见 第23章
config(callback) 注册一个在模块加载时对该模块进行配置的函数,见 9.4.1
constant(key, value) 定义一个返回一个常量的服务, 见 9.4.1
controller(name, constructor) 创建一个控制器, 见 13 章
directive(name, factory) 创建一个指令, 对标准HTML词汇进行扩展, 见 15-17 章
factory(name, provider) 创建一个服务, 见 14 章
filter(name, factory) 创建一个对显示给用户的数据进行格式化的过滤器.见 14 章
provider(name, type) 创建一个服务.
name 返回模块名称
run(callback) 注册一个在 Angular 加载完毕后用于对所有模块进行配置的函数.
service(name, constructor) 创建一个服务
value(name, value) 定义一个返回一个常量的服务.
factory, service, provider 的区别 见 14,18 章

可以按照任何顺序创建组件, AngularJS 将保证在开始调用工厂函数和执行依赖注入之前一切都已正确创建.

2. fluent API

Module 对象定义的方法返回的结果仍然是 Module 对象本身. 这是的能够使用 fluent API , 即多个方法调用可以链式调用链接在一起.
如下示例:

<script type="text/javascript">
    angular.module('exampleApp', [])
        .controller('dayCtrl', ['$scope', function ($scope) {
            var dayName = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Staturday"]
            $scope.day = dayName[new Date().getDay()];
        }])
        .controller('tomorrowCtrl', ['$scope', function ($scope) {
            var dayName = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Staturday"]
            $scope.day = dayName[(new Date().getDay() + 1) % 7]
        }])
</script>

# angular.module 方法得到 Module 对象作为返回结果, 在这个对象上直接调用 controller 方法创建 dayCtrl 控制器. 从 controller 方法得到的结果与调用 angular.module 方法得到的结果是同一个 Module 对象, 所以可以使用它调用 controller 方法来创建 tomorrowCtrl .

3. ng-app 与 模块

将 ng-app 指令应用到 HTML 中. ng-app 属性是在 AngularJS 生命周期的 bootstrap 阶段被使用.

4. 模块创建/查找陷阱

var myApp = angular.module('exampleApp');       # 查找名称为 exampleApp 的模块
var myApp = angular.module('exampleApp', []);   # 创建名称为 exampleApp 的模块

二. 使用模块组织代码

1. 模块依赖

任何 AngularJS 模块都可以依赖于在其他模块中定义的组件, 在复杂的应用程序中这是一个能够使得组织代码更为容易的特性.

模块的定义可以按照任何顺序定义. AngularJS 会加载定义在程序中的所有模块并解析依赖, 将每个模块中包含的构件进行合并.这个合并使得无缝的使用来来自其他模块的功能成为可能.

<script>
    var controllersModule = angular.module("exampleApp.Controllers", [])

    controllersModule.controller("dayCtrl", function ($scope, days) {
        $scope.day = days.today;

    });

    controllersModule.controller("tomorrowCtrl", function ($scope, days) {
        $scope.day = days.tomorrow;
    });

    angular.module("exampleApp.Filters", []).filter("dayName", function () {
        var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday",
                        "Thursday", "Friday", "Saturday"];
        return function (input) {
            return angular.isNumber(input) ? dayNames[input] : input;
        };
    });      

    var myApp = angular.module("exampleApp",
        ["exampleApp.Controllers", "exampleApp.Filters",
         "exampleApp.Services", "exampleApp.Directives"]);  // 依赖注入. 

    angular.module("exampleApp.Directives", [])
        .directive("highlight", function ($filter) {

            var dayFilter = $filter("dayName");

            return function (scope, element, attrs) {
                if (dayFilter(scope.day) == attrs["highlight"]) {
                    element.css("color", "red");
                }
            }
        });

    var now = new Date();
    myApp.value("nowValue", now);

    angular.module("exampleApp.Services", [])
        .service("days", function (nowValue) {
            this.today = nowValue.getDay();
            this.tomorrow = this.today + 1;
        });

</script>

// 模块的定义可以按照任何顺序定义. AngularJS 会加载定义在程序中的所有模块并解析依赖, 将每个模块中包含的构件进行合并.这个合并使得无缝的使用来来自其他模块的功能成为可能.如 exmapleApp.service 模块中的 days 服务依赖来自于 exampleApp 模块中的 nowValue 值服务, exmapleApp.directives 模块中指令依赖于来自 exampleApp.filter 模块中的过滤器.

2. Module.config

传给 config 方法的函数在当前模块被加载后调用;

config 方法接受一个函数, 该函数在调用方法的模块被加载后调用. config 方法通常通过注入来自其他服务的值的方式用于配置模块.

3. Module.run

传给 run 方法的函数在所有模块被加载后调用

run 方法接受的函数只会在所有模块加载完成后以及解析完他们的依赖后才会被调用.

<script>

    var myApp = angular.module("exampleApp",
        ["exampleApp.Controllers", "exampleApp.Filters",
            "exampleApp.Services", "exampleApp.Directives"]);

    // constant 方法与 value 方法类似, 但是创建的能够作为 config 方法所声明的依赖使用 (value 服务做不到).
    myApp.constant("startTime", new Date().toLocaleTimeString());

    myApp.config(function (startTime) {
        console.log("Main module config: " + startTime);
    });
    myApp.run(function (startTime) {
        console.log("Main module run: " + startTime);
    });

    angular.module("exampleApp.Directives", [])
        .directive("highlight", function ($filter) {

            var dayFilter = $filter("dayName");

            return function (scope, element, attrs) {
                if (dayFilter(scope.day) == attrs["highlight"]) {
                    element.css("color", "red");
                }
            }
        });

    var now = new Date();
    myApp.value("nowValue", now);

    angular.module("exampleApp.Services", [])
        .service("days", function (nowValue) {
            this.today = nowValue.getDay();
            this.tomorrow = this.today + 1;
        })
        .config(function() {
            console.log("Services module config: (no time)");
        })
        .run(function (startTime) {
            console.log("Services module run: " + startTime);
        });

</script>

AngularJS高级程序设计读书笔记 -- 模块篇的更多相关文章

  1. AngularJS高级程序设计读书笔记 -- 大纲篇

    零. 初衷 现在 AngularJS 4 已经发布了, 楼主还停留在 1.x 的阶段, 深感自卑. 学习 AngularJS 的初衷是因为, 去年楼主开始尝试使用 Flask 开发自动化程序, 需要用 ...

  2. AngularJS高级程序设计读书笔记 -- 过滤器篇

    一. 过滤器基础 过滤器用于在视图中格式化展现给用户的数据. 一旦定义过滤器之后, 就可在整个模块中全面应用, 也就意味着可以用来保证跨多个控制器和视图之间的数据展示的一致性. 过滤器将数据在被指令处 ...

  3. AngularJS高级程序设计读书笔记 -- 服务篇

    服务是提供在整个应用程序中所使用的任何功能的单例对象. 单例 : 只用一个对象实例会被 AngularJS 创建出来, 并被程序需要服务的各个不同部分所共享. 1. 内置服务 一些关键方法也被 Ang ...

  4. AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令

    2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...

  5. AngularJS高级程序设计读书笔记 -- 指令篇 之 内置指令

    1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 ...

  6. AngularJS高级程序设计读书笔记 -- 控制器篇

    作用域组成了一个能够用于在控制器之间形成通信的体系结构. 1. 控制器和作用域的基本原理 控制器就像领域模型与视图之间的纽带, 他给视图提供数据与服务, 并且定义了所需的业务逻辑, 从而将用户行为转换 ...

  7. javascript高级程序设计读书笔记-事件（一）

    读书笔记,写的很乱   事件处理程序   事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别  没有DOM1 同样的事件 DOM0会顶掉html事件   因为他们都是属性  而 ...

  8. JavaScript高级程序设计-读书笔记（2）

    第6章 面向对象的程序设计 创建对象 1.最简单方式创建Object的实例,如 var person = new Object(); person.name = “Greg”; person.age ...

  9. javascript高级程序设计读书笔记

    第2章  在html中使用javascript 一般都会把js引用文件放在</body>前面,而不是放在<head>里, 目的是最后读取js文件以提高网页载入速度. 引用js文 ...

随机推荐

  1. Elasticsearch【正则搜索】分析&实践

    在ES中有很多使用不是很频繁的查询,可以达到一些特殊的效果.比如基于行为路径的漏斗模型.本篇就从使用上讲述一下正则表达式查询的用法. Regexp Query regexp允许使用正则表达式进行ter ...

  2. 【算法系列学习】[kuangbin带你飞]专题十二 基础DP1 B - Ignatius and the Princess IV

    http://www.cnblogs.com/joeylee97/p/6616039.html 引入一个cnt,输入元素与上一个元素相同,cnt增加,否则cnt减少,当cnt为零时记录输入元素,因为所 ...

  3. PHP学习笔记-2

    PHP 是一门弱类型语言: 在上面的实例中,我们注意到,不必向 PHP 声明该变量的数据类型.(跟Javascript很像啊!) PHP 会根据变量的值,自动把变量转换为正确的数据类型. 在强类型的编 ...

  4. 微信公众号开发笔记3-sdk接入（nodejs）

    另一个2小时 access_token是需要2小时更新一次,在这里,又引入了一个2小时获取一次的字段,这个字段是: jsapi_ticket,这个字段是接入sdk的前提.与access_token类似 ...

  5. 解决xmapp中Apache端口号占用问题

    [原]解决 "安装xmapp后Apache不能正常启动" 问题 小伙伴们安装xmapp后发现Apache不能正常开启,下面给出了不同情况的解决办法,可以分为以下几种情况分析问题: ...

  6. Potato(邪恶土豆)–windows全版本猥琐提权

    工作原理: Potato利用已知的Windows中的问题,以获得本地权限提升,即NTLM中继(特别是基于HTTP > SMB中继)和NBNS欺骗.使用下面介绍的技术,它有可能为一个非特权用户获得 ...

  7. Redis学习-Sentinel

    Redis的Sentinel系统用于管理多个Redis服务器(instance), 该系统执行以下三个任务: 监控(Monitoring):Sentinel会不断地检查你的主服务器和从服务器是否运作正 ...

  8. Android ec环境配置

    ec环境配置 1.0概述 鉴于很多同事,或者新从事android开发,虽然会做android的开发,但是会遇见一些最基本的环境搭建问题,本文仅作为(win7 64位系统)eclipse中集成andro ...

  9. javaScript 设计模式系列之一：观察者模式

    介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),一个目标对象管理所有相依于它的观察者对象.该模式中存在两个角色:观察者和被观察者.目标对象与观察者之间的抽象耦合关系能够单独扩展 ...

  10. 4.从AbstractQueuedSynchronizer(AQS)说起(3)——AQS结语

    前两节的内容<2.从AbstractQueuedSynchronizer(AQS)说起(1)——独占模式的锁获取与释放> .<3.从AbstractQueuedSynchronize ...