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>

I wouldn't mind giving that a try! The session or local storage will be stored in the browser until the browser is closed? If yes what exactly do you recommend? By the way, I don't have a login page for this application and may not have. This is a client facing application. — Coder Absolute
– Coder Absolute, Commented Dec 3, 2015 at 12:59
the sessionStorage will remain until you close the tab or browser but the localStorage will stated after that, use what you need wisely :D — stalin
– stalin, Commented Dec 3, 2015 at 13:14
I have tried configuring '$localStorage' service from 'ngStorage' but it doesn't work as well. The value gets reset when the hyperlink is clicked. If you have time, can you please provide me an example? :) — Coder Absolute
– Coder Absolute, Commented Dec 3, 2015 at 14:52

stalin · Accepted Answer · 2015-12-03 18:20:58Z

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

answered Dec 3, 2015 at 18:20

stalin

3,5142 gold badges28 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Coder Absolute Over a year ago

Am grabbing the tenant from the landing page (dashboard based on an example) then stored in the local storage. This information is being retrieved on the respective controllers throughout the application. Thanks for the help! :)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related