AngularJS进阶(四十)创建模块、服务

学习要点

使用模块构架应用

创建和使用服务

为什么要使用和创建服务与模块？

服务允许你打包可重用的功能，使之能在此应用中使用。

模块允许你打包可重用的功能，使之能跨应用使用。

一、应用程序模块化

先看看一个没有模块化的程序

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body ng-controller="defaultCtrl">
    <div class="well">
        <!-- 使用自定义指令 -->
        <div class="btn-group" tri-button counter="data.totalClicks">
            <!-- 遍历按钮 -->
            <button class="btn btn-default" ng-repeat="city in data.cities">
                {{city}}
            </button>
        </div>
        <h5>Total Clicks: {{data.totalClicks}}</h5>
    </div>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">

angular.module("exampleApp", [])
    .controller("defaultCtrl", function ($scope) {
        // 数据模型
        $scope.data = {
            // 城市
            cities : ["London", "New York", "Paris"],
            // 点击总数
            totalClicks : 0
        };
        // 添加监听器，当点击总数发生变化时触发工厂函数
        $scope.$watch("data.totalClicks", function (newVal) {
            console.log("Total click count: " + newVal);
        });
    })
    // 定义指令
    .directive("triButton", function () {
        return {
            // 隔离作用域
            // 双向数据绑定
            scope : {
                counter : "=counter"
            },
            // 链式函数
            link : function (scope, element, attrs) {
                // 点击事件监听，打印日记，计算累加
                element.on("click", function (e) {
                    console.log("Button click: " + e.target.innerText);
                    scope.$apply(function () {
                        scope.counter++;
                    })
                });
            }
        }
    })
</script>
</body>
</html>

单击城市按钮，递增点击总数

接下来，我们将指令分离，使之模块化，我们命名为triButtonDirective.js

angular.module("triButtonDir", [])
    .directive("triButton", function () {
        return {
            // 隔离作用域
            // 双向数据绑定
            scope : {
                counter : "=counter"
            },
            // 链式函数
            link : function (scope, element, attrs) {
                // 点击事件监听，打印日记，计算累加
                element.on("click", function (e) {
                    console.log("Button click: " + e.target.innerText);
                    scope.$apply(function () {
                        scope.counter++;
                    })
                });
            }
        }
    })

接下来，引用定义的标签并且使用它

<!-- 引入指令文件 -->
<script type="text/javascript" src="js/triButtonDirective.js"></script>
<script type="text/javascript">
// 使用指令
angular.module("exampleApp", ["triButtonDir"])

二、创建使用服务

1.使用Factory方法

第一步：将服务模块化，这里创建一个名为triButtonFactory.js的文件

angular.module("triButtonFactory", [])
    .factory("logService", function () {
        var messageCount = 0;
        return {
            log : function (msg) {
                console.log("(Log + " + messageCount++ + ") " + msg);
            }
        }
    })

第二步：在视图中引入该服务

<script type="text/javascript" src="js/triButtonFactory.js"></script>

第三步：在控制器中使用它

// 参数依赖注入
angular.module("exampleApp", ["triButtonDirective", "triButtonFactory"])
    // 作为参数传人控制器中
    .controller("defaultCtrl", function ($scope, logService) {
        // 数据模型
        $scope.data = {
            // 城市
            cities : ["London", "New York", "Paris"],
            // 点击总数
            totalClicks : 0
        };
        // 添加监听器，当点击总数发生变化时触发工厂函数
        $scope.$watch("data.totalClicks", function (newVal) {
            // console.log("Total click count: " + newVal);
            // 使用自定义服务
            logService.log("Total click count: " + newVal);
        });
    })

2.使用Service方法

第一步：创建构造函数，然后创建服务。我们命名为triButtonService.js

