摘要:通過工廠模式創(chuàng)建自定義服務(wù)同樣可以注入依賴,但不能注入作用域?qū)ο蟆C直仨毞弦?guī)范你的服務(wù)名字龍傲天使用方法關(guān)聯(lián)對(duì)應(yīng)的和使用和方法創(chuàng)建服務(wù),常用于返回一個(gè)常量。
服務(wù) Service
服務(wù)這個(gè)概念其實(shí)并不陌生,比如在Java語言中便有這樣的概念,其作用就是對(duì)外提供某個(gè)特定的功能,如消息服務(wù),菜單服務(wù)等,是一個(gè)獨(dú)立的模塊。
angular的服務(wù)是這樣定義的:
Angular services are singletons objects or functions that carry out specific tasks common to web apps.
在Angular中,服務(wù)的本質(zhì)是一些和控制器捆綁在一起的一個(gè)單例對(duì)象或函數(shù),對(duì)外提供特定的功能。通過這些對(duì)象提供了在應(yīng)用的整個(gè)生命周期都存有數(shù)據(jù)的方法,當(dāng)重載或刷新頁(yè)面時(shí),數(shù)據(jù)不會(huì)被清除,而且還與加載之前保持一致。即無論這個(gè)服務(wù)被注入到任何地方,對(duì)象始終只有一個(gè)實(shí)例。
這與我們自己定義一個(gè)function然后在其他地方調(diào)用不同,因?yàn)榉?wù)被定義在一個(gè)模塊中,所以其使用范圍是可以被我們管理的。angular的避免全局變量污染意識(shí)非常強(qiáng)。
內(nèi)置服務(wù)Angular提供了很多內(nèi)置服務(wù),如$scope、$http、$window、$location等。
我們介紹一下$location。(注意服務(wù)是如何注入控制器的,后邊會(huì)有多帶帶模塊介紹angular的依賴注入)
獲取url的相關(guān)方法:angular.module("MyApp").controller("MyController"["$scope","$location",function($scope,$location){ $scope.onclick = function () { $scope.url = $location.absUrl(); } }])當(dāng)前的地址是: {{url}}
以"http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false" 這個(gè)路徑為例:
1.獲取當(dāng)前完整的url路徑:
$location.absUrl():
http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false
*2.獲取當(dāng)前url路徑(當(dāng)前url#后面的內(nèi)容,包括參數(shù)和哈希值--哈希值介紹):
$location.url();
// /demandManager/view.html?orderId=10&projectId=42&mWin=false*3.獲取當(dāng)前url的子路徑(也就是當(dāng)前url#后面的內(nèi)容,不包括參數(shù)):
$location.path()
// /demandManager/view.html
4.獲取當(dāng)前url的協(xié)議(比如http,https)
$location.protocol()
// http
5.獲取當(dāng)前url的主機(jī)名
$location.host()
// localhost
6.獲取當(dāng)前url的端口
$location.port()
// 80 (這里就是wamp的默認(rèn)端口號(hào))
*7.獲取當(dāng)前url的哈希值(hash 屬性是一個(gè)可讀可寫的字符串,該字符串是 URL 的錨部分)
$location.hash()
// null
*8.獲取當(dāng)前url的參數(shù)的序列化json對(duì)象修改url的相關(guān)方法:
$location.search()
// {"orderId":10,"projectId":42,"mWin":"false"}
于$location.search(),$location.url();,$location.path(),$location.hash(),這四種可以傳入?yún)?shù)進(jìn)行修改url,在這種情況下,函數(shù)的返回值都是$location本身:
1.修改url的子路徑(也就是當(dāng)前url#后面的內(nèi)容,包括參數(shù)):
參數(shù)格式:字符串
$location.url("/demandCustomer/view.html?orderId=10&projectId=42&mWin=true"); //http://39.106.222.235:8080/cds/personalCenter/index.html#/demandCustomer/view.html?orderId=10&projectId=42&mWin=true
2.修改url的子路徑部分(也就是當(dāng)前url#后面的內(nèi)容,不包括參數(shù)):
參數(shù)格式:字符串
$location.path("/demandCustomer/view.html"); //http://39.106.222.235:8080/cds/personalCenter/index.html#/demandCustomer/view.html?orderId=10&projectId=42&mWin=false
3.修改url的哈希值部分
參數(shù)格式:字符串
$location.hash("#footer"); //http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false#footer
4.修改url的參數(shù)部分(這是重點(diǎn)啊!!!!!!!!)
(1).傳入兩個(gè)參數(shù),第一個(gè)參數(shù)的格式為字符串:
①第二個(gè)參數(shù)的格式也是字符串
第一個(gè)參數(shù)表示url參數(shù)的屬性名,第二個(gè)參數(shù)是該屬性名的屬性值,如果是已有屬性名,則修改,如果不是已有屬性,則新增
$location.search("mWin","true") //http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=true
②第二個(gè)參數(shù)的格式為數(shù)組,數(shù)組中的各個(gè)值也是字符串或者布爾值
第一個(gè)參數(shù)表示url參數(shù)的屬性名,第二個(gè)參數(shù)是該屬性名的值,有多少個(gè)值,url中就會(huì)依次重復(fù)出現(xiàn)多少個(gè).如下:
$location.search("projectSearch",["book","home"]) //http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false&projectSearch=book&projectSearch=home
(2).傳入兩個(gè)參數(shù),第一個(gè)參數(shù)為字符串,第二個(gè)參數(shù)為null:
第一個(gè)值表示url參數(shù)的屬性名,如果是已有屬性名,則刪除該屬性,如果不是已有屬性,那就等于沒改過
$location.search("projectId",null) //http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&mWin=false
(3).傳入一個(gè)參數(shù),格式為json對(duì)象:
直接用這個(gè)json對(duì)象里的鍵值對(duì)替換整個(gè)url的參數(shù)部分
①普通的鍵值對(duì):
$location.search({orderId:11,projectId:45,mWin:true,projectSearch:"book"}) //http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=11&projectId=45&mWin=true&projectSearch=book
②屬性值為一個(gè)數(shù)組:
$location.search({orderId:11,projectId:45,mWin:true,projectSearch:["book","home"]}) //http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=11&projectId=45&mWin=true&projectSearch=book&projectSearch=home
(4).傳入一個(gè)參數(shù),格式為字符串:
直接用這個(gè)字符串替換整個(gè)url的參數(shù)部分(沒有鍵值對(duì),參數(shù)部分就是一個(gè)屬性名)
$location.search("role") //http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?role不存入歷史記錄
在上文的所有修改url的方法的時(shí)候,每修改一次,url都會(huì)被存入歷史記錄,可以使用后退按鈕回到修改前的url,如果不想要這種效果,而僅僅是替換當(dāng)前的記錄,可以使用:
$location.replace();
例子:
// 原url: // http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false $location.url("/demandCustomer/view.html?orderId=10&projectId=45&mWin=true"); // 修改一次后: // http://39.106.222.235:8080/cds/personalCenter/index.html#/demandCustomer/view.html?orderId=10&projectId=45&mWin=true // 按下后退回到原url: // http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false // 再按下前進(jìn)回到修改后url: // http://39.106.222.235:8080/cds/personalCenter/index.html#/demandCustomer/view.html?orderId=10&projectId=45&mWin=true $location.path("/demandCustomer").replace(); // 修改第二次后調(diào)用replace(): // http://39.106.222.235:8080/cds/personalCenter/index.html#/demandCustomer/view.html?orderId=10&projectId=42&mWin=false // 按下后退,不會(huì)回到第二次修改前的url,而是回到第一次修改前的url // http://39.106.222.235:8080/cds/personalCenter/index.html#/demandManager/view.html?orderId=10&projectId=42&mWin=false監(jiān)聽路徑跳轉(zhuǎn)
Angular也可以監(jiān)聽路徑的變化,這些事件我們會(huì)在路由中做講解。(待添加)
http請(qǐng)求$http是Angular內(nèi)置的服務(wù),用于服務(wù)向服務(wù)器發(fā)送請(qǐng)求,應(yīng)用響應(yīng)服務(wù)器傳送過來的數(shù)據(jù)。
寫法:
寫法一 $http({ method: "GET", //可以改成POST url: "/someUrl" }).then(function successCallback(response) { // 請(qǐng)求成功執(zhí)行代碼 }, function errorCallback(response) { // 請(qǐng)求失敗執(zhí)行代碼 }); 寫法二 $http.get("/someUrl",config).then(successCallback, errorCallback); $http.get("/someUrl",{params:{"id":3}}).then(successCallback, errorCallback); $http.post("/someUrl", data:{name:"aaa",id:"1",age:"20"},config).then(successCallback, errorCallback); jsonp寫法 $http({ method: "JSONP", url: "http://www.b.com/test.php?callback=JSON_CALLBACK" }).success(function(response){ console.log(response); }); $http.jsonp( "http://www.b.com/test.php?callback=JSON_CALLBACK" ).success(function (response){ console.log(response); }); //這里要注意,跨域請(qǐng)求的url后一定要追加參數(shù)callback,并且callback的值是固定的,即JSON_CALLBACK,不要去做任何改動(dòng)
這里只做簡(jiǎn)單介紹,項(xiàng)目中我們使用的是基于$http的$resource服務(wù),$resource依賴于$http。創(chuàng)建一個(gè)resource對(duì)象的工廠函數(shù),可以讓你安全的和RESFUL服務(wù)端進(jìn)行數(shù)據(jù)交互。
需要注入 ngResource 模塊。同樣會(huì)有多帶帶模塊介紹。這里是連接(待添加)。
J是中的setTimeout()和setInterval()這個(gè)大家肯定不會(huì)陌生,在Angular中也有同樣的服務(wù)
$timeout 服務(wù)
angular.module("myApp").controller("myCtrl", function($scope, $timeout) { $scope.myHeader = "Hello World!"; $timeout(function () { $scope.myHeader = "How are you today?"; }, 2000); }); //要在模塊中引入
$interval 服務(wù)
angular.module("myApp").controller("myCtrl", function($scope, $timeout) { $scope.theTime = new Date().toLocaleTimeString(); $interval(function () { $scope.theTime = new Date().toLocaleTimeString(); }, 1000); //時(shí)間綁定。 });自定義服務(wù) 創(chuàng)建自定義服務(wù)
3種創(chuàng)建自定義服務(wù)的方式。
Factory
Service
Provider
之前也沒有提到過,Angular這套框架最開始是由后臺(tái)人員開發(fā)的,應(yīng)用了后臺(tái)早就存在的分層思想。所以項(xiàng)目也是使用這一設(shè)計(jì)模式。由此創(chuàng)建自定義服務(wù)時(shí)用到了上述三種方式。
Factoryfactory方式創(chuàng)建的服務(wù),作用就是返回一個(gè)有屬性有方法的對(duì)象。
//通過工廠模式創(chuàng)建自定義服務(wù) //同樣可以注入依賴,但不能注入$scope作用域?qū)ο蟆?angular.module("MetronicApp").factory("myFactory", ["$resource","UrlConfig",function($resource,UrlConfig) { var service = {};//定義一個(gè)Object對(duì)象" service.name = "龍傲天"; service._getUrl = UrlConfig.url; var age;//定義一個(gè)私有化的變量 //對(duì)私有屬性寫getter和setter方法 service.setAge = function(newAge){ age = newAge; } service.getAge = function(){ return age; } //原始需求詳情 service.getUrl = function (id) { return $resource(service._getUrl).get({orderId: id}); }; return service;//返回這個(gè)Object對(duì)象 }]); //創(chuàng)建控制器 angular.module("MetronicApp").controller("myCtrl",["$scope", "myFactory",function($scope, myFactory) { $scope.name = myFactory.name; myFactory.setAge(20); $scope.age =myFactory.getAge(); myFactory.getUrl(id).$promise.then(function (result) { scope.model = result.data; });; }]);service
在service使用構(gòu)造函數(shù)的方法去用它,在控制器中是以new的方式引入,所以可以調(diào)用 service中定義的屬性
//通過工廠模式創(chuàng)建自定義服務(wù) //依賴注入其他模塊 angular.module("MetronicApp").controller("myCtrl",["$scope"",myService",function($scope,myService){ $scope.name=myService.name; myService.get(id).$promise.then(function (result) { $scope.model = result.data; }); }]) /*Service是new出來的,所以可以直接調(diào)用里面的屬性*/ angular.module("MetronicApp").service("myService",["$resource","UrlConfig",function($resource,UrlConfig){ this.name = "龍傲天"; this.url = UrlConfig.url; this.get = function (id) { return this.$resource(this._getUrl).get({orderId: id}); }; }])Provider
如果想在 service 對(duì)象啟用之前,先進(jìn)行模塊范圍的配置,那就應(yīng)該選擇 provider。
當(dāng)你使用Provider創(chuàng)建一個(gè)自定義服務(wù)時(shí),可以通過$get()函數(shù)返回內(nèi)容,唯一可以寫進(jìn)config配置階段的一種。如果服務(wù),必須要在配置階段執(zhí)行,那么必須使用provider。
使用Provider的優(yōu)點(diǎn)就是,你可以在Provider對(duì)象傳遞到應(yīng)用程序的其他部分之前在app.config函數(shù)中對(duì)其進(jìn)行修改。
//名字必須符合規(guī)范:myProvider(你的Provider服務(wù)名字)+Provider angular.module("MetronicApp").config(function(myProviderProvider){ myProviderProvider.name = "龍傲天" }) //使用$get方法關(guān)聯(lián)對(duì)應(yīng)的config angular.module("MetronicApp").provider("myProvider",["$resource","UrlConfig",function($resource,UrlConfig){ this.$get = function(){ return { name : this.name, age : 18, url : UrlConfig.url , getData : function(id){ return this.$resource(UrlConfig.url).get({orderId: id}); } } } }]) angular.module("MetronicApp").controller("myCtrl",["$scope","myProvider",function($scope,myProvider){ $scope.model = { name : myProvider.name, age : myProvider.age, url : myProvider.url, } myProvider.getData(id).$promise.then(function (result) { $scope.model.data = result.data; }); }])constant和value
使用constant和value方法創(chuàng)建服務(wù),常用于返回一個(gè)常量。
angular.module("MetronicApp").constant("$age", { age: "18" }); angular.module("MetronicApp").value("$name", { name : "龍傲天" }); angular.module("MetronicApp").controller("MyController", function($scope, $age, $name){ $scope.name = $name.name $scope.USD = $age.age })過濾器中使用自定義服務(wù)
angular.module("MetronicApp").service("myService",["UrlConfig",function(UrlConfig){ this.name = "龍傲天"; this.url = UrlConfig.url; this.getUrl = function (url) { var arr=url.split("/"); arr.push(this.url); arr.push(this.name); return arr.join("/") } }]) app.filter("myFilter",["myService", function(myService) { return function(url) { return myService.getUrl(url); }; }]);管理服務(wù)的依賴 添加自定義服務(wù)依賴項(xiàng)方法
我們?cè)谧远x服務(wù)時(shí),會(huì)依賴對(duì)象或服務(wù),有下面三種方式:
(1) 隱式聲明
在參數(shù)中直接調(diào)用,但這種方式在代碼壓縮時(shí)注入的對(duì)象可能會(huì)失效
angular.module("MetronicApp").service("myService", function($resource,UrlConfigService) { //code })
(2) 調(diào)用$inject屬性
function myService($resource,UrlConfigService) { //code } myService.$inject = ["$resource","UrlConfigService"]; angular.module("MetronicApp").service("myService", myService);
(3) 顯式聲明
在創(chuàng)建服務(wù)的函數(shù)中,添加一個(gè)數(shù)組,在數(shù)組中按順序聲明需要注入的服務(wù)或?qū)ο竺Q,這種方式既高效也不會(huì)丟失代碼,推薦使用(在上述實(shí)例中我們是用的都是此方法)
angular.module("MetronicApp").service("myService",["$resource","UrlConfig",function($resource,UrlConfig){ this.name = "龍傲天"; this.url = UrlConfig.url; this.get = function (id) { return this.$resource(this._getUrl).get({orderId: id}); }; }])
在angular的modul(模塊)中注入服務(wù),也可以在定義modul時(shí)使用數(shù)組作為第二個(gè)參數(shù),在此處把服務(wù)注入進(jìn)去,這樣在函數(shù)體中使用不一致的服務(wù)名稱也是可以的,不過要確保注入的順序是一致的。(這個(gè)作為穿插,項(xiàng)目中可以使用定義的服務(wù)名稱,也能定義簡(jiǎn)化參數(shù)名稱)注意此方法只針對(duì)顯式聲明有效。
angular.module("MetronicApp").controller("myCtrl",["$scope"",myDemandManageService",function($scope,myService){ //這里的myService就是指myDemandManageService; $scope.name=myService.name; myService.get(id).$promise.then(function (result) { $scope.model = result.data; }); }])嵌套注入服務(wù)
在Angular中,有時(shí)需要將一個(gè)自定義的服務(wù)注入到另一個(gè)自定義的服務(wù)中,形成嵌套注入的形式,通常只需要將被注入的服務(wù)作為內(nèi)置服務(wù),采用顯式聲明的方式注入即可。
// 使用factory定義confirm服務(wù)
angular.module("MetronicApp").factory("confirm", ["$window", function ($win) { return function (msg) { $win.confirm(msg); } }]); // 將confirm服務(wù)顯式的注入到fontWay服務(wù)中 angular.module("MetronicApp").service("fontWay", ["$window", "confirm", function ($win, con) { return function (t, msg) { return (t) ? con(msg) : $win.alert(msg); } }]); angular.module("MetronicApp").controller("MyCtrl", ["$scope", "fontWay", function ($scope, fontWay) { $scope.ask = function (t, msg) { fontWay(t, msg); } }])服務(wù)的其他配置
創(chuàng)建好的服務(wù)一般比較復(fù)雜,如果后期需要修改,往往面臨很高的風(fēng)險(xiǎn),Angular為服務(wù)添加了一些設(shè)置項(xiàng),如裝飾器(decorator),可以在不修改原代碼的情況下為服務(wù)添加其他功能。
裝飾器(decorator)是Angular中內(nèi)置服務(wù)$provide所特有的一項(xiàng)設(shè)置函數(shù),通過它可以攔截服務(wù)在實(shí)例化時(shí)創(chuàng)建的一些功能,并對(duì)原有功能進(jìn)行優(yōu)化和替代。
// 使用工廠函數(shù)factory定義myService服務(wù)
angular.module("MetronicApp").factory("myService", function () { return { name: "龍傲天", age: 18 } }); // 使用$provider的裝飾器decorator為服務(wù)myService擴(kuò)展一個(gè)title屬性 //關(guān)鍵的地方是在于decorator方法的回調(diào)函數(shù)的參數(shù)$delegate,指的是當(dāng)前的數(shù)據(jù)(繼承);項(xiàng)目中可以使用這個(gè)來做你想做的事情。 angular.module("MetronicApp").config(function ($provide) { $provide.decorator("myService", function ($delegate) { $delegate.title = "CDS"; return $delegate; }) }); angular.module("MetronicApp").controller("MyCtrl", function ($scope, myService) { $scope.model = myService; });
服務(wù)是Angular的一個(gè)難點(diǎn),大家可以先理解,在項(xiàng)目中參照上述實(shí)例做比較。。任重而道遠(yuǎn)啊。。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/92714.html
摘要:如何在中使用動(dòng)畫前端掘金本文講一下中動(dòng)畫應(yīng)用的部分。與的快速入門指南推薦前端掘金是非常棒的框架,能夠創(chuàng)建功能強(qiáng)大,動(dòng)態(tài)功能的。自發(fā)布以來,已經(jīng)廣泛應(yīng)用于開發(fā)中。 如何在 Angular 中使用動(dòng)畫 - 前端 - 掘金本文講一下Angular中動(dòng)畫應(yīng)用的部分。 首先,Angular本生不提供動(dòng)畫機(jī)制,需要在項(xiàng)目中加入Angular插件模塊ngAnimate才能完成Angular的動(dòng)畫機(jī)制...
摘要:說明本文實(shí)現(xiàn)了一個(gè)從阿拉伯?dāng)?shù)字到中文數(shù)字,以及從中文數(shù)字到阿拉伯?dāng)?shù)字的轉(zhuǎn)換算法。源代碼在這里阿拉伯?dāng)?shù)字轉(zhuǎn)中文給定一個(gè)阿拉伯?dāng)?shù)字,把它轉(zhuǎn)變?yōu)闈h語表示的數(shù)字。 說明 本文實(shí)現(xiàn)了一個(gè)從阿拉伯?dāng)?shù)字到中文數(shù)字,以及從中文數(shù)字到阿拉伯?dāng)?shù)字的轉(zhuǎn)換算法。同時(shí)用Vuejs和Angularjs同時(shí)實(shí)現(xiàn)了一遍,對(duì)比了一下這兩個(gè)框架的優(yōu)劣。在本例中,Vuejs的方便靈活性完勝Angularjs。 源代碼在這里...
摘要:感謝使用框架本文檔涵蓋構(gòu)建應(yīng)用所需的基礎(chǔ)知識(shí)。用于數(shù)據(jù)校驗(yàn)的組件及相關(guān)文件在此目錄進(jìn)行管理。除了自定義中間件外,還是用了諸多第三方的中間件,它們是五測(cè)試我們使用組件對(duì)服務(wù)端代碼進(jìn)行測(cè)試。識(shí)別當(dāng)前導(dǎo)航從已有導(dǎo)航中刪除給定標(biāo)識(shí)的導(dǎo)航配置。 本文同步至個(gè)人博客 MEAN.js 文檔,轉(zhuǎn)載請(qǐng)注明出處。 Overview 感謝使用 MEAN.js 框架! 本文檔涵蓋構(gòu)建 MEAN 應(yīng)用所需的基礎(chǔ)...
摘要:一團(tuán)隊(duì)組織網(wǎng)站說明騰訊團(tuán)隊(duì)騰訊前端團(tuán)隊(duì),代表作品,致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計(jì),簡(jiǎn)稱,騰訊設(shè)計(jì)團(tuán)隊(duì)網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計(jì)部百度前端研發(fā)部出品淘寶前端團(tuán)隊(duì)用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計(jì)部出品奇舞團(tuán)奇虎旗下前 一、團(tuán)隊(duì)組織 網(wǎng)站 說明 騰訊 AlloyTeam 團(tuán)隊(duì) 騰訊Web前端團(tuán)隊(duì),代表作品WebQQ,致力于前端技術(shù)的研究 ISUX 騰...
閱讀 3040·2023-04-25 18:06
閱讀 3311·2021-11-22 09:34
閱讀 2872·2021-08-12 13:30
閱讀 2059·2019-08-30 15:44
閱讀 1671·2019-08-30 13:09
閱讀 1640·2019-08-30 12:45
閱讀 1726·2019-08-29 11:13
閱讀 3618·2019-08-28 17:51