AngularJS 講解五, Factory ,Service , Provider

時間 2019-11-26

標籤 angularjs 講解 factory service provider 欄目 AngularJS 简体版

原文原文鏈接

一. 首先說一下，爲何要引入Factory,Service和Provider這三個Service層。javascript

1.由於咱們不該該在controller層寫入大量的業務邏輯和持久化數據，controller層越輕薄越好，業務邏輯和持久化數據應該放在Service層。html

2.針對內存性能的考慮，controller會在須要的時候才初始化，不須要的話，就會被放棄。因此AngularJS會在刷新頁面的時候，清空controller. 而永久保存的數據放在Service層，那麼在不一樣的controller之間能夠被調用。java

二.AngularJS 提供了三種方法建立並註冊本身的Service.ruby

1). Factoryapp

2). Serviceide

3). Provider性能

三.對Factory,Service,Provider的詳解this

1).Factory 至關於建立對象，在對象裏添加屬性和方法，返回這個對象，而後在controller裏即可直接用service對象的屬性啦spa

例如：htm

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/demo1.js"></script>
</head>
<body data-ng-app="demoApp">
    <div data-ng-controller="demoController">
        title:<span data-ng-bind="title"></span>
    </div>
</body>
</html>

(function () {
    angular.module('demoApp', []);
    angular.module('demoApp').controller("demoController", function ($scope,demoFactory) {
        $scope.title = demoFactory.getTitle();
    });
    angular.module('demoApp').factory("demoFactory", function () {
        var _title = "ruby's test";
        var service = {};
        service.getTitle = function () {
            return _title;
        }
        return service;
    })
})();

　2).Service 至關因而用new關鍵字來實例化的Service對象(至關於建立了一個構造器)，所以只須要給this添加屬性，而後由service返回this. 在controller層經過該service得到這個屬性。

angular.module('demoApp').controller("demoController", function ($scope,demoService) {
        $scope.title = demoService.getTitle();
    });
    angular.module('demoApp').service('demoService', function () {
        var _title = "Ruby Test service";
        this.getTitle = function () {
            return _title;
        }
    });

3).Provider 是惟一一個能傳到應用程序.config的服務。因此當想要在controller以前啓用，先進行模塊範圍的配置(對provider的一部分屬性值進行配置)，就用provider

　若是想要在controller控制器裏直接調用provider的屬性和方法要放到$get裏

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/demo1.js"></script>
</head>
<body data-ng-app="demoApp">
    <div data-ng-controller="demoController">
        title:<span data-ng-bind="title"></span>
        <br/>
        thingFromConfig:<span data-ng-bind="thingFromConfig"></span>
    </div>
</body>
</html>

angular.module('demoApp', []);
angular.module('demoApp').controller("demoController", function ($scope,demoProvider) {
        demoProvider.setTitle("provider service test");
        $scope.title = demoProvider.getTitle();
        $scope.thingFromConfig = demoProvider.thingOnConfig;
    });
    angular.module('demoApp').provider('demoProvider', function () {
        var _title = "";
        this.thingFromConfig = "";
        this.$get = function () {
            return {
                setTitle: function (t) {
                    _title = t;
                },
                getTitle: function () {
                    return _title;
                },
                thingOnConfig: this.thingFromConfig
            }
        }
    });
    angular.module('demoApp').config(function (demoProviderProvider) {
        demoProviderProvider.thingFromConfig = "Hello, this is a thing from configuration.";
    });

四.深刻解析 AngularJs的service

首先了解一下$provide

AngularJs有個叫$provide的服務，這個服務能夠建立供應商，咱們的service都是經過供應商來定義的。

有六個個建立供應商的方法：

1.Factory

2.Service

3.Constant

4.value

5.provider

6.decorator(裝飾器)