【AngularJS: Up & Running】第05章_AngularJS服务揭秘

2019-12-26 原文

1 AngularJS服务

概念：

AngularJS中的服务指的是一些函数或者对象，它们可以在整个应用中持有某些行为和状态。

AngularJS的服务:

工厂类、服务和提供器

服务的功能：

不断的重复的行为、共享状态、缓存、工厂类等

2 页面迁移时的销毁与重建

HTML:

<!DOCTYPE html>
<html ng-app="notesApp">
<head>
    <script type="text/javascript" src="../lib/angular.js"></script>
    <script type="text/javascript" src="js/01_app.js"></script>
</head>
<body ng-controller="MainCtrl as mainCtrl">
<h1>Hello Controllers!</h1>
<button ng-click="mainCtrl.open('first')">Open First</button>
<button ng-click="mainCtrl.open('second')">Open Second</button>
<div ng-switch on="mainCtrl.tab">
    <div ng-switch-when="first">
        <div ng-controller="SubCtrl as ctrl">
            <h3>First tab</h3>
            <ul>
                <li ng-repeat="item in ctrl.list">
                    <span ng-bind="item.label"></span>
                </li>
            </ul>
            <button ng-click="ctrl.add()">Add More Items</button>
        </div>
    </div>
    <div ng-switch-when="second">
        <div ng-controller="SubCtrl as ctrl">
            <h3>Second tab</h3>
            <ul>
                <li ng-repeat="item in ctrl.list">
                    <span ng-bind="item.label"></span>
                </li>
            </ul>
            <button ng-click="ctrl.add()">Add More Items</button>
        </div>
    </div>
</div>
</body>
</html>

JS:

/** * Created by Relish on 2016/9/26. */
var app = angular.module('notesApp',[]);
app.controller('MainCtrl',function () {
    var self = this;
    self.tab = 'first';
    self.open = function (tab) {
        self.tab = tab;
    };
});

app.controller('SubCtrl',function () {
    var self = this;
    self.tab = 'second';
    self.list = [
        {id: 1,label: 'Item 0'},{id: 2,label: 'Item 1'}
    ];
    self.add = function () {
        self.list.push({
            id: self.list.length + 1,label: 'Item ' + self.list.length
        });
    };
});

销毁与重建的体现：
在First tab中添加li节点，切换至Second tab，再切换回First tab。之前添加的节点就消失了。显然，First tab页面被销毁并重建了。
原因：

一个控制器不能直接和另一个控制器进行交流并共享状态或者行为。

3 服务与控制器

服务器	控制器
业务层逻辑	表现层逻辑
独立于页面	和视图直接相关
驱动应用	驱动UI
可重用的	一次性的
决定如何调用服务端接口，常见的验证逻辑，应用级别的数据存储，可重用的业务逻辑	决定如何获取数据，显示哪些数据，如何进行用户交互，展示UI样式

4 AngularJS中的依赖注入(Dependency Injection)

依赖注入的优点：

增强代码的重用性、模块化和可测试性。

4.1 对比

4.1.1 非依赖注入方式

function fetchDashboardData(){
    var $http = new HttpService();
    return $http.get('my/url');
}

4.1.2 依赖注入方式

function fetchDashboardData($http){
    return $http.get('my/url');
}

5 举例（$log）

<html ng-app="notesApp">
<body ng-controller="MainCtrl as mainCtrl">
<h1>Hello Services!</h1>
<button ng-click="mainCtrl.logStuff()">Log something</button>
<script src="../lib/angular.js"> </script>
<script type="text/javascript"> angular.module('notesApp',[]) .controller('MainCtrl',['$log',function ($log) { var self = this; self.logStuff = function () { $log.log('The button was pressed'); }; }]) </script>
</body>
</html>

安全的依赖注入：
上例中的依赖注入方式定义如下：
myModule.controller('MainCtrl',['$log',function ($log) {}])
也能这样定义
myModule.controller('MainCtrl',[function ($log) {}])
尽管第二种方式代码量更少更简洁，但是还是推荐使用第一种。原因是，当我们构建完应用宁部署时，通常会把JS最小化和不可读化（相当于Android的代码混淆）。经过这一步命名空间就失效了，$log会被修改称更短更无法让人识别的变量，从而导致代码出错。

6 注入顺序

一一对应
myModule.controller("MainCtrl",["$log","$window",function($l,$w){}])
l对应 log; w对应 window。

7 判断何时使用服务

可重用性：不止一个控制器护着服务可能会用到它所实现的某个具体函数
应用级别的状态：需要在整个应用中保存状态（控制器在某些时候会销毁和重建）
与视图无关：实现的功能与视图无关
需要与第三方服务整合：服务更易于实现在单元测试中模拟或测试第三方服务
缓存/工厂类：需要缓存对象、使用工厂类创建模型对象时

8 创建简单的自定义AngularJS服务

HTML:

<html ng-app="notesApp">
<body ng-controller="MainCtrl as mainCtrl">
<h1>Hello Controllers!</h1>
<button ng-click="mainCtrl.open('first')">
    Open First
</button>
<button ng-click="mainCtrl.open('second')">
    Open Second
</button>
<div ng-switch on="mainCtrl.tab">
    <div ng-switch-when="first">
        <div ng-controller="SubCtrl as ctrl">
            <h3>First tab</h3>
            <ul>
                <li ng-repeat="item in ctrl.list()">
                    <span ng-bind="item.label"></span>
                </li>
            </ul>
            <button ng-click="ctrl.add()">
                Add More Items
            </button>
        </div>
    </div>
    <div ng-switch-when="second">
        <div ng-controller="SubCtrl as ctrl">
            <h3>Second tab</h3>
            <ul>
                <li ng-repeat="item in ctrl.list()">
                    <span ng-bind="item.label"></span>
                </li>
            </ul>
            <button ng-click="ctrl.add()">
                Add More Items
            </button>
        </div>
    </div>
</div>
<script src="../lib/angular.js"> </script>
<script src="js/03_app.js"></script>
</body>

</html>

JS:

/** * Created by Relish on 2016/9/26. */
angular.module('notesApp',[])
    .controller('MainCtrl',[function () {
        var self = this;
        self.tab = 'first';
        self.open = function (tab) {
            self.tab = tab;
        };
    }])
    .controller('SubCtrl',['ItemService',function (ItemService) {
            var self = this;
            self.list = function () {
                return ItemService.list();
            };
            self.add = function () {
                ItemService.add({
                    id: self.list().length + 1,label: 'Item ' + self.list().length
                });
            };
        }])
        //通过angular.moudle.factory创建服务。
    .factory('ItemService',[function () {
        var items = [
            {id: 1,label: 'Item 1'}
        ];
        return {
            list: function () {
                return items;
            },add: function (item) {
                items.push(item);
            }
        };
    }]);