Angular 1.5 Component Routing from Server Side

Question

I am looking to upgrade angular version to 1.5 and trying to figure out how I can do routing in Angular 1.5 Component Routing. Currently, we are doing as following using old angular router:

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" });

}]);

The $.ajax call goes to server and gets the full path of the html file based on the MenuID from the url. Eventually content from this html file gets placed in ng-view.

All the examples of angular 1.5 component routing I have seen have hard coded path information as shown below:

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

My question is how do I replace the hard coded values with values coming from server just like I am doing with old angular router?

Answer 1

I had the same requirements. I had to set menus based on rights. My application is divided as a component tree. So, on login page, I set route registry as below:

  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>';
    }
}

When user clicks on login button, I will get roles of users if authentication is passed. With successful authentication, server will pass JSON which will have list of permissions. Using that object to create routes. Calling below method in Login page

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

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

routeService is the service which will actually generate routes

Now define interface based on parameter which are using for routing(eg:path, name, component, useAsDefault)

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

In controller of service:

  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;
    }