Angular（服务、存储机制）

Angular（服务、存储机制）

服务

• 1.provider

  • 最大的服务，可以配置
  • 特点
    
    • （1）moren provider 会被自动实例化
    • （2）在控制器中使用会调用$get
    • （3）后续操作写在$get之后
      

      <div ng-controller="twoCtrl"></div>
      <script>
      var app=angular.module('appModule',[]);
       app.config(function (CalcProvider) {//CalcProvider 是Calc声明的函数的实例   就是下边的this
          CalcProvider.currency='RMB';   //会等provider创建好实例后才能配置
      
      });
       //localStorage
      app.provider('Calc',function () {
          this.currency='$';
          this.$get=function () { //构造函数    this在哪个函数中就是哪个函数的实例
              return {//返回一个对象，用来公用的对象
                  '+':(a, b) =>{
                      return this.currency+(a+b)
                  }
              }
          }
      });
       app.controller('oneCtrl',function ($scope,Calc) {
          console.log(Calc['+'](1,2))
      });

• 2.factory
  
  • 不支持配置（配置在factory之前就完成了）
  • 基于provider的
  • 参数2处的函数是provider中$get所对应的
  • return之后

<div ng-controller="oneCtrl"></div>
 app.factory('Calc',function () {//后面的函数是provider中$get方法对应的
      this.currency='RMB';
        return {
            '+':(a, b) =>{
                return this.currency+(a+b)
            }
        }
    });
    app.controller('oneCtrl',function ($scope,Calc) {
        console.log(Calc['+'](1,2))
    });

• 3.service
  
  • factory返回的对象，是service函数实例化后的结构
  • 没有return，之间书写要执行的操作

<div ng-controller="oneCtrl"></div>
<script>
    var app=angular.module('appModule',[]);
    app.service('Calc',function () {
      this['+']=(a,b)=>a+b;
        //factory返回的对象，是service函数实例化后的结构
       /* return {
            '+':(a, b) =>{
                return this.currency+(a+b)
            }
        }*/
    });//后面的函数就是$get函数
    app.controller('oneCtrl',function ($scope,Calc) {
        console.log(Calc['+'](1,2))
    });
    </script>

• 4.value/content
  
  • 调用的是factory
  • 参数2的位置，直接书写要进行的操作

value:
<div ng-controller="oneCtrl"></div>
<script>
    var app=angular.module('appModule',[]);
     app.value('Calc', {
    '+':(a,b)=>a+b,
    '-':(a,b)=>a-b

    });
    app.controller('oneCtrl',function ($scope,Calc) {
        console.log(Calc['+'](1,2))
    });
</script>
contnet:
<div ng-controller="oneCtrl"></div>
<script>
    var app=angular.module('appModule',[]);
      app.constant('Calc', {
        '+':(a,b)=>a+b,
        '-':(a,b)=>a-b
    });
    app.controller('oneCtrl',function ($scope,Calc) {
        console.log(Calc['+'](1,2))
    });
</script>

存储机制

• 本地存储（Storage）

  <script>
  var app = angular.module('appModule', []);
  app.provider('Storage', function () {
      this.$get = function () {
          return {
              setStorage: function (key, value) {
                  if (typeof value == 'object') {
                      value = JSON.stringify(value)
                  }
                  localStorage.setItem(key, value)
              },
              getStorage: function (key) {
          var str=localStorage.getItem(key);
                  if(str.startsWith('{')||str.startsWith('[')){
                      str=JSON.parse(str);
                  }
                  return str
              }
          }
  
      }
  });
  app.controller('oneCtrl', function ($scope,Storage) {
      Storage.setStorage('name', {name: 'www'});
  });
  app.controller('twoCtrl', function ($scope,Storage) {
  console.log(Storage.getStorage('name').name)
  })
  </script>

• 事件交互

  • $on监听
    
    • 监听当前发生的事
    • 平级的监听放在根作用域上
    • 与发送的内容一致
    • 参数1：当前事件源
    • 参数2：被操作数据

  $scope.$on('买了雪碧',function (e,data) {
          $scope.total=data;
          console.log(data);
      });

  • $watch监视
    
    • watch+apply可以实现双向数据绑定
    • 实时监控数据
    • 参数1：被监控的对象（可以是作用域上的属性名，也可以是函数）–》发生变化的元素
    • 参数2：监控到对象变化后执行的操作

    $scope.$watch('count',function () {
          $scope.$emit('买了雪碧',$scope.count*$scope.price);//数量变化向上发射
      });

  • $emit向上发射并包括自己
    
    • 发射的内容和被监听的内容一致

   $scope.$watch('count',function () {
          $scope.$emit('买了雪碧',$scope.count*$scope.price);//数量变化向上发射
      });

  • $broadcast 向下发射包括自己

    • 一般用于有包含关系元素之间的交互
    • 代表级别大的（父级）向级别小的（子级）发送
    • 参数1 是监控对象的名字
    • 参数2 是监控对象的真实内容变化对象本体）

    $scope.$watch('total',function () {
        $scope.$broadcast('总共',$scope.total)
    })

  • 以上均针对上下级交互，平级之间的事件交互，采用方式一致，唯一区别在于，平级交互不需要使用broadcast进行事件发射，只采用$emit即可
  • 存在监听可能是发布订阅模式

• $interval\$timeout

  • 不是angular中的视图改变数据不会刷新
  • angular中的服务都可以自动调用$apply

  {{date | date:'hh:mm:ss'}}
  <script>
   var app=angular.module('appModule',[]);
    app.controller('myCtrl',function ($scope,$interval,$timeout) {//$interval单次    $timeout多次
       //不是angular中的方法中改变数据不会刷新视图
      var timer=$interval(function () {//angular中提供的服务都可以自动调用$apply，不需要手动调用
           $scope.date=Date.now();
           $interval.cancel(timer);//取消定时器
       });
   },1000);
   </script>

  • $Apply

    • 强制刷新视图

    <input type="text" zf-model="aa">{{aa}}
     var app=angular.module('appModule',[]);
    app.run(function ($rootScope) {
    $rootScope.aa='zfpx'
    });
    app.directive('zfModel',function () {
    return {
        restrict:'A',
        link:function (scope,element,attrs) {
      element.on('input',function () {//监听输入框中的输入事件
    //              scope.age=element.val();
          scope[attrs.zfModel]=element.val();
          scope.$apply();//强制让视图刷新
      });
            scope.$watch(attrs.zfModel,function (newVal) {
                element.val(newVal);
            })
        }
    }
    })