<!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. Oracle数据库用户权限和管理员权限

    一.如何查看权限 查看用户权限 1. oracle用户查看自己的权限和角色     select * from user_tab_privs;     select * from user_role_ ...

  2. Bomb(hdu 3555)

    题意:给定一个闭区间,求区间内有多少数中含"49" /* dp[i][j]表示i位数以j为最高位位中的所有不符合数的个数. 然后把数字拆分,乱搞即可. */ #include< ...

  3. java web几种开发模式(转)

    Java Web开发方案有多种可供选择,这里列举一些经典的开发模式进行横向比较,为Java Web的开发模式选择提供参考.除此之外还有好多方案(如Tapestry和Wicket)并不了解,这里就不列举 ...

  4. windows svn利用钩子实现代码同步到web目录

    思路:  找 到SVN Server中的仓库(Repositories)文件夹的位置,在相应的项目文件夹中找到hooks文件夹.在该文件夹中添加一个post- commit文件:当有commit动作发 ...

  5. CentOS6+MySQL5.6二进制安装

    一般我们安装mysql采用二进制安装的方式就足以满足我们的生产环境了,不过需要我们配置my.cnf文件 从官网下载二进制MySQL,选择Linux-Generic,最后这两个是二进制包 http:// ...

  6. C# 枚举的使用

    /// <summary>    /// 枚举的使用    /// 主要功能:使用枚举的值DataTypeId.Money,获取对应的Money字符串.    /// </summa ...

  7. easyUI tootip组件使用

    easyUI tootip组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. Spring aop:decare-parent 为类增加新的方法

    Spring aop:decare-parent 为类增加新的方法: 使用XML配置的方式: XML: <?xml version="1.0" encoding=" ...

  9. loadrunner controller:设置多个load generator

      下面讲一下如何使用多台电脑进行负载测试. 1)         打开load generator,如图所示默认已添加了我们本地的Generator: 2)         点击"Add. ...

  10. 【Scala】Scala之Control Structures

    一.前言 前面学习了Scala的Numbers,接着学习Scala的Control Structures(控制结构). 二.Control Structures Scala中的控制结构与Java中的颇 ...