（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>运行结果

这里写图片描述