hot towel angular 1.2, playing with the menu

Question

               Hi all,

Environment : vs 2013 express for web, hot towel angular 1.2, Breeze.WebApi2, sql server 2012 express.

I would like to be able to add or remove items in the menu of my web app, would it be possible ?

I've seen the config.route.js where the menu is built and returned by getRoutes() :

function getRoutes() {

    var rts = [
        {
            url: '/',
            config: {
                templateUrl: 'app/dashboard/dashboard.html',
                title: 'dashboard',
                settings: {
                    nav: 2,
                    content: '<i class="fa fa-dashboard"></i> Dashboard'
                }
            }
        },
        {
            url: '/admin',
            config: {
                title: 'admin',
                templateUrl: 'app/admin/admin.html',
                settings: {
                    nav: 6,
                    content: "<i class='fa fa-dashboard'></i> GUIGUI's Homepage"
                }
            }
        }, {
            url: '/register',
            config: {
                title: 'register',
                templateUrl: 'app/register/register.html',
                settings: {
                    nav: 4,
                    content: '<i class="fa fa-lock"></i> Register'
                },
                visible: false
            }
        }, {
            url: '/login',
            config: {
                title: 'login',
                templateUrl: 'app/login/login.html',
                settings: {
                    nav: 5,
                    content: '<i class="fa fa-lock"></i> Login'
                }
            }
        }, {
            url: '/',
            config: {
                title: 'Client',
                templateUrl: 'app/client/client.html',
                settings: {
                    nav: 1,
                    content: '<i class="fa fa-dashboard"></i> client'
                }
            }
        }, {
            url: '/mission',
            config: {
                title: 'Mission',
                templateUrl: 'app/mission/mission.html',
                settings: {
                    nav: 7,
                    content: '<i class="fa fa-lock"></i> mission'
                }
            }
        }
        , {
            url: '/uploadFile',
            config: {
                title: 'uploadFile',
                templateUrl: 'app/uploadFile/uploadFile.html',
                settings: {
                    nav: 8,
                    content: '<i class="fa fa-lock"></i> uploadFile'
                }
            }
        }
    ];

    return rts;
}

(the app starts with Client).

I've created an Authentication service to know the current user (if there's one logged in).

My question is : where would it be the more judicious to update the menu ?

I think config.route.js is loaded once at the start.

My purpose is to add or remove items to the menu according the user is logged in or not, possible ?

Where to inject the authenticationService to update the menu ?

Answer 1

I found a solution, rather simple.

Instead of adding or removing items from the menu (routes, that is I think impossible), it's simpler to play on their visibility, you can add properties to the items of the menu (visible, index, ..., whatever you want), for instance you can do this (it is in config.route.js):

        var persistantRoutes = [
            {
                url: '/await',
                config: {
                    title: '',
                    templateUrl: 'app/await/await.html',
                    settings: {
                        nav: 1,
                        content: "",
                        index: 0,
                        visible: false
                    }
                }
            }, {
                url: '/reinit',
                config: {
                    title: '',
                    templateUrl: 'app/reinit/reinit.html',
                    settings: {
                        nav: 2,
                        content: "",
                        index: 0,
                        visible: false
                    }
                }
            }, {
    ...

routes = persistantRoutes;

In the viewmodel of the menu (in my case : sidebar.js), you can do this :

function activate() {
    authenticationService.checkAuthentication().then(getNavRoutes);
}

function getNavRoutes() {
    vm.navRoutes = routes.filter(function (r) {

        if (authenticationService.currentUser.isAuthenticated) {
            switch (r.config.title) {
                case "login":
                case "register":
                    r.config.settings.visible = false;
                    break;
                case "userHomePage":
                    r.url = "/";
                    r.config.settings.visible = true;
                    r.config.settings.nav = 3;
                    break;
                case "FGHomePage":
                    r.url = "/FGHomePage";
                    r.config.settings.nav = 4;
                    break;
            }
        }
        else {
            switch (r.config.title) {
                case "login":
                case "register":
                    r.config.settings.visible = true;
                    break;
                case "userHomePage":
                    r.url = "/userHomePage";
                    r.config.settings.visible = false;
                    r.config.settings.nav = 4;
                    break;
                case "FGHomePage":
                    r.url = "/";
                    r.config.settings.nav = 3;
                    break;
            }
        }

        if (r.config.settings.visible == true) {
            return r.config.settings && r.config.settings.nav;
        }
    }).sort(function (r1, r2) {
        return r1.config.settings.nav - r2.config.settings.nav;
    });
}

I have done a service : authenticationService, that allows you to know if the current user is authenticated, knowing this you can render or not the items of the menu.

That is I think rather simple.

Regards.

Answer 2

{
        url: '/login',
        config: {
            title: 'login',
            templateUrl: 'app/login/login.html',
            settings: {
            }
        }
    }

If you remove nav (you can remove also content) from settings your problem is fixed.