異步http.get調用完成後加載html模板

Question

我在我的主app.js中有路由配置。

// app.js 
angular.module('myApp', ["ngRoute"]) 
.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/', { 
     templateUrl: '/templates/company-list.html', 
     controller: 'CompanyListCtrl as companyListCtrl' 
    }).when(...  

儘管在app.js中，我有一個指令將圖像渲染爲模板div的背景css元素。

/app.js 
// Directives 
angular.module('myApp') 
    .directive('backImg', function() { 
     return function (scope, element, attrs) { 
      var url = attrs.backImg; 
      element.css({ 
       'background-image': 'url(' + url + ')', 
       'background-size': 'cover' 
      }); 
     }; 
    }); 

CompanyListCtrl控制器依賴於調用服務器並返回數據的http服務。該數據包含上述指令的「網址」。

//controllers.js 
angular.module('myApp') 
     .controller('CompanyListCtrl', ['CompanyService', function (CompanyService) { 
      var self = this; 
      self.companies = []; 

      CompanyService.getCompanies().then(function (response) { 
       self.companies = response.data; 
      }); 
     }]); 

我的'company-list.html'模板的指令在異步數據返回前呈現。我想我需要在路由配置中使用'resolve'，但是當$ htt.get調用作爲外部服務實現時，依賴關係應該在那裏？

Answer 1

使用resolve選項：

決心 - {對象=} - 的 依賴性可選地圖應當注入到控制器。如果 這些依賴關係中的任何一個都是承諾，那麼路由器將等待它們全部解決，或者在控制器被實例化之前被拒絕。如果所有承諾都已成功解決，則已解決的承諾的 值將被注入，並觸發$ routeChangeSuccess 事件。如果任何承諾被拒絕，則觸發 $ routeChangeError事件。地圖對象是：

key - {string}：要注入到 控制器中的依賴項的名稱。工廠 - {字符串|函數}：如果字符串，那麼它是一個服務的別名 。否則，如果函數，那麼它被注入並且返回值被視爲依賴。如果結果是承諾，則在其值被注入到控制器之前，它被解析爲 。是 注意到ngRoute。$ routeParams仍將引用這些解析函數中的前一條路徑 。改爲使用$ route.current.params訪問 新的路由參數。

angular.module('myApp', ["ngRoute"]) 
.config(['$routeProvider', function ($routeProvider) { 
    $routeProvider.when('/', { 
     templateUrl: '/templates/company-list.html', 
     controller: 'CompanyListCtrl as companyListCtrl' 
     resolve: { 
      companies: ['CompanyService', '$route', function(CompanyService, $route) { 
       return CompanyService.getCompanies($route.current.params.companyId).then(function(response) { 
        return response.data; 
       } 
      }] 
     } 
    }).when(...  


angular.module('myApp') 
     .controller('CompanyListCtrl', ['companies', function (companies) { 
      var self = this; 
      self.companies = companies; 


     }]);