数据共享

https://wappalyzer.com/ 可用来分析网站所用技术

页面数据传递共享的方式

1. 基于ui-router的页面跳转传参

   • 传递URL时候，同时传递参数。

     .state('producers', {
     url: '/producers',
     templateUrl: 'views/producers.html',
     controller: 'ProducersCtrl'
     })
     .state('producer', {
     url: '/producer/:producerId',
     templateUrl: 'views/producer.html',
     controller: 'ProducerCtrl'
     })
     

   • 例如点击事件，在A页面controller里面调用$state.go接口，定义页面跳转函数。

     .controller('ProducersCtrl', function ($scope, $state) {
     $scope.toProducer = function (producerId) {
        $state.go('producer', {producerId: producerId});
     };
     });
     

   • 在B页面，用$stateParams获取参数。

     .controller('ProducerCtrl', function ($scope, $state, $stateParams) {
     var producerId = $stateParams.producerId;
     });
     

2. 通过服务构造单例对象进行通信
   定义service把共享的数据注入到需要的controller中。
   factory()通过返回一个包含service方法和数据的对象来定义一个service。
   service()通过构造函数的方式创建service。
   provider()是创建service最底层的方式，用.config()方法配置创建service的方法。

    app.factory('dataService', function(){
    var service = {
        name:"Tom"
    };
    return service;
   });
   app.controller('ctr1', function($scope,dataService){
    $scope.name = dataService.name;
    $scope.setName = function () {
        // body...
        $scope.name = "Jack";
    };
   });
   app.controller('ctr2', function($scope,dataService){
    $scope.name = dataService.name;
    $scope.setName = function () {
        // body...
        $scope.name = "John";
    };
   });
   

3. 事件广播机制-尤其适合父控制器和子控制器通信
   发送消息： $scope.$emit(name, data) 或者 $scope.$broadcast(name, data);
   接收消息： $scope.on(name,function(event,data){ });
   区别： $emit 广播给父controller $broadcast 广播给子controller
   $on 有两个参数function(event,msg) 第一个参数是事件对象，第二个参数是接收到消息信息。
   https://github.com/xufei/blog/issues/18 提出了做一个订阅发布的公共模块-接收方在这里订阅消息，发布方在这里发布消息。