# 簡介AngularJS中使用factory和service的方法
AngularJS支持使用服務的體系結構“關注點分離”的概念。服務是JavaScript函數,并負責只做一個特定的任務。這也使得他們成為維護和測試的單獨實體。控制器,過濾器可以調用它們作為需求的基礎。服務使用AngularJS的依賴注入機制注入正常。
AngularJS提供例如許多內在的服務,如:$http,?$route,?$window,?$location等。每個服務負責例如一個特定的任務,$http是用來創建AJAX調用,以獲得服務器的數據。$route用來定義路由信息等。內置的服務總是前綴$符號。
有兩種方法來創建服務。
工廠
服務
## 使用工廠方法
對于已經存在實例對象的服務,Factory優先,直接返回這個對象。如:在多個Controller之間共享傳遞數據;對$resource的請求資源的封裝。
使用工廠方法,我們先定義一個工廠,然后分配方法給它。
~~~
var?mainApp?=?angular.module("mainApp",?[]);??
mainApp.factory('MathService',?function()?{?????
??var?factory?=?{};???
??factory.multiply?=?function(a,?b)?{??
???return?a?*?b???
??}??
??return?factory;??
});???
~~~
### 使用服務方法
對于需要new創建的服務而言,則Service優先,Angular會自動new并創建這個對象實例。Service更容易組織一組相同業務邏輯的API,使得業務邏輯更加的內聚。
使用服務的方法,我們定義了一個服務,然后分配方法。還注入已經可用的服務。
~~~
mainApp.service('CalcService',?function(MathService){??
??this.square?=?function(a)?{???
?return?MathService.multiply(a,a);???
?}??
});??
~~~
### 例子
下面的例子將展示上述所有指令。
testAngularJS.html
~~~
html>??
head>??
??title>Angular?JS?Formstitle>??
head>??
body>??
??h2>AngularJS?Sample?Applicationh2>??
??div?ng-app="mainApp"?ng-controller="CalcController">??
???p>Enter?a?number:?input?type="number"?ng-model="number"?/>??
???button?ng-click="square()">Xsup>2sup>button>??
???p>Result:?{{result}}p>??
??div>??
??script?src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">script>??
??script>??
???var?mainApp?=?angular.module("mainApp",?[]);??
???mainApp.factory('MathService',?function()?{?????
?????var?factory?=?{};???
?????factory.multiply?=?function(a,?b)?{??
??????return?a?*?b???
?????}??
?????return?factory;??
???});???
????mainApp.service('CalcService',?function(MathService){??
??????this.square?=?function(a)?{???
??????return?MathService.multiply(a,a);???
?????}??
???});??
????mainApp.controller('CalcController',?function($scope,?CalcService)?{??
??????$scope.square?=?function()?{??
??????$scope.result?=?CalcService.square($scope.number);??
?????}??
???});??
??script>??
body>??
html>??
~~~
### 結果
在Web瀏覽器打開textAngularJS.html。看到結果如下:

## 美文美圖
?
- 前言
- (一)深入理解ANGULARUI路由_UI-ROUTER
- (二)AngularJS路由問題解決
- (四)ANGULAR.JS實現下拉菜單單選
- (五)Angular實現下拉菜單多選
- (六)AngularJS+BootStrap實現彈出對話框
- (七)實現根據不同條件顯示不同控件
- (十)AngularJS改變元素顯示狀態
- (十四)AngularJS靈異代碼事件
- (十七)在AngularJS應用中實現微信認證授權遇到的坑
- (十八)在AngularJS應用中集成科大訊飛語音輸入功能
- (十九)在AngularJS應用中集成百度地圖實現定位功能
- (二十一)Angularjs中scope與rootscope區別及聯系
- (二十三)ANGULAR三宗罪之版本陷阱
- (二十四)AngularJS與單選框及多選框的雙向動態綁定
- (二十五)JS實現導入文件功能
- (二十七)實現二維碼信息的集成思路
- (二十八)解決AngualrJS頁面刷新導致異常顯示問題
- (二十九)AngularJS項目開發技巧之localStorage存儲
- (三十)AngularJS項目開發技巧之圖片預加載
- (三十一)AngularJS項目開發技巧之獲取模態對話框中的組件ID
- (三十二)書海拾貝之特殊的ng-src和ng-href
- (三十三)書海拾貝之簡介AngularJS中使用factory和service的方法
- (三十四)Angular數據更新不及時問題探討
- (三十六)AngularJS項目開發技巧之利用Service&Promise&Resolve解決圖片預加載問題(后記)