高效利用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 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
JavaScript的一些小技巧分享
Jan 06 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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
Python与C/C++的相互调用案例
2021/03/04 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
游戏商店:Eneba
2020/04/25 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
2014年保卫工作总结
2014/12/05 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
详解php中流行的rpc框架
2021/05/29 PHP