var baseLogger = function () {
    this.messageCount = 0;
    this.log = function (msg) {
        console.log(this.msgType + ": " + (this.messageCount++) + " " + msg);
    }
}
var debugLogger = function () {};
debugLogger.prototype = new baseLogger();
debugLogger.prototype.msgType = "Debug";
var errorLogger = function () {};
errorLogger.prototype = new baseLogger();
errorLogger.prototype.msgType = "Error";
angular.module("triButtonService", [])
    .service("logService", debugLogger)

第二步：引入triButtonService.js文件，然后使用服务

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body ng-controller="defaultCtrl">
    <div class="well">
        <!-- 使用自定义指令 -->
        <div class="btn-group" tri-button counter="data.totalClicks">
            <!-- 遍历按钮 -->
            <button class="btn btn-default" ng-repeat="city in data.cities">
                {{city}}
            </button>
        </div>
        <h5>Total Clicks: {{data.totalClicks}}</h5>
    </div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript" src="js/triButtonDirective.js"></script>
<script type="text/javascript" src="js/triButtonService.js"></script>
<script type="text/javascript">
// 使用指令
angular.module("exampleApp", ["triButtonDirective", "triButtonService"])
    .controller("defaultCtrl", function ($scope, logService) {
        // 数据模型
        $scope.data = {
            // 城市
            cities : ["London", "New York", "Paris"],
            // 点击总数
            totalClicks : 0
        };
        // 添加监听器，当点击总数发生变化时触发工厂函数
        $scope.$watch("data.totalClicks", function (newVal) {
            // console.log("Total click count: " + newVal);
            // 使用自定义服务
            logService.log("Total click count: " + newVal);
        });
    })
 </script>
</body>
</html>

3.使用Provider方法

第一步：使用Provider，创建服务。我们命名为triButtonProvider.js

angular.module("triButtonProvider", [])
    .provider("logService", function () {
        var counter = true;
        var debug = true;
        return {
            messageCounterEnabled : function (setting) {
                if (angular.isDefined(setting)) {
                    counter = setting;
                    return this;
                } else {
                    return counter;
                }
            },
            debugEnabled : function (setting) {
                if (angular.isDefined(setting)) {
                    debug = setting;
                    return this;
                } else {
                    return debug;
                }
            },
            // 用于返回服务对象
            $get : function () {
                return {
                    messageCount : 0,
                    log : function (msg) {
                        if (debug) {
                            console.log("(LOG" + (counter ? " + " + this.messageCount++ + ") " : ") " + msg));
                        }
                    }
                }
            }
        }
    })

第二步：引入、配置和使用服务

<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body ng-controller="defaultCtrl">
    <div class="well">
        <!-- 使用自定义指令 -->
        <div class="btn-group" tri-button counter="data.totalClicks">
            <!-- 遍历按钮 -->
            <button class="btn btn-default" ng-repeat="city in data.cities">
                {{city}}
            </button>
        </div>
        <h5>Total Clicks: {{data.totalClicks}}</h5>
    </div>
<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 引入指令文件 -->
<script type="text/javascript" src="js/triButtonDirective.js"></script>
<script type="text/javascript" src="js/triButtonProvider.js"></script>
<script type="text/javascript">
// 使用指令
angular.module("exampleApp", ["triButtonDirective", "triButtonProvider"])
    // 使提供强对象适用于依赖注入，服务器 + Provider = logServiceProvider
    .config(function (logServiceProvider) {
        logServiceProvider.debugEnabled(true).messageCounterEnabled(false);
    })
    .controller("defaultCtrl", function ($scope, logService) {
        // 数据模型
        $scope.data = {
            // 城市
            cities : ["London", "New York", "Paris"],
            // 点击总数
            totalClicks : 0
        };
        // 添加监听器，当点击总数发生变化时触发工厂函数
        $scope.$watch("data.totalClicks", function (newVal) {
            // console.log("Total click count: " + newVal);
            // 使用自定义服务
            logService.log("Total click count: " + newVal);
        });
    })
</script>
</body>
</html>

美文美图



