angularjs的服务怎么使用?angularjs服务具体使用介绍
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了angularjs的服务怎么使用?angularjs服务具体使用介绍,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3427字,纯文字阅读大概需要5分钟。
内容图文
本篇文章主要向大家介绍了关于angularjs的服务的详情,还有关于angularjs内置服务的用法介绍。里面带有angularjs的使用实例,接下来就让我们一起来看看这篇文章吧
服务的本质是一个单例对象,提供数据和对象。
两大类:
①内置服务
scope
window
timeout等等
使用内置服务中提供的方法:
第一步 将需要用到的服务注入进来 function(
location)
第二步 调用服务中提供的方法 数据。。
案例:通过内置的$interval做一个轮播图
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.js"></script></head><body><p ng-controller="myCtrl"> <img ng-src="img/{{imgList[index]}}" alt=""/> <h1>{{count}}</h1></p><script> var app = angular.module('myApp', ['ng']); app.controller('myCtrl', function ($scope,$interval) { $scope.count = 0; timer = $interval(function () { $scope.count++; if($scope.count > 20) { $interval.cancel(timer) } },500) $scope.index = 0; $scope.imgList = ['1.jpg','2.jpg','3.jpg'] $interval(function () { $scope.index++; if($scope.index > 2) { $scope.index = 0; } },1000) });</script></body></html>
②自定义的服务
服务的目的是为了封装业务逻辑,提高代码的复用率
自定义服务的方法:
app.factory (‘服务名称’,function(){//普通方法 return {}})
app.service(‘服务名称’,function(){//构造函数})
app.constant(‘服务名称’,{})//创建常量服务
app.value(‘服务名称’,{})//创建变量服务
通过app.factory (‘服务名称’,function(){//普通方法 return {}})创建服务
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.js"></script></head><body><p ng-controller="myCtrl"> <button ng-click="handleClick()">clickMe</button></p><script> var app = angular.module('myApp', ['ng']); //创建自定义服务 app.factory('$output', function () { return { print: function () { console.log('func in $output is called'); } } }) app.controller('myCtrl', function ($scope,$output) { $scope.handleClick = function () { //调用自定义服务所提供的方法 $output.print(); } });</script></body></html>
通过app.service(‘服务名称’,function(){//构造函数})创建服务
<script> var app = angular.module('myApp', ['ng']); //自定义服务 app.service('$student', function () { this.study = function () { console.log('we are learning...'); } this.name = "zhangSan"; }) app.controller('myCtrl', function ($scope, $student) { $student.study(); });</script></body></html>
**通过app.constant(‘服务名称’,{})//创建常量服务
app.value('服务名称',{})//创建变量服务**<script> var app = angular.module('myApp', ['ng']); //创建常量服务 app.constant('$Author',{name:'KKK',email:'**@163.com'}) //创建变量服务 app.value('$Config',{version:1}) app.controller('myCtrl', function ($scope,$Author,$Config) { console.log($Author.email); console.log($Config.version); }); </script>
注意事项:
自定义的服务 需要用到其它服务中方法
<body><p ng-controller="myCtrl"> <button ng-click="start()">开始</button> <button ng-click="stop()">结束</button></p><script> var app = angular.module('myApp', ['ng']); //通过service方法去创建自定义服务 app.service('$HeartBeat', function ($interval) { this.startBeat = function () { promise = $interval(function () { console.log('beat...'); },1000); } this.stopBeat = function () { $interval.cancel(promise); } }) app.controller('myCtrl', function ($scope,$HeartBeat) { $scope.start = function () { $HeartBeat.startBeat(); } $scope.stop = function () { $HeartBeat.stopBeat(); } });</script>
好了,本篇文章到这就结束了(想看更多就到PHP中文网AngularJS使用手册中学习),有问题的可以在下方留言提问。
以上就是angularjs的服务怎么使用?angularjs服务具体使用介绍的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的angularjs的服务怎么使用?angularjs服务具体使用介绍全部内容,希望文章能够帮你解决angularjs的服务怎么使用?angularjs服务具体使用介绍所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。