（10）AngularJS 1.X 之常用服務

2024-04-27 15:15:38

字體：大中小

來源：轉載

供稿：網友

引言常用服務的使用1scope和rootScope服務的使用11 scope服務的使用12 rootscope服務的使用13 全局服務注入到其他方法中apPRun方法2 http服務的使用21 httpget方法的使用22 httppost方法的使用3 location服務的使用31 host方法的使用32 url方法的使用33 path方法的使用34 replace方法的使用注意和path的區別replace方法是不可以后退的path是可以后退的4 cacheFactory服務的使用5 timeout服務和interval服務的使用6 sce服務的使用61 sce服務的使用

1.引言

在本博客中主要介紹一下服務的使用，AngularJS已經給我們提供的服務，AngularJS給我們提供的服務主要分為兩大類：

具有provider供應商的服務不具有provider供應商的服務

那么這兩種服務有什么區別呢？具有供應商的服務可以通過config方法配置我們的服務屬性，不具有供應商的服務是不可以通過config配置屬性的。還有的服務的作用域是不一樣的。舉個例子：比如$scope服務，作用域是控制器范圍內的，所以$scope服務只能注入到控制器中，還有的服務是全局范圍的，可以注入到更多的方法中，比如$filter服務。接下來我們就來介紹幾個比較常用的服務，其中有：$scope，$rootScope，$http，$location，$cacheFactory，$timeout，$interval，$sce。

2 常用服務的使用

2.1.`$scope`和`$rootScope`服務的使用

在最初使用控制器的時候，我們第一次接觸$scope服務，我們可以使用$scope服務給某一個控制器設置變量，也就是說我們使用$scope設置的變量是局部的，是屬于控制器范圍的，如果我們想設置全局范圍的變量，那么我們可以使用$rootScope服務，其次$scope是沒有供應商的，但是$rootScope是具有供應商的，也就是說$scope服務僅僅可以注入到我們的控制器中，但是$rootScope服務是可以注入到多種方法當中。接下來我們就用實例來看一下這兩個服務的具體使用。

2.1.1 `$scope`服務的使用

首先我們創建一個控制器（然后將$scope注入到控制器中） var app=angular.module("myApp",[]); app.controller("firstController", function ($scope) { $scope.name="hello world" })創建我們的html片段<body> <div ng-controller="firstController">{{name}}</div></body>運行結果

這里寫圖片描述

2.1.2 `$rootscope`服務的使用

使用$rootscope服務我們可以設置我們的全部變量，$rootscope同樣可以注冊到我們的控制器中，但是和$scope相比而言，$rootscope服務所創造的變量不是局限于控制器作用域中。

首先我們創建我們的控制器var app=angular.module("myApp",[]); app.controller("firstController", function ($scope,$rootScope) { $scope.name="hello $scope"; $rootScope.name="hello $rootScope" })創建我們的html片段（注意：一個name屬性是在控制器中，一個name屬性沒有在控制器作用域）<body> <div ng-controller="firstController">{{name}}</div> {{name}}</body>運行結果

這里寫圖片描述

2.1.3 全局服務注入到其他方法中（`app.run`方法）

在前面我們說過，服務分為兩種，服務的作用域是不一樣的，一些全局的作用域服務可以通過run 方法初始化全局的數據 ,只對全局作用域起作用如$rootScope服務，

通過run方法注入全局變量 var app=angular.module("myApp",[]); app.run(function($rootScope){ $rootScope.name="hello $rootScope"; })html片段<body> {{name}}</body>運行結果

這里寫圖片描述

我們說過只可以將具有供應商的服務注入到其他方法中，如果我們將沒有供應商的服務注入到其他方法中會出現什么情況呢？以$scope為例，我們看一看（錯誤代碼） var app=angular.module("myApp",[]); app.run(function($scope){ $scope.name="hello $rootScope"; })程序錯誤：找不到供應商

這里寫圖片描述

2.2 `$http`服務的使用

關于$http服務的使用主要用于Ajax的實現，其中$http服務主要有三種方法get，post，jsonp。

get：用于get請求post：用于post請求jsonp：用于jsonp請求

在這里我們主要演示一下get方法和post方法的使用。

創建一下我們的json文件（person.json）[{ "name":"wpx", "age":"20"},{ "name":"zlr", "age":"22"}]

2.2.1 `$http.get`方法的使用

直接使用get方法發送請求（get方法的第一個參數是url，第二個參數是向服務器傳的參數） //控制器 var app=angular.module("myApp",[]); app.controller("firstController",function($scope,$http){ $scope.get=function(){ $http.get("person.json",{params:{name:"wpx"}}).then(function (result) { console.log(result.data) }) } }) //html標簽 <div ng-controller="firstController"> <button ng-click="get();">發送請求</button> </div>使用參數列表發送get請求（params會生成到url后面，get請求） var app=angular.module("myApp",[]); app.controller("firstController",function($scope,$http){ $scope.get=function(){ $http({ url:"person.json", params:{ id:10 }, method : 'GET', }).then(function (result) { console.log(result.data) }) } }) //html標簽 <div ng-controller="firstController"> <button ng-click="get();">發送請求</button> </div>代碼運行發送的url

