Configure Routing for the Angular (ui.router) with a Parameter

Question

Setting up routing for the multi-tenant frontend application using AngularJs and UI-Router.

For an example when a user type the following URL the dashboard should be loaded for userxyz and the parameter must be maintained in the user's browser through session, so that the user should be able to browse other hyperlinks within application.

http://servername.com/#/dashboard/userxyz

Am struggling to achieve this, I have watched some tutorials but unable to understand.

Here is the code for my route configuration.

(function () {
    'use strict';

    app.config(["$stateProvider", "$urlRouterProvider",
        function ($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state("dashboard", {
                    url: "/dashboard/{tenantid}",
                    templateUrl: "app/components/dashboard/dashboardView.html",
                    controller: "DashboardController"
                })

                .state("people", {
                    url: "/people/{tenantid}",
                    templateUrl: "app/components/people/peopleView.html",
                    controller: "PeopleController"
                })

                .state("contact", {
                    url: "/contact/{tenantid}",
                    templateUrl: "app/components/contact/contactView.html",
                    controller: "ContactController"
                })

                $urlRouterProvider.otherwise("/dashboard/{tenantid}");
        }]);
})();

In my index.html, I have the following code to display the state in ui-view:

<div class="row" ui-view>

</div>

And, I did manage to setup the hyperlinks using ui-sref, here how it is:

<a ui-sref="dashboard">Home</a>
<a ui-sref="people">People</a>
<a ui-sref="contact">Contact</a>

Answer 1

Better user local o session storage for save the tenant

According with the comments before:

If you don't need support for ie7 (hope so), try to use the native browser localStorage, for insert an item localStorage.setItem('key', 'value') for retrieve localStorage.getItem('key')

see the localStorage browser support here Local Storage Browser Support