AngularJS 服務詳細講解及示例代碼
更新時間：2016年08月17日 15:17:40 作者：wowowofei
本文主要介紹AngularJS 服務，這里整理了AngularJS 服務的基本知識資料，并附示例代碼和實現(xiàn)效果圖，有興趣的小伙伴可以參考下
AngularJS支持使用服務的體系結構“關注點分離”的概念。服務是JavaScript函數(shù)，并負責只做一個特定的任務。這也使得他們即維護和測試的單獨實體?？刂破?，過濾器可以調用它們作為需求的基礎。服務使用AngularJS的依賴注入機制注入正常。
AngularJS提供例如許多內在的服務，如：$http, $route, $window, $location等。每個服務負責例如一個特定的任務，$http是用來創(chuàng)建AJAX調用，以獲得服務器的數(shù)據(jù)。 $route用來定義路由信息等。內置的服務總是前綴$符號。
有兩種方法來創(chuàng)建服務。
工廠
服務
使用工廠方法
使用工廠方法，我們先定義一個工廠，然后分配方法給它。
var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};
factory.multiply = function(a, b) {
return a * b
}
return factory;
});
使用服務方法
使用服務的方法，我們定義了一個服務，然后分配方法。還注入已經(jīng)可用的服務。
mainApp.service('CalcService', function(MathService){
this.square = function(a) {
return MathService.multiply(a,a);
}
});
例子
下面的例子將展示上述所有指令。
testAngularJS.html
<html>
<head>
<title>Angular JS Forms</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="CalcController">
<p>Enter a number: <input type="number" ng-model="number" />
<button ng-click="square()">X<sup>2</sup></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?？吹浇Y果如下。
以上就是對AngularJS 服務的基礎資料整理，后續(xù)繼續(xù)整理相關資料，謝謝大家對本站的支持！
您可能感興趣的文章:
- AngularJS入門教程之服務(Service)
- angularJS Provider、factory、service詳解及實例代碼
- AngularJs Creating Services詳解及示例代碼
- 簡介AngularJS中使用factory和service的方法
- 簡介AngularJS中$http服務的用法
- AngularJS中$http服務常用的應用及參數(shù)
- Angularjs 自定義服務的三種方式(推薦)
- AngularJs自定義服務之實現(xiàn)簽名和加密
- AngularJS入門教程之REST和定制服務詳解
- AngularJS通過$http和服務器通信詳解
- AngularJS服務service用法總結
相關文章
這篇文章主要介紹了深入淺析AngularJS和DataModel 的相關資料,需要的朋友可以參考下2016-02-02
Angular項目中$scope.$apply()方法的使用詳解
這篇文章主要給大家介紹了關于Angular項目中$scope.$apply()方法使用的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Angularjs具有一定的參考學習價值，需要的朋友們下面跟著小編一起來看看吧。2017-07-07
詳解Angular2表單-模板驅動的表單(Template-Driven Forms)
本篇文章主要介紹了詳解Angular2表單-模板驅動的表單(Template-Driven Forms)，具有一定的參考價值，有興趣的可以了解一下2017-08-08
利用Angularjs和bootstrap實現(xiàn)購物車功能
在學習了如何簡單開始一個Angular程序之后，跟著網(wǎng)上的教程我也來實現(xiàn)一個購物車功能，為了減少頁面樣式設計我使用了bootstrap來偷懶，現(xiàn)在分享給大家，有需要的可以參考借鑒。2016-08-08
本篇文章主要介紹了AngularJs之過濾器（filter）詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
使用JavaScript的AngularJS庫編寫hello world的方法
這篇文章主要介紹了使用JavaScript的AngularJS庫編寫hello world的方法,AngularJS是一款高人氣的JavaScript庫,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了AngularJS實現(xiàn)表單驗證，客戶端表單驗證是AngularJS里面最酷的功能之一。AngularJS表單驗證可以讓你從一開始就寫出一個具有交互性和可相應的現(xiàn)代HTML5表單，對AngularJS表單驗證感興趣的小伙伴們可以參考一下2015-12-12
Angularjs 實現(xiàn)動態(tài)添加控件功能
這篇文章主要介紹了Angularjs 實現(xiàn)動態(tài)添加控件功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-05-05
使用Angular material主題定義自己的組件庫的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫的配色體系的相關知識，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了AngularJS 仿微信圖片手勢縮放的實例的相關資料,希望大家通過本文實現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09