動態模板URL

Question

我是第一次使用現有的應用程序首次潛入Angular 1。我想改變的這個應用程序的其中一點是，我們應用程序中的每個實體都有獨立的服務和其他事物。

我已經抽象出來，所以只有一個服務的所有實體，但現在我試圖加載一個模板，其中的文件名等於特定的狀態參數。

這裏是如何的每個實體路由現在已經完成：

namespace App.Employee { 
    'use strict'; 

    angular 
     .module('app.employee') 
     .run(appRun); 

    appRun.$inject = ['routerHelper']; 
    function appRun(routerHelper: Common.Router.IRouterHelperService) { 
     routerHelper.configureStates(getStates()); 
    } 

    function getStates() { 
     return [{ 
      name: 'employee', 
      url: '/employee/{employeeId}', 
      templateUrl: 'app/employee/employee.html', 
      controller: 'employeeCtrl', 
      controllerAs: 'vm', 
      data: { 
       title: 'Employee' 
      } 
     }]; 
    } 
} 

這裏就是我想將它更改爲：

namespace App.Entity { 
    'use strict'; 

    angular 
     .module('app.entity') 
     .run(appRun); 

    appRun.$inject = ['routerHelper']; 

    function appRun(routerHelper: Common.Router.IRouterHelperService) { 
     routerHelper.configureStates(getStates()); 
    } 

    function getStates() { 
     return [{ 
      name: '||entityTypeName||', 
      url: '/{entityTypeName}/{entityId}', 
      templateUrl: 'app/entity/||entityTypeName||.html', 
      controller: 'entityCtrl', 
      controllerAs: 'vm', 
      data: { 
       title: '||entityTypeName||' 
      } 
     }]; 
    } 
} 

注意我是如何在URL中介紹{entityTypeName}。這成功地指向適當的Web API服務並將實體拉回。但是，我想將||entityTypeName||佔位符標記爲與{entityTypeName}匹配的內容。至少這是總體思路。

在這一點上，我對Angular知之甚少，並且隨着我的進步而學習，所以讓我知道是否需要額外的代碼。

Answer 1

templateUrl屬性可以被賦予一個函數而不是一個字符串，並且會傳遞當前狀態參數。像這樣：

templateUrl: function(params) { 
    return 'app/entity/' + params.entityTypeName + '.html'; 
} 

params參數是由ui-router框架爲您提供的。

Answer 2

我使用動態路由的意見和視圖參數，像這樣也做同樣的事情：

 /** 
     * url: "/view?a" 
     * Will match to url of "/view?a=value" 
     */ 
     .state('root.view', { 
      url: '/view?a', 
      views: { 
        'main-content@': { templateUrl: function(params) {console.log(params.a); return 'app/views/ + params.path + ".php"} } 
      } 
     }) 

或者以下：

 /** 
     * Dynamic Routing 
     */ 
     .state('root.catpath', { 
      url: '/{path:.*}', 
      views: { 
       'main-content@': { templateUrl: function(params) {console.log(params); return 'app/views/' + params.path + ".php"} } 
      } 
     });