异步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; 


     }]);