javascript - AngularJS 在初始化仪表板 Controller 之前使用 $htttp 获取仪表板设置

Question

所以我仍在 Angular 速成类中。我正在开发一个相当复杂的仪表板框架，全部用 Angular 编写。在加载 Controller 之前，我需要首先使用 $HTTP 从服务器获取一堆仪表板设置。然后，这些设置用于控制仪表板的布局。 所以我读到的 Angular 构建方式是首先运行配置方法，然后运行方法，然后是 Controller 。 我无法在配置方法中使用 $HTTP，因此我在 main.js 中构建了它:

    MetronicApp.run(['$rootScope','$http', function($rootScope,$http) {

  var CUID = Cookies("CUID");
  console.log('portlet settings for '+ CUID);
   $http.get('/myurl/V3_portlet_settings?p_user_id='+CUID)
        .then(function(response) {
            console.log(response.data);
            console.log('portlet status: ' + response.status);
            $rootScope.$broadcast("dashSettings",response.data);
        });

}]);

当我运行时，这一切都很顺利，我在控制台中看到了数据。

然后在我的 Controller 中:

$scope.$on( "dashSettings", 
function(event,data){
    $scope.dData = data;
     console.log('dash data service identified in dash controller');
     console.log($scope.dData.count);
    } );

几个问题:

1. 这是在初始化仪表板之前获取设置的最佳方式吗？我的计划是将构建破折号的调用嵌入到我的 $scope.$on block 中。我开始研究如何在 Controller 初始化之前同步运行 run 方法，但也许我不需要。

2. 有任何明显的想法为什么 $scope.$on 方法似乎没有触发吗？

提前致谢

Answer 1

另一种方法是将您的 $http 函数放置在服务或工厂中，然后在 Controller 中解析它们。 这里的关键是promise的使用。 Angular 文档将其描述为

A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are done processing

首先创建一个服务:

app.factory('DataService', function($http) {
  var getValues= function() {
    var url = '/myurl/V3_portlet_settings?p_user_id='+ CUID;
    return $http.jsonp(url) // returns a promise
  };

  return {
    getValues: getValues
  }
});

然后在你的 Controller 中:

myApp.controller('MyController', function ($scope, DataService) {     
    DataService.getValues().then( // resolve the promise using .then()
    function(data){
      // successcallback
      // you can now safely populate the data in you controller
      console.log(data);
    },
    function(error){
      // errorcallback
      console.log(error);
    })   
});

我认为使用数据服务来处理$http请求等数据操作是更好的方法。
promise 的返回允许链接(多个) promise 并更好地处理异步调用。

您可能会发现John Papa's style guide很有用，尤其是有关“单独数据调用”(Y060) 和“从数据调用返回 Promise”(Y061) 的部分