高效利用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之函数直接量(function(){})()
Jun 29 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
Bootstrap基本样式学习笔记之表单(3)
Dec 07 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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
isset和empty的区别
2007/01/15 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php 多文件上传的实现实例
2016/10/23 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
理解JavaScript原型链
2016/10/25 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
python2与python3的print及字符串格式化小结
2018/11/30 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Python缓存技术实现过程详解
2019/09/25 Python
tensorflow 环境变量设置方式
2020/02/06 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
Hibernate持久层技术
2013/12/16 面试题
大学生学习生活的自我评价
2013/11/01 职场文书
大学运动会通讯稿
2014/01/28 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
财产分割协议书范本
2014/11/03 职场文书
图书馆义工感想
2015/08/07 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL