首頁 > web前端 > js教程 > 用AngularJS的實作自訂服務

用AngularJS的實作自訂服務

一个新手
發布: 2017-09-23 09:54:31
原創
1719 人瀏覽過

我們以cookie為例。

第一步:先開啟控制台使用bower安裝angular-cookies

bower --save angular-cookies
登入後複製

第二步 : 在service目錄下建立一個cache.js檔案。

第三個步驟 : 在index.html中引入angular-cookies模組。

第四步 : 在app.js中加入ngCookies依賴。

'use strict'angular.module('app',['ui.router','ngCookies']);
登入後複製

第五步:在cache.js中呼叫$cookies服務

方法一:service服務的方式

'use strict';
angular.module('app').service('cache', ['$cookies', function($cookies){
    this.put = function(key, value){
        $cookies.put(key, value);
    };    this.get = function(key) {
        return $cookies.get(key);
    };    this.remove = function(key) {
        $cookies.remove(key);
    };
}]);
登入後複製

方法二:facotry服務工廠的方式

angular.module('app').factor('cache', ['$cookies', function($cookies){
    //也就是说factor和service同时声明服务,作用是一样的,它们的区别在于我们调用factor的时候,factor可以在return对象之前可以声明一些私有的属性。如:
    var obj = {};//相当于一个私有属性,外部不可访问,而直接声明service是没有这个功能的。

    //注意:factor和service不同,我们不能再this这个当前对象上面添加属性了,而是返回一个对象
    //这个对象所带来的属性就是我们外面引用的factor可以引用的属性
    return {
            put : function(key, value){
            $cookies.put(key, value);
            };
            get : function(key) {
                return $cookies.get(key);
            };
            remove : function(key) {
                $cookies.remove(key);
            };        
    }
}]);
登入後複製

也就是說factor和service同時宣告服務,作用是一樣的,它們的差別在於我們呼叫factor的時候,factor可以在return物件之前可以宣告一些私有的屬性。
當不需要宣告內部的私有屬性的時候,他們的功能是相同的。
要記住的是factor需要直接回傳一個對象,而service直接回傳函數就可以了。

第六步:使用的時候要在controller控制器中宣告這個服務cache,如

'use strict';
angular.module('app').controller('positionCtrl',['$q','$http','$state','$scope','cache',function ($q,$http,$state,$scope,cache) {
  cache.put('to','day');//存入这个值
  cache.remove('to'); //删除}]);
登入後複製

以上是用AngularJS的實作自訂服務的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板