高效利用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 相关文章推荐
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
js中文逗号转英文实现
Feb 11 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
angular实现form验证实例代码
Jan 17 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
Vue实现简单的留言板
Oct 23 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日期处理函数 整型日期格式
2011/01/12 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
JQuery jsonp 使用示例代码
2009/08/12 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
js实现简单div拖拽功能实例
2015/05/12 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
利用css+原生js制作简单的钟表
2020/04/07 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
vue二级菜单导航点击选中事件的方法
2018/09/12 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
Python排序函数的使用方法详解
2020/12/11 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
怎样写留学自荐信
2013/11/11 职场文书
保护地球的标语
2014/06/17 职场文书
庆七一宣传标语
2014/10/08 职场文书
优秀教师单行材料
2014/12/16 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android