角度1.5サーバー側からのコンポーネントのルーティング

Question

角度バージョンを1.5にアップグレードし、Angular 1.5 Component Routingでのルーティング方法を理解しようとしています。現在、古い角度ルータを使用して次のようにしています。

myApp.config(['$routeProvider', function ($routeProvider) { 
$routeProvider 
    .when("/PP", { 
     templateUrl: function (route) { 
      var path; 
      var menuID = route.MenuID ; 

      $.ajax({ 
       type: "POST", 
       async: false, 
       url: "./api/MyControllerName/MyControllerMethodName", 
       contentType: "application/json", 
       data: angular.toJson({ 
        Action: 'NavigationManager.GetHtmlFilePath', 
        Data: { MenuID: menuID } 
       }) 
      }).then(function (data) { 
       if (data.Success == true) { 
        var rte = $.parseJSON(data.Data); 
        path = rte.Route; 
       } 
      }) 
      return path; 
     }, 
     reloadOnSearch: false 
    }) 
    .otherwise({ redirectTo: "/Home" }); 

]]）;

$ .ajaxコールはサーバーに送られ、urlのMenuIDに基づいてhtmlファイルのフルパスを取得します。最終的に、このhtmlファイルからのコンテンツはng-viewに置かれます。以下に示すように、私が見ている角度1.5コンポーネントルーティングのすべての例は、ハードパス情報をコード化している

：

angular.module('heroes', []) 
.component('heroes', { 
    template: '<ng-outlet></ng-outlet>', 
    $routeConfig: [ 
     { path: '/', name: 'HeroList', component: 'heroList', useAsDefault: true }, 
     { path: '/:id', name: 'HeroDetail', component: 'heroDetail' } 
    ] 
}) 

私の質問は、私は値を持つ、ハードコーディングされた値は、ちょうど私のように、サーバから来置き換える行う方法です古い角度のルータでやっている？

Answer 1

私は同じ要件を持っていました。私は権利に基づいてメニューを設定しなければならなかった。私のアプリケーションはコンポーネントツリーとして分割されています。だから、ログインページに、私は以下のようにルートレジストリを設定します。

class appOptions implements ng.IComponentOptions { 

    public controller: any; 
    public template: string; 
    public $routeConfig: any; 
    constructor() { 

     this.$routeConfig = [ 
      { path: '/', name: 'Login', component: 'login', useAsDefault: true }, 
      { path: '/workspace/...', name: 'Workspace', component: 'workspace' } 
     ]; 
     this.controller = appCtrl; 
     this.template = '<ng-outlet></ng-outlet>'; 
    } 
} 

ユーザーがログインボタンをクリックすると、認証が渡された場合、私は、ユーザーの役割を取得します。認証に成功すると、サーバーはJSONを渡します。これにはアクセス許可のリストが含まれます。そのオブジェクトを使用して経路を作成する。

：

setRoute() {    
     this.myRoutes= this.routeService.getRoutes(); 

     this.myRoutes.forEach((route) => { 
      this.$router.registry.config('workspace', route.route); 
     }); 
     this.$router.navigate(['Workspace']); 
    } 

ログインページ方法を下回る呼び出しrouteServiceが実際にルートが

次に（パス名、コンポーネント、useAsDefaultなど）ルーティングするために使用されるパラメータに基づいてインタフェースを定義生成するサービスでありますサービスの制御装置において

export interface IMyRoutes { 
    path: string; 
    name: string; 
    component: string; 
    useAsDefault: boolean 
    } 

：

public workspaceRoutes: app.IMyRoutes [] = [] 

getRoutes() { 
     this.accessProfile = this.userService.GetProfile();//This will get list of permission along with other details from server 
     if (this.accessProfile != null && this.accessProfile.Permissions.length > 0) { 
      this.accessProfile.Permissions.forEach((permission) => { 
       switch (permission) { 
        case "CanAccessMenu_1": 
         this.workspaceRoute = { 
          path: '/another_node_of_tree/...', name: 'Menu1', component: 'menu1', useAsDefault: (this.accessProfile.Role.toLowerCase() == "Role1") 
         } 
         this.workspaceRoutes.push(this.workspaceRoute); 
         break; 
        case "CanAccessMenu_2": 
         this.workspaceRoute = { 
          path: '/some_path/', name: 'Menu2', component: 'menu2', useAsDefault: (this.accessProfile.Role.toLowerCase() == "Role2") 
         } 
         this.workspaceRoutes.push(this.workspaceRoute); 
         break; 
        case "CanAccessMenu_3": 
         this.workspaceRoute = { 
          path: '/another_node_of_tree/...', name: 'Menu3', component: 'menu3', useAsDefault: (this.accessProfile.Role.toLowerCase() == "Role3") 
         } 
         this.workspaceRoutes.push(this.workspaceRoute); 
         break; 
       } 
      }); 
     } 
     return this.workspaceRoutes; 
    }