<!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之服务与自定义服务学习笔记的更多相关文章

  1. AngularJS内建服务以及自定义服务的用法

    在AngularJS中, 服务是一个比较重要的部分,它是一个对象或者是函数,可以在你的AngularJS的应用中使用.接下来介绍几种比较常用的内建服务以及自定义服务的方法. [内建服务] (1)loc ...

  2. 《Node.js开发实战详解》学习笔记

    <Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...

  3. Angular.js之自定义指令学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 在Ubuntu上为Android系统内置Java应用程序测试Application Frameworks层的硬件服务（老罗学习笔记6）

    一:Eclipse下 1.创建工程: ---- 2.创建后目录 3.添加java函数 4.在src下创建package,在package下创建file 5.res---layout下创建xml文件,命 ...

  5. 【Microsoft Azure学习之旅】消息服务Service Bus的学习笔记及Demo示例

    今年项目组做的是Cloud产品,有幸接触到了云计算的知识,也了解并使用了当今流行的云计算平台Amazon AWS与Microsoft Azure.我们的产品最初只部署在AWS平台上,现在产品决定同时支 ...

  6. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  7. 字节跳动内部微服务架构-Docker实战学习笔记分享 真香

    前言 基于 Spring Cloud 的微服务设计和开发,已经越来越多地得到了更多企业的推广和应用,而 Spring Cloud 社区也在不断的迅速发展壮大之中,近几年时间,Spring Cloud ...

  8. 在Ubuntu上为Android系统的Application Frameworks层增加硬件访问服务（老罗学习笔记5）

    在数字科技日新月异的今天,软件和硬件的完美结合,造就了智能移动设备的流行.今天大家对iOS和Android系统的趋之若鹜,一定程度上是由于这两个系统上有着丰富多彩的各种应用软件.因此,软件和硬件的关系 ...

  9. MVC2 扩展Models和自定义验证(学习笔记)

    当我们利用Visual Studio生成实体类以后,难免会用到验证功能(例如,用户登录时验证用户名是否为空,并加以显示). Visual Studio实体类:实体类 如果直接去编辑Visual Stu ...

随机推荐

  1. "SQLServer复制需要有实际的服务器名称才能连接到服务器,请指定实际的服务器名"转

     "SQLServer复制需要有实际的服务器名称才能连接到服务器,请指定实际的服务器名" 2014-06-12 12:01:10 最近在学习SQL SERVER的高级复制技术的时候 ...

  2. linux vi 操作

    1.撤消修改或删除操作: 按ESC键返回Command(命令)模式,然后按u键来撤消删除以前的删除或修改:如果您想撤消多个以前的修改或删除操作,请按多按几次u.这和Word的撤消操作没有太大的区别: ...

  3. php5.4下配置zend guard loader

    前些日子的时候,zend官网下还没有支持PHP5.4的zend guard loader,今天再上去看的时候居然发现了,看来是我好久不关注它的缘故了... zend guard loader 干什么的 ...

  4. Bootstrap3网上api文档地址

    http://v3.bootcss.com/css/#forms http://www.ziqiangxuetang.com/bootstrap/bootstrap-forms.html 另附加fa字 ...

  5. iostat中 %util高 应用延迟高

    经过长时间监控,发现iostat 中的%util居高不下,一直在98%上下,说明带宽占用率极高,遇到了瓶颈. 且读写速度很慢,经过排查,发现是HBA卡出现问题,更换后,用dd if命令测试,磁盘的读写 ...

  6. C++中定义使用受限的类

    1.只能在堆上使用的类 栈上对象通过自动调用析构函数释放空间,将该类的析构函数定义为private就可以阻止其被自动调用,从而阻止在栈上使用该类的对象,为了避免资源泄漏问题,在堆上使用该类的对象时我们 ...

  7. mac下sublime 配置使用markdown

    Sublime Text作为一个优秀的文本编辑器,拥有很多的扩展插件.我们可以利用这些插件为Sublime Text 增加扩展的功能.mac常用编辑器强烈推荐sublime,当前出到Sublime T ...

  8. RabbitMQ确认机制问题处理

    现象: 手动在后台创建两个消息反馈队列 代码中监听到消息队列后,对消息进行处理并确认,代码为: 运行代码后,消息未从队列扔出去. 原因及解决方案:后台手动创建队列后,在监听消息中又对队列进行声明创建, ...

  9. iOS之内存分析

    静态内存分析(Product->Analyze) 静态内存分析是不运行程序,直接对代码进行分析. 但是没有真正分配内存,根据代码的上下文的语法结构,来分析是否有内存泄露 缺点:不一定准确,但是如 ...

  10. iOS核心笔记—源代码管理工具-GIT

    源代码管理工具-GIT 一. git 概述 1. git 简介? 什么是git? > git是一款开源的分布式版本控制工具 > 在世界上所有的分布式版本控制工具中,git是最快.最简单.最 ...