高效利用Angular中内置服务$http、$location等


Posted in Javascript onMarch 22, 2016

AngularJS中为我们提供了众多的内置服务,通过这些内置服务可以轻松的实现一些常用功能。下面对Angular中常用的内置服务进行一下总结。
1.$location服务

$location服务用于返回当前页面的URL地址,示例代码如下:
var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope, $location) { 
 $scope.myUrl = $location.absUrl(); 
});

 这里为$scope对象定义了myUrl变量,然后利用$location服务读取到了URL地址并存储到myUrl中。
2..$http服务
$http 是 AngularJS 中最常用的服务,它经常用于服务器的数据传输。下面的例子中服务向服务器发送请求,应用响应服务器传送过来的数据。

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope, $http) { 
 $http.get("welcome.htm").then(function (response) { 
  $scope.myWelcome = response.data; 
 }); 
});

3.$timeout()服务和$interval()服务
这两个服务的功能对应的是javascript中的setTimeout()和setTimeInterval函数。一个简单的实时更新时间例子如下:

app.controller('myCtrl', function($scope, $interval) { 
 $scope.theTime = new Date().toLocaleTimeString(); 
 $interval(function () { 
  $scope.theTime = new Date().toLocaleTimeString(); 
 }, 1000); 
});

 除了Angular中提供的内置服务外,我们也可以自己定义服务,利用service即可,下面是一个定义服务的基本代码框架:

app.service('hexafy', function() { 
 this.myFunc = function (x) { 
  return x.toString(16); 
 } 
});

定义好服务后,我们可以像使用内置的Angular服务一样使用它:

app.controller('myCtrl', function($scope, hexafy) { 
 $scope.hex = hexafy.myFunc(255); 
});

以上就是针对Angular中常用的内置服务进行的汇总,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Mootools 1.2教程(21)——类(二)
Sep 15 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
BootStrap实用代码片段之一
Mar 22 #Javascript
Javascript中的几种继承方式对比分析
Mar 22 #Javascript
JS函数定义方式的区别介绍
Mar 22 #Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 #Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 #Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 #Javascript
JS中多种方式创建对象详解
Mar 22 #Javascript
You might like
php中Ctype函数用法详解
2014/12/09 PHP
firebug的一个有趣现象介绍
2011/11/30 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
浅析vue深复制
2018/01/29 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
python 全文检索引擎详解
2017/04/25 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
python标记语句块使用方法总结
2019/08/05 Python
python opencv实现证件照换底功能
2019/08/19 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
500字作文之难忘的同学
2019/12/20 职场文书