加載視圖配置

Question

我願做這樣的事情：

app.config(function($routeProvider){ 
$routeProvider.when('products/list', { 
    controller: 'ProductListCtrl', 
    templateUrl : 'products/list/view.html', 
    resolve : { data : function(){ 
     ... 
    }, 
    loadingTemplateUrl : 'general/loader.html' 
} 
}); 

我想有加載頁面中不同的看法。

這將使每個頁面的視圖和控制器中的代碼更清潔，（沒有< ... ng-include ng-show =「loading」...>）。這也意味着我不需要$ scope。$觀察數據的變化。有沒有一個乾淨的解決方案來做類似的事情（不一定在.config方法中）或一個替代庫來做到這一點？

Answer 1

假設你想在數據解析時顯示所有狀態轉換的一般模板，我的建議是聽由路由庫觸發的事件。這允許使用一箇中心點來處理所有狀態轉換而不是污染路由配置（我認爲這不會那麼容易）。

請參閱文檔爲$routeChangeStart，$routeChangeSuccess當然$routeChangeError在the angular router docs

Answer 2

也許有人可能有興趣在我所做的：我創建了一個新的服務和新的觀點指令。這可能看起來像很多工作，但這樣做比我預期的要容易得多。新服務使我能夠將主視圖與加載視圖分開，以便在應用程序的所有頁面中重用。我還提供了配置錯誤模板url和錯誤控制器的可能性，用於加載失敗時。

Angular $ injector，$ templateRequest和$ controller服務完成大部分工作。我只需將依賴於這些服務的指令連接到正確的事件（$ locationChangeSuccess）和promise，並從resolve對象的函數中檢索（使用$ q.all）。這個連接在路由服務中完成。該服務選擇正確的模板url和comtroller，並將其傳遞給指令進行處理。

縮短的版本（與getCurrentConfig方法離開了）：

RouteService：

(function() { 
    'use strict'; 

// provider: 

    angular.module('pikcachu') 
     .provider('pikaRouteService', [function() { 

     var routeConfigArray; 
     var otherwiseRouteConfig; 
     //configuration methods 
     this.when = function (url, routeConfig){ 
      routeConfigArray.push({url: url, routeConfig: routeConfig}); 
      return this; 
     } 
     this.otherwise = function(routeConfig){ 
      otherwiseRouteConfig = routeConfig; 
      return this; 
     } 
     // service factory: 
     this.$get = ['$rootScope', '$location', '$q', '$injector', '$templateRequest', 
      function ($rootScope, $location, $q, $injector, $templateRequest) { 
       function RouteService() { 
        this.setViewDirectiveUpdateFn = function(){ /*...*/ } 

        function init(){ 
         $rootScope.$on('$locationChangeSuccess', onLocationChangeSuccess); 
        } 

        function onLocationChangeSuccess(){ 
         // get the configuration based on the current url 
         // getCurrentConfig is a long function, because it involves parsing the templateUrl string parameters, so it's left out for brevity 
         var currentConfig = getCurrentConfig($location.url()); 
         if(currentConfig.resolve !== undefined){ 
          // update view directive to display loading view 
         viewDirectiveUpdateFn(currentConfig.loadingTemplateUrl, currentConfig.loadingController); 
          // resolve 
          var promises = []; 
          var resolveKeys = []; 
          for(var resolveKey in currentConfig.resolve){ 
           resolveKeys.push(resolveKey); 
           promises.push($injector.invoke(resolve[resolveKey])); 
          } 
          $q.all(promises).then(resolveSuccess, resolveError); 
          function resolveSucces(resolutionArray){ 
           // put resolve results in an object 
           var resolutionObject = {}; 
           for(var i = 0; i< promises.length;++i){ 
            resolved[resolveKeys[i]] = resolutionArray[i]; 
           } 
           viewDirectiveUpdateFn(currentConfig.errorTemplateUrl, currentConfig.errorController); 
          } 
          function resolveError(){ 
           viewDirectiveUpdateFn(currentConfig.errorTemplateUrl, currentConfig.errorController); 
          } 
         } 
        } 

        init(); 
       } 
       return new RouteService(); 
      }] 
    })(); 

查看指令

(function() { 
    'use strict'; 
    angular.module('pikachu') 
     .directive('pikaView', ['$templateRequest', '$compile', '$controller', 'pikaRouteService', function ($templateRequest, $compile, $controller, pikaRouteService) { 

      return function (scope, jQdirective, attrs) { 
       var viewScope; 

       function init() { 
        pikaRouteService.listen(updateView); 
       } 

       function updateView(templateUrl, controllerName, resolved) { 
        if(viewScope!== undefined){ 
         viewScope.$destroy(); 
        } 
        viewScope = scope.$new(); 
        viewScope.resolved = resolved; 
        var controller = $controller(controllerName, { $scope: viewScope }); 
        $templateRequest(templateUrl).then(onTemplateLoaded); 
        function onTemplateLoaded(template, newScope) { 
         jQdirective.empty(); 
         var compiledTemplate = $compile(template)(newScope); 
         jQdirective.append(compiledTemplate); 
        } 
       } 

       init(); 
      }; 
     } 
    ]); 
})();