angularjsService
2016-06-01 15:41
465 查看
$location可以放回当前页面的url地址；$localtion比使用window.location要好，因为angularjs会一直监控app，同时处理事件的变化！
举例：
<!DOCTYPE html>
<html>
<head>
<title>$location</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>当前页面的url：</p>
{{myUrl}}
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$location){
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>
浏览器运行之后的效果：
当前页面的url：
file:///E:/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E4%BD%93%E7%B3%BB/bootstrap/angularStudy/demo15.html
$http是angularjs中使用最多的服务。angularjs中的服务用于向服务器发送请求，应用响应服务器传送过来的数据。
举例
<!DOCTYPE html>
<html>
<head>
<title>$http</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{myWelcome}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$http){
$http.get("demo01.html").then(function(response){
$scope.myWelcome = response.data;
});
});
</script>
</body>
</html>
浏览器上的结果：
<!DOCTYPE html><html><head><title>angularJs</title><meta charset="utf-8" /><script src="angular/angular.min.js"></script></head><body>/*ng-app定义了一个应用。该应用是angular的所有者ng-model把元素的值绑定到应用。ng-bind把应用的数据绑定到HTML试图。ng-controller 定义该元素的控制器*/<div ng-app="myApp" ng-controller="myCtrl">name1:<input
type="text" ng-model="firstname"></input><br/>name2:<input type="text" ng-model="lastname"></input><br/>姓名：{{firstname + " "+lastname}}</div><script>//定义angular应用var app = angular.module('myApp',[]);//控制器用于控制angular应用app.controller('myCtrl',function($scope){$scope.firstname="qqq";$scope.lastname
= "www";});</script></body></html>
$timeout服务对应了window.setTimeout()函数
举例
<!DOCTYPE html>
<html>
78a2
<head>
<title>$timeout</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{myHeader}}</p>
</div>
<script>
angular.module('myApp',[]).controller('myCtrl',function($scope,$timeout){
$scope.myHeader = "hello world";
$timeout(function(){
$scope.myHeader = "world hello";
},3000)
})
</script>
</body>
</html>
输出的结果：
hello world 三秒钟之后变成 world hello
$interval服务对应window.setInterval函数。在指定的周期来调用函数。
举例
<!DOCTYPE html>
<html>
<head>
<title>$interval</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>time:{{myTime}}</p>
</div>
<script >
angular.module('myApp',[]).controller('myCtrl',function($scope,$interval){
$scope.myTime = new Date().toLocaleTimeString();
$interval(function(){
$scope.myTime = new Date().toLocaleTimeString();
},2000);
})
</script>
</body>
</html>
在浏览器上运行之后的效果是
time:下午4：21：08 两秒钟之后再显示的时间是4：21：10 以两秒钟为周期不停的调用$interval中的函数。
自定义service
举例：
<!DOCTYPE html>
<html>
<head>
<title>自定义service</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>255转换成16进制的值：{{hex}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.service('qwer',function(){
this.myFunction = function(x){
return x.toString(16);
}
});
app.controller('myCtrl',function($scope,qwer){
$scope.hex = qwer.myFunction(255);
});
</script>
</body>
</html>
浏览器运行之后的结果为：
255转换成16进制的值：ff
<!DOCTYPE html>
<html>
<head>
<title>过滤器中使用service</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<p>{{255 | myFormat}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.service('qwer',function(){
this.myFunction = function(x){
return x.toString(16);
}
});
app.filter('myFormat',['qwer',function(qwer){
return function(x){
return qwer.myFunction(x);
}
}]);
</script>
</body>
</html>
浏览器运行之后的结果为：ff
service过滤数组
举例
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>对数组进行过滤</p>
<ul>
<li ng-repeat=" x in counts">{{x | myFormat}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.service('qwer',function(){
this.myFunction = function(x){
return x.toString(16);
}
});
app.filter('myFormat',['qwer',function(qwer){
return function(x){
return qwer.myFunction(x);
}
}]);
app.controller('myCtrl',function($scope){
$scope.counts = [255,251,456];
})
</script>
</body>
</html>
输出的结果为
对数组进行过滤
ff
fb
1c8
以上就是angularjs服务的总结！让我们再来回顾一下，首先是讲解的是$location.absUrl获取网页的连接，其次就是￥http获取服务器的数据。然后将response中的data赋给html元素。然后是$timeout，该服务定义在一定时间之后app执行某个函数一次。再就是$interval，该服务是让app以多久为周期不停的执行某个函数。最后讲了自定义服务的使用。以及如何在过滤其中如何使用自定义service.
举例：
<!DOCTYPE html>
<html>
<head>
<title>$location</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>当前页面的url：</p>
{{myUrl}}
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$location){
$scope.myUrl = $location.absUrl();
});
</script>
</body>
</html>
浏览器运行之后的效果：
当前页面的url：
file:///E:/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E4%BD%93%E7%B3%BB/bootstrap/angularStudy/demo15.html
$http是angularjs中使用最多的服务。angularjs中的服务用于向服务器发送请求，应用响应服务器传送过来的数据。
举例
<!DOCTYPE html>
<html>
<head>
<title>$http</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{myWelcome}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$http){
$http.get("demo01.html").then(function(response){
$scope.myWelcome = response.data;
});
});
</script>
</body>
</html>
浏览器上的结果：
<!DOCTYPE html><html><head><title>angularJs</title><meta charset="utf-8" /><script src="angular/angular.min.js"></script></head><body>/*ng-app定义了一个应用。该应用是angular的所有者ng-model把元素的值绑定到应用。ng-bind把应用的数据绑定到HTML试图。ng-controller 定义该元素的控制器*/<div ng-app="myApp" ng-controller="myCtrl">name1:<input
type="text" ng-model="firstname"></input><br/>name2:<input type="text" ng-model="lastname"></input><br/>姓名：{{firstname + " "+lastname}}</div><script>//定义angular应用var app = angular.module('myApp',[]);//控制器用于控制angular应用app.controller('myCtrl',function($scope){$scope.firstname="qqq";$scope.lastname
= "www";});</script></body></html>
$timeout服务对应了window.setTimeout()函数
举例
<!DOCTYPE html>
<html>
78a2
<head>
<title>$timeout</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{myHeader}}</p>
</div>
<script>
angular.module('myApp',[]).controller('myCtrl',function($scope,$timeout){
$scope.myHeader = "hello world";
$timeout(function(){
$scope.myHeader = "world hello";
},3000)
})
</script>
</body>
</html>
输出的结果：
hello world 三秒钟之后变成 world hello
$interval服务对应window.setInterval函数。在指定的周期来调用函数。
举例
<!DOCTYPE html>
<html>
<head>
<title>$interval</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>time:{{myTime}}</p>
</div>
<script >
angular.module('myApp',[]).controller('myCtrl',function($scope,$interval){
$scope.myTime = new Date().toLocaleTimeString();
$interval(function(){
$scope.myTime = new Date().toLocaleTimeString();
},2000);
})
</script>
</body>
</html>
在浏览器上运行之后的效果是
time:下午4：21：08 两秒钟之后再显示的时间是4：21：10 以两秒钟为周期不停的调用$interval中的函数。
自定义service
举例：
<!DOCTYPE html>
<html>
<head>
<title>自定义service</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>255转换成16进制的值：{{hex}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.service('qwer',function(){
this.myFunction = function(x){
return x.toString(16);
}
});
app.controller('myCtrl',function($scope,qwer){
$scope.hex = qwer.myFunction(255);
});
</script>
</body>
</html>
浏览器运行之后的结果为：
255转换成16进制的值：ff
<!DOCTYPE html>
<html>
<head>
<title>过滤器中使用service</title>
<meta charset="utf-8" />
<script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<p>{{255 | myFormat}}</p>
</div>
<script>
var app = angular.module('myApp',[]);
app.service('qwer',function(){
this.myFunction = function(x){
return x.toString(16);
}
});
app.filter('myFormat',['qwer',function(qwer){
return function(x){
return qwer.myFunction(x);
}
}]);
</script>
</body>
</html>
浏览器运行之后的结果为：ff
service过滤数组
举例
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>对数组进行过滤</p>
<ul>
<li ng-repeat=" x in counts">{{x | myFormat}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp',[]);
app.service('qwer',function(){
this.myFunction = function(x){
return x.toString(16);
}
});
app.filter('myFormat',['qwer',function(qwer){
return function(x){
return qwer.myFunction(x);
}
}]);
app.controller('myCtrl',function($scope){
$scope.counts = [255,251,456];
})
</script>
</body>
</html>
输出的结果为
对数组进行过滤
ff
fb
1c8
以上就是angularjs服务的总结！让我们再来回顾一下，首先是讲解的是$location.absUrl获取网页的连接，其次就是￥http获取服务器的数据。然后将response中的data赋给html元素。然后是$timeout，该服务定义在一定时间之后app执行某个函数一次。再就是$interval，该服务是让app以多久为周期不停的执行某个函数。最后讲了自定义服务的使用。以及如何在过滤其中如何使用自定义service.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- “英雄之旅”见闻和小结----angular2系列（三)
- AngularJS之中级Route【二】（七）
- angularjs的mvvm
- Angular单页面应用架构
- Angular入门-module和service
- AngularJS 世界------Angularjs的模型（ng-model）
- Angularjs 2.0 学习备忘
- 关于AngularJS的一些基础总结
- AngularJS之Route（六）
- angularJSONP简洁版
- angularjs上传文件+jfinal接收上传文件
- Angular1.0
- angularjs JSONP服务
- AngularJS input number 保留两位小数
- [Angular 2] Keynote: Lazy Routing -- NGCONF
- AngularJs(七) 模块的创建
- AngularJs入门实例
- angularjs 使用ng-repeat报错
- [AngularJS] Default Child state and nav between child state
- AngularJs（四）控制器