AngularJS进阶(四十)创建模块、服务的更多相关文章

  1. 网站开发进阶(四十四)input type="submit" 和"button"的区别

    网站开发进阶(四十四)input type="submit" 和"button"的区别   在一个页面上画一个按钮,有四种办法: 这就是一个按钮.如果你不写ja ...

  2. Java进阶(四十)Java类、变量、方法修饰符讲解

    Java进阶(四十)Java类.变量.方法修饰符讲解 Java类修饰符 abstract: 将一个类声明为抽象类,没有实现的方法,需要子类提供方法实现. final: 将一个类生命为最终(即非继承类) ...

  3. 网站开发进阶(四十二)巧用clear:both

    网站开发进阶(四十二)巧用clear:both 前言 我们在制作网页中用div+css或者称xhtml+css都会遇到一些很诡异的情况,明明布局正确,但是整个画面却混乱起来了,有时候在IE6下看的很正 ...

  4. Java进阶(四十二)Java中多线程使用匿名内部类的方式进行创建3种方式

    Java中多线程使用匿名内部类的方式进行创建3种方式 package cn.edu.ujn.demo; // 匿名内部类的格式: public class ThreadDemo { public st ...

  5. AngularJS进阶(三十二)书海拾贝之特殊的ng-src和ng-href

    书海拾贝之特殊的ng-src和ng-href 在说明这两个指令的特殊之前,需要先了解一下ng的启动及执行过程,如下: 1) 浏览器加载静态HTML文件并解析为DOM: 2) 浏览器加载angular. ...

  6. AngularJS进阶(三十四)Angular数据更新不及时问题探讨

    Angular数据更新不及时问题探讨 前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题.传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染.根据< ...

  7. AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定

    AngularJS与单选框及多选框的双向动态绑定      赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...

  8. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  9. AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

    AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...

随机推荐

  1. three.js 3D 动画场景

    Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.使用它它能让 WebGL 变得更加简单. 下面用Three.js渲染一个物体360 ...

  2. oracle初试、函数、增删改查、多表查询

      安装oracle后的测试以及解锁账户                  安装后打开命令行,输入 sqlplus 回车后会提示输入用户名,输入 sys或者system 回车后输入密码,密码为安装or ...

  3. 使用Fiddler改变线上js文件的引用路径

    一般的项目开发都是先在本地环境开发,测试环境中完成测试,最后再提交到线上环境. 但是由于版本构建工具有时出现bug或者一些缓存的因素导致测试环境代码可能和线上不一样,这是多么蓝瘦的事情.此处说的是在原 ...

  4. javascript requestAnimationFarme

    今天看到一篇很好的文章推荐一下:原文地址:http://www.zhangxinxu.com/wordpress/?p=3695 CSS3动画那么强,requestAnimationFrame还有毛线 ...

  5. Deap Learning (吴恩达)　第一章深度学习概论　学习笔记

    Deap Learning(Ng) 学习笔记 author: 相忠良(Zhong-Liang Xiang) start from: Sep. 8st, 2017 1 深度学习概论 打字太麻烦了,索性在 ...

  6. 54. Spiral Matrix(中等)

    Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...

  7. 常用java开发文档链接

    使用java开源工具httpClient及jsoup抓取解析网页数据 : https://blog.csdn.net/lovoo/article/details/52674712 jsoup Cook ...

  8. Apache 443端口占用解决方法

    当运行httpd.exe时,出现如下问题 原因是启动Apache会占用443端口,而443被其他程序占用了.我们只需将Apache默认端口443改掉就行.网上搜了一下,说是更改Apache24\con ...

  9. 解决Error: ENOENT: no such file or directory, scandir 'D:\IdeaWork\code-front-jet\node_modules\.npminstall\node-sass\3.7.0\node-sass\vendor'

    在使用npm安装node-sass的时候,可能会出现如下的报错: Error: ENOENT: no such file or directory, scandir 'D:\IdeaWork\code ...

  10. Bootstrap3 栅格系统-实例：多余的列（column）将另起一行排列

    如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列. <div class="row"> &l ...