Angular.js之服务与自定义服务学习笔记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>serviceAndDefinitService</title>
</head>
<body>
<!--1:-->
<div ng-app="myModule" ng-controller="ctrl">
{{title}}<button ng-click="changeTitle()">change title</button>
<button id="btn">change by jQuery</button>
</div>
<!--2:-->
<div ng-app="module2" ng-controller="Ctrl2">
{{name}}
{{num}}
</div>
<!--4:-->
<div ng-app="module3" ng-controller="Ctrl3">
<div ng-bind="name"></div>
<div ng-bind-html="name"></div>
</div>
<!--5:-->
<div ng-app="module5">
<div ng-controller="Ctrl5"></div>
</div>
<!--6:-->
<table ng-app="module6" ng-controller="Ctrl6" border="1" width="400px" ng-cloak>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr ng-repeat="v in data">
<td>{{v.name}}</td>
<td>{{v.age}}</td>
</tr>
</table>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript">
/*Angular.js之服务与自定义服务(服务:可以在多个应用场景下复用的代码片段)
1:$scope.$apply()//在使用非$scope方法时需要调用angular.js的底层$apply()方法使$scope数据自动更新到view;
2:$timeout与$interval服务,$timeout.cancel()取消延时器服务
3:$window服务
4:$sce服务安全的处理html数据,$trustAsHtml,view中需要加ng-bind-html属性;
5:$cacheFactory缓存服务
6:$http服务获取后台数据/$http服务缓存操作/$http服务简写操作/$http服务后台接收post数据
7:使用factory自定义服务/多个控制器共享服务数据的处理
8:使用service创建自定义服务*/
/*1:$scope.$apply()*/
var m=angular.module('myModule',[]);
m.controller('ctrl',['$scope',function($scope){
$scope.title='puDong shop';
//使用绑定到$scope上的方法更改$scope上的数据会自动更新视图
$scope.changeTitle=function(){
$scope.title='www.pudong.net';
};
//通过jQuery更改$scope数据时需要调用$apply()方法才能更新视图
$('#btn').click(function(){
$scope.title='www.pudong.com';
$scope.$apply();
});
}])
/*2:$timeout与$interval服务*/
var module2=angular.module('module2',[]);
module2.controller('Ctrl2', ['$scope','$interval',function ($scope,$interval) {
$scope.name="puDong store";
$scope.num=1;
$interval(function(){
$scope.num++;
},1000);
}])
/*4:$sce服务安全的处理html数据,$trustAsHtml,ng-bind-html;*/
var module3=angular.module('module3',[]);
module3.controller('Ctrl3', ['$scope','$sce', function ($scope,$sce) {
$scope.name=$sce.trustAsHtml('<h1>This is URL of The puDong store !</h1>');
}])
/*5:$cacheFactory缓存服务*/
var module5=angular.module('module5',[]);
module5.controller('Ctrl5', ['$scope','$cacheFactory', function ($scope,$cacheFactory) {
//创建缓存容器,指定容器名称
var obj=$cacheFactory('module5Mall');
//写入缓存数据
obj.put('title','puDong Store');
obj.put('data',{'url':'http://www.pudong.com'});
console.log(obj.get('title'));//puDong Store
console.log(obj.get('data').url);//http://www.pudong.com
//删除数据
obj.remove('title');
obj.removeAll();
//销毁容器
obj.destroy();
}])
/*6:$http服务获取后台数据*/
var module6=angular.module('module6',[]);
module6.controller('Ctrl6', ['$scope','$http', function ($scope,$http) {
$http({
method:'get',
url:'http://localhost/ajax.php',
cache:true//$http服务缓存是使用$cacheFactory服务,只需要配置参数cache为true即可,当我们异步请求有个页面多次的时候,第一次的请求结果被缓存到页面中,后面的请求就不再发生,直接使用第一次的请求结果,
}).then(function(response){
$scope.data=response.data;
},function(err){console.log(err);})
//$http服务的简写:$http.get/post('',{}).then(function(){},function(){})第一个参数指定url,第二个参数指定其他配置选项
$http.get('http://localhost/ajax.php',{
cache:true
}).then(function(){},function(){})
}])
/*7:使用factory自定义服务/service自定义服务:service and factory的区别:factory时普通function,而service是一个构造器(constructor),Angular在调用service时会用new关键字,而调用factory时只是调用普通的function*/
var module6=angular.module('module6',[]);
//使用factory自定义服务
module6.factory('factoryService',['$http',function($http){
return {
get:function(){
return $http({url:'http://localhost/ajax.php'});
}
}
}])
//使用service自定义服务
module6.service('factoryService',['$http',function($http){
this.get=function(){
return $http({
method:'GET',
url:'http://localhost/ajax.php',
}).then(function(response){return response.data;},function(erro){return erro;})
}
}]);
module6.controller('Ctrl6', ['$scope','factoryService', function ($scope,factoryService) {
factoryService.get().then(function(response){
$scope.data=response.data;
})
}])
</script>
</body>
</html>
Angular.js之服务与自定义服务学习笔记的更多相关文章
- AngularJS内建服务以及自定义服务的用法
在AngularJS中, 服务是一个比较重要的部分,它是一个对象或者是函数,可以在你的AngularJS的应用中使用.接下来介绍几种比较常用的内建服务以及自定义服务的方法. [内建服务] (1)loc ...
- 《Node.js开发实战详解》学习笔记
<Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...
- Angular.js之自定义指令学习笔记
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 在Ubuntu上为Android系统内置Java应用程序测试Application Frameworks层的硬件服务(老罗学习笔记6)
一:Eclipse下 1.创建工程: ---- 2.创建后目录 3.添加java函数 4.在src下创建package,在package下创建file 5.res---layout下创建xml文件,命 ...
- 【Microsoft Azure学习之旅】消息服务Service Bus的学习笔记及Demo示例
今年项目组做的是Cloud产品,有幸接触到了云计算的知识,也了解并使用了当今流行的云计算平台Amazon AWS与Microsoft Azure.我们的产品最初只部署在AWS平台上,现在产品决定同时支 ...
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- 字节跳动内部微服务架构-Docker实战学习笔记分享 真香
前言 基于 Spring Cloud 的微服务设计和开发,已经越来越多地得到了更多企业的推广和应用,而 Spring Cloud 社区也在不断的迅速发展壮大之中,近几年时间,Spring Cloud ...
- 在Ubuntu上为Android系统的Application Frameworks层增加硬件访问服务(老罗学习笔记5)
在数字科技日新月异的今天,软件和硬件的完美结合,造就了智能移动设备的流行.今天大家对iOS和Android系统的趋之若鹜,一定程度上是由于这两个系统上有着丰富多彩的各种应用软件.因此,软件和硬件的关系 ...
- MVC2 扩展Models和自定义验证(学习笔记)
当我们利用Visual Studio生成实体类以后,难免会用到验证功能(例如,用户登录时验证用户名是否为空,并加以显示). Visual Studio实体类:实体类 如果直接去编辑Visual Stu ...
随机推荐
- 【MySQL】JDBC连接MySQL的一些问题以及解决办法
[MySQL]JDBC连接MySQL的一些问题以及解决办法 http://blog.csdn.net/baofeidyz/article/details/52017047
- Nginx基本配置、性能优化指南
大多数的Nginx安装指南告诉你如下基础知识——通过apt-get安装,修改这里或那里的几行配置,好了,你已经有了一个Web服务器了!而且,在大多数情况下,一个常规安装的nginx对你的网站来说已经能 ...
- Angular - - ngList、ngRepeat、ngModelOptions
ngList 在文本输入的分隔的字符串和字符串数组间做转换,可以是一个固定的字符串分隔符(默认逗号)或正则表达式. 格式:ng-list=”value” value:表达式 通过这个值分隔字符串. ...
- 清除delphi 控件DBgrid 的记录
http://blog.csdn.net/windhaunting/article/details/4751560 1.TTable(DBGrid1.DataSource.DataSet).Empty ...
- swift 画图 Charts的基本使用
下面的这些代码呢是在oc工程里里使用的 其实和在swift中使用没什么大的差别 属性都一样的 //创建饼状图 self.pieChartView = [[PieChartView alloc] ...
- C# 堆栈和堆 Heap & Stack
首先堆栈和堆(托管堆)都在进程的虚拟内存中.(在32位处理器上每个进程的虚拟内存为4GB) 堆栈stack 堆栈中存储值类型. 堆栈实际上是向下填充,即由高内存地址指向低内存地址填充. 堆栈的工作方式 ...
- Linux下使用javac编译
Linux下使用javac编译Hadoop程序 首先要配置好Hadoop, 给出两个教程 Hadoop安装教程单机/伪分布式配置Hadoop2.6.0/Ubuntu14.04 Hadoop集群安装配置 ...
- Android中微信抢红包助手的实现
参考(感谢作者):http://www.jianshu.com/p/cd1cd53909d7 http://blog.csdn.net/jiangwei0910410003/article/detai ...
- 微信前端面试题----js实现LazyMan
这是微信小程序的一道面试题,题目是这样的: 实现一个LazyMan,可以按照以下方式调用:LazyMan("Hank")输出:Hi! This is Hank! LazyMan(& ...
- Python 日志模块实例
python 打印对象的所有属性值: def prn_obj(obj): print '\n'.join(['%s:%s' % item for item in obj.__dict__.it ...