什么是服務(wù)？
- 服務(wù)就是功能气破。angular在一開始就幫我們定義一些功能，我們可以使用這些功能餐抢。都是一個方法或者一個對象的形式來調(diào)用指定的功能现使。而我們想要使用這些功能就必須要注入。
- 所謂服務(wù)就是將一些通用性的功能邏輯進行封裝方便使用旷痕，AngularJs允許開發(fā)自己根據(jù)自己需求來定義的服務(wù)碳锈。
- 內(nèi)置服務(wù)：
- $location
- $log
- $timeout $interval
- $http
- $filter
- 自定義服務(wù)分為三種：
- 1.factory
- 2.service
- 3.value
- 服務(wù)的本質(zhì)就是一個方法或者是一個對象。所以自定義服務(wù)就是要返回一個對象或函數(shù)以供使用欺抗。
- factory
- 1.寫好angular模板（創(chuàng)建模板售碳，創(chuàng)建控制器，綁定模板/控制器）
//1.創(chuàng)建模板
var app = angular.module('app', []);
//2.創(chuàng)建控制器
app.controller('myController', ['$scope', function ($scope) {
}]);
//3.綁定模塊
//4.綁定控制器
<body ng-app="app" ng-controller="myController">
</body>
- 2.自定義一個方法（也就是服務(wù)myFac）
app.factory('myFac',function () {
return function () {
alert(1);
}
});
//這個方法就是一個服務(wù)绞呈，想要使用服務(wù)就需要先注入贸人。so~~~
- 3.注入服務(wù)（myFac）。調(diào)用這個方法佃声，執(zhí)行艺智。
app.controller('xmgController', ['$scope','myFac', function ($scope,myFac) {
//執(zhí)行
myFac();
}]);
- factory自定義服務(wù)事例，格式化日期：
//1.創(chuàng)建模板
var app = angular.module('app', []);
//2.創(chuàng)建控制器
//服務(wù)在開發(fā)當(dāng)中是幫我們封裝一些工具方法秉溉。
app.controller('xmgController', ['$scope','xmgDate', function ($scope,xmgDate) {
//7.使用這個服務(wù)方法力惯。
$scope.curDateTime = xmgDate.showDateTime();
}]);
//5.創(chuàng)建一個服務(wù)碗誉。
app.factory('xmgDate',['$filter',function ($filter) {
//6.創(chuàng)建一個格式化日期的方法。
function showDateTime() {
var curDate = new Date();
var dateFiler = $filter('date');
return dateFiler(curDate,'yyyy-MM-dd hh:mm:ss');
}
return {
showDateTime:showDateTime
}
}]);
//3.綁定模塊
//4.綁定控制器
-
service（service自定義服務(wù)父晶，所有的方法都是以this的方式定義.）（推薦使用）
- 1.寫好angular模板（創(chuàng)建模板哮缺，創(chuàng)建控制器，綁定模板/控制器）
//1.創(chuàng)建模板
var app = angular.module('app', []);
//2.創(chuàng)建控制器
app.controller('myController', ['$scope', function ($scope) {
}]);
//3.綁定模塊
//4.綁定控制器
<body ng-app="app" ng-controller="myController">
</body>
app.service('myService',function () {
this.show = function () {
alert('aa');
}
this.show2 = function () {
alert('222');
}
});
- 3.注入服務(wù)（myService）甲喝。使用這個服務(wù)調(diào)用里面的方法(show,show2)尝苇，執(zhí)行。
app.controller('myController', ['$scope','myService', function ($scope,myService) {
myService.show();
myService.show2();
}]);
- service自定義服務(wù)事例,把一個對象轉(zhuǎn)成指定格式的字符串:
//1.創(chuàng)建模板
var app = angular.module('app', []);
//2.創(chuàng)建控制器
app.controller('xmgController', ['$scope','formData', function ($scope,formData) {
//7.注入服務(wù)埠胖，并使用糠溜。
var obj = {
name:'gxq',
age:'20'
}
alert(formData.formString(obj));
}]);
//5.創(chuàng)建一個服務(wù)
app.service('formData',function () {
//6.把一個對象轉(zhuǎn)成指定格式的字符串, 轉(zhuǎn)成：name=xmg&age=10
//方法
this.formString = function (obj) {
var queryStr = '';
for(var key in obj){
queryStr += key+'='+obj[key]+'&'
}
return queryStr.slice(0,-1);
}
});
//3.綁定模塊
//4.綁定控制器
- value
- value表現(xiàn)形式上是一個服務(wù)，本質(zhì)上可以看做一個常量直撤。
//1.創(chuàng)建模板
var app = angular.module('app', []);
//2.創(chuàng)建控制器
app.controller('xmgController', ['$scope','apiKey', function ($scope,apiKey) {
alert(apiKey);
}]);
//服務(wù)
app.value('apiKey','asdfasdfasdf146');
//3.綁定模塊
//4.綁定控制器
- 頁面上就會彈出 'asdfasdfasdf146'
