高效利用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 相关文章推荐
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
AngularJS创建自定义指令的方法详解
Nov 03 Javascript
JS常用算法实现代码
Nov 14 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
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实例化模型的四种方法概述
2014/08/22 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
php7 新增功能实例总结
2020/05/25 PHP
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
canvas实现钟表效果
2017/02/13 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
JS实现标签页切换效果
2017/05/04 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
js继承的这6种方式!(上)
2019/04/23 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
python处理csv数据的方法
2015/03/11 Python
Python运算符重载用法实例分析
2015/06/01 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python实现名片管理系统项目
2019/04/26 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
python request 模块详细介绍
2020/11/10 Python
天巡全球:Skyscanner Global
2017/06/20 全球购物
会话Bean的种类
2013/11/07 面试题
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
《鱼游到了纸上》教学反思
2014/02/20 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
新闻稿标题
2015/07/18 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python