這里寫圖片描述

2.2.2 `$http.post`方法的使用

直接使用post方法發送請求（post方法的第一個參數是url，第二個參數是向服務器傳的參數） var app=angular.module("myApp",[]); app.controller("firstController",function($scope,$http){ $scope.get=function(){ $http.post("person.json",{ "id":"wpx" }).then(function (result) { console.log(result.data) }) } }) //html標簽 <div ng-controller="firstController"> <button ng-click="get();">發送請求</button> </div>使用參數列表發送POST請求（注意：請求體用的data參數） var app=angular.module("myApp",[]); app.controller("firstController",function($scope,$http){ $scope.get=function(){ $http({ url:"person.json", method:"POST", data:{ id:"wpx" } }).then(function (result) { console.log(result.data) }) } }) //html標簽 <div ng-controller="firstController"> <button ng-click="get();">發送請求</button> </div>使用該方法發送的url

這里寫圖片描述

2.3 `$location`服務的使用

$location服務解析地址欄中的 URL（基于 window.location），讓你在應用代碼中能獲取到。改變地址欄中的 URL 會反應$location 服務中，反之亦然。在這里主要介紹$location服務的幾種方法。

host()：返回url中的主機路徑path()：用于改變網頁的urlreplace()：可以控制是否有返回鍵 url()：改變主機的url

2.3.1 `host()`方法的使用

代碼實現 var app=angular.module("myApp",[]); app.controller("firstController",function($location){ console.log($location.host()); })運行結果

這里寫圖片描述

2.3.2 `url`方法的使用

代碼實現 var app=angular.module("myApp",[]); app.controller("firstController",function($location){ $location.url("/hello"); })運行結果 （在url后面添加了#!/hello）

這里寫圖片描述

2.3.3 `path`方法的使用

代碼實現 var app=angular.module("myApp",[]); app.controller("firstController",function($location){ $location.path('/hello') })運行結果（只是在url結果添加了#!/hello）

這里寫圖片描述

2.3.4 `replace`方法的使用（注意和`path`的區別，`replace`方法是不可以后退的，`path`是可以后退的）

代碼實現 var app=angular.module("myApp",[]); app.controller("firstController",function($location){ $location.path('/hello').replace() })運行結果

這里寫圖片描述

2.4 `$cacheFactory`服務的使用

關于$cacheFactory服務的使用，是緩存的實現，一般用到該服務可以實現多個控制器之間的數據共享，比如在控制器A中存入緩存，然后在控制器B中獲得緩存的數據，接下來我們就來看一下這個功能怎么實現。

代碼實現 var app=angular.module("myApp",[]); app.controller("A",function($scope,$cacheFactory){ $scope.add= function () { //新建一個名字為myCache的緩存 var cache = $cacheFactory('myCache'); cache.put('name','hello'); } }) app.controller("B",function($scope,$cacheFactory){ $scope.get= function () { //獲取到緩存對象 var cache = $cacheFactory.get('myCache'); //獲取鍵值對 var name1=cache.get('name') //獲取鍵值對 var name2=cache.get('name') //移除鍵值對 cache.remove('name') //獲取鍵值對 var name3=cache.get('name') console.log(name1); console.log(name2); console.log(name3); } }) //html的實現 <div ng-controller="A"> <button ng-click="add();">添加數據</button> </div> <div ng-controller="B"> <button ng-click="get();">獲得數據</button> </div>運行結果

這里寫圖片描述

2.5 `$timeout`服務和`$interval`服務的使用

關于$timeout服務和$interval服務的使用類似于js中的代碼setTimeout()和setInterval()方法類似，$timeout服務是一定時間之后執行一次代碼，$interval服務是一定時間間隔之后執行一次代碼，接下來我們看一下這兩個服務如何使用。

代碼實現 var app=angular.module("myApp",[]); app.controller("A",function($timeout,$interval){ //一秒鐘之后執行一次 $timeout(function(){ console.log("$timeout"); },1000); //每間隔一秒鐘執行一次 $interval(function () { console.log("$interval"+new Date().toString()); },1000) })運行結果

這里寫圖片描述

2.6 `$sce`服務的使用

在前面我們使用過ngSanitize插件，$sce服務和ngSanitize插件的作用差不多，該服務也用于解析html的，接下來我們就來使用一下該服務。

2.6.1 `$sce`服務的使用

*　創建我們的控制器

var app=angular.module("myApp",[]); app.controller("firstController",function($scope,$sce){ $scope.text=$sce.trustAsHtml("<h1>AAAA</h1>") })創建html片段 <div ng-controller="firstController"> <div ng-bind-html="text"></div> </div>運行結果

這里寫圖片描述