高效利用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 string 扩展库代码
Apr 09 Javascript
js中document.write的那点事
Dec 12 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
Vue实现一个无限加载列表功能
Nov 13 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
关于Vue中$refs的探索浅析
Nov 05 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
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
Jquery $.map使用方法实例详解
2020/09/01 jQuery
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python3 集合set入门基础
2020/02/10 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
实习生自我鉴定
2013/12/12 职场文书
职工运动会邀请函
2014/01/19 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
本科毕业生求职信
2014/06/15 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android