国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費電子書等14項超值服

開通VIP
深究AngularJS——自定義服務詳解(factory、service、provider)

前言

  1. 3種創(chuàng)建自定義服務的方式。
    1. Factory
    2. Service
    3. Provider
  2. 大家應該知道,AngularJS是后臺人員在工作之余發(fā)明的,他主要應用了后臺早就存在的分層思想。所以我們得了解下分層的作用,如果你是前端人員不了解什么是分層,那么你最好問問你后臺的小伙伴。
    dao層:就是Model層,在后臺時,這一層的作用,就要是寫與數(shù)據(jù)庫交互數(shù)據(jù)的一層,在angularJS里就主要是寫ajax的。
    service層:主查寫邏輯代碼的,但在angularJS里也可以持久化數(shù)據(jù)(充當數(shù)據(jù)容器),以供不同的controller高用。
    controller層:即控制層,在angularJS里就是寫控制器的。控制器里盡量不要寫那些不必要的邏輯,盡量寫在service層里。
    所以,就有了創(chuàng)建自定義服務的三種方式。

factory

factory方式創(chuàng)建的服務,作用就是返回一個有屬性有方法的對象。相當于:var f = myFactory();

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><p>{{r}}</p></div><script>//創(chuàng)建模型var app = angular.module('myApp', []);//通過工廠模式創(chuàng)建自定義服務app.factory('myFactory', function() {var service = {};//定義一個Object對象'service.name = "張三";var age;//定義一個私有化的變量//對私有屬性寫getter和setter方法service.setAge = function(newAge){age = newAge;}service.getAge = function(){return age;}return service;//返回這個Object對象});//創(chuàng)建控制器app.controller('myCtrl', function($scope, myFactory) {myFactory.setAge(20);$scope.r =myFactory.getAge();alert(myFactory.name);});</script></body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

在自定義服務里注入服務示例,但不能注入$scope作用域對象。

<script>var app = angular.module('myApp', []);app.factory('myFactory', function($http,$q) {var service = {};service.name = "張三";//請求數(shù)據(jù)service.getData = function(){var d = $q.defer();$http.get("url")//讀取數(shù)據(jù)的函數(shù)。.success(function(response) {d.resolve(response);}).error(function(){d.reject("error");});return d.promise;}return service;});app.controller('myCtrl', function($scope, myFactory) {//alert(myFactory.name);myFactory.getData().then(function(data){console.log(data);//正確時走這兒},function(data){alert(data)//錯誤時走這兒});;});</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

service

通過service方式創(chuàng)建自定義服務,相當于new的一個對象:var s = new myService();,只要把屬性和方法添加到this上才可以在controller里調(diào)用。

<div ng-app="myApp" ng-controller="myCtrl"><h1>{{r}}</h1></div><script>var app = angular.module('myApp', []);app.service('myService', function($http,$q) {this.name = "service";this.myFunc = function (x) {return x.toString(16);//轉16進制}this.getData = function(){var d = $q.defer();$http.get("ursl")//讀取數(shù)據(jù)的函數(shù)。.success(function(response) {d.resolve(response);}).error(function(){alert(0)d.reject("error");});return d.promise;}});app.controller('myCtrl', function($scope, myService) {$scope.r = myService.myFunc(255);myService.getData().then(function(data){console.log(data);//正確時走這兒},function(data){alert(data)//錯誤時走這兒});});</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33

3.provder

只有provder是能傳 .config() 函數(shù)的 service。如果想在 service 對象啟用之前,先進行模塊范圍的配置,那就應該選擇 provider。需要注意的是:在config函數(shù)里注入provider時,名字應該是:providerName+Provider.
使用Provider的優(yōu)點就是,你可以在Provider對象傳遞到應用程序的其他部分之前在app.config函數(shù)中對其進行修改。
當你使用Provider創(chuàng)建一個service時,唯一的可以在你的控制器中訪問的屬性和方法是通過$get()函數(shù)返回內(nèi)容。

<body><div ng-app="myApp" ng-controller="myCtrl"></div><script>var app = angular.module('myApp', []);//需要注意的是:在注入provider時,名字應該是:providerName+Providerapp.config(function(myProviderProvider){myProviderProvider.setName("大圣");});app.provider('myProvider', function() {var name="";var test={"a":1,"b":2};//注意的是,setter方法必須是(set+變量首字母大寫)格式this.setName = function(newName){name = newName}this.$get =function($http,$q){return {getData : function(){var d = $q.defer();$http.get("url")//讀取數(shù)據(jù)的函數(shù)。.success(function(response) {d.resolve(response);}).error(function(){d.reject("error");});return d.promise;},"lastName":name,"test":test}}});app.controller('myCtrl', function($scope,myProvider) {alert(myProvider.lastName);alert(myProvider.test.a)myProvider.getData().then(function(data){//alert(data)},function(data){//alert(data)});});</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

4.在過濾器中注入自定義服務

<body><div ng-app="myApp">在過濾器中使用服務:<h1>{{255 | myFormat}}</h1></div><script>var app = angular.module('myApp', []);app.service('hexafy', function() {this.myFunc = function (x) {return x.toString(16);}});app.filter('myFormat',['hexafy', function(hexafy) {return function(x) {return hexafy.myFunc(x);};}]);</script></body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
本站僅提供存儲服務,所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權內(nèi)容,請點擊舉報。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
跟我學AngularJs:Service、Factory、Provider依賴注入使用與區(qū)別
AngularJs module模塊簡介
AngularJs學習筆記
學習AngularJs:Directive指令用法(完整版)
AngularJS入門教程 - AngularJS指令
(譯) Angular運行原理揭秘 Part 1 | AngularJS中文社區(qū)
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點擊這里聯(lián)系客服!

聯(lián)系客服