（10）AngularJS 1.X 之常用服务
2017-02-08 20:18
190 查看
引言
常用服务的使用
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服务的使用
具有
不具有
那么这两种服务有什么区别呢？具有供应商的服务可以通过
2.1.
在最初使用控制器的时候，我们第一次接触
2.1.1
首先我们创建一个控制器（然后将
创建我们的html片段
运行结果
2.1.2
使用
首先我们创建我们的控制器
创建我们的html片段（注意：一个
运行结果
2.1.3 全局服务注入到其他方法中（
在前面我们说过，服务分为两种，服务的作用域是不一样的，一些全局的作用域服务可以通过
通过
html片段
运行结果
我们说过只可以将具有供应商的服务注入到其他方法中，如果我们将没有供应商的服务注入到其他方法中会出现什么情况呢？以
程序错误：找不到供应商
2.2
关于
在这里我们主要演示一下
创建一下我们的json文件（
2.2.1
直接使用
使用参数列表发送
代码运行发送的
2.2.2
直接使用
使用参数列表发送
使用该方法发送的url
2.3
2.3.1
代码实现
运行结果
2.3.2
代码实现
运行结果 （在url后面添加了
2.3.3
代码实现
运行结果（只是在
2.3.4
代码实现
运行结果
2.4
关于
代码实现
运行结果
2.5
关于
代码实现
运行结果
2.6
在前面我们使用过
2.6.1
* 创建我们的控制器
创建
运行结果
常用服务的使用
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()：用于改变网页的
url
replace()：可以控制是否有返回键
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>
运行结果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Angularjs 常用服务 $http $location $anchorScroll $cacheFactory $timeout $interval $sce
- AngularJS常用服务（$http、$location、$sce等）
- AngularJS-常用服务
- AngularJS中$http服务常用的应用及参数
- AngularJS常用服务（$http、$location、$sce等）
- angularJs常用服务
- AngularJs基础——常用服务
- AngularJS杂记8----部分常用service服务案例详解（持续更新）
- AngularJS入门(10)-Angular服务总结
- nginx: [alert] kill(2480, 10) failed (3: No such process)的解决办法及nginx服务常用命令总结
- [java学习10]angularJS之服务练习
- WebLogic10 Domain在windows XP环境下注册自动启动服务
- Redhat Linux操作系统下常用服务介绍zz
- 常用端口服务对照表
- Windows-常用服务命令列表
- Linux服务器常用启动服务的命令
- 应用部署为Solaris 10 SMF服务
- 系统常用服务命令列表(转)
- 应用框架的设计与实现——.NET平台(10 授权服务.CodeAccessSecurityAttribute)
- ASP.NET程序中常用的三十三种代码(1-10)