Dynamic variable in URL in AngularJS

Question

I have an Angular app which has several dynamic fields, each of these fields are changed updated based on config which comes from a backend database.

In order to control what config is used I need to dynamically switch a single variable - I've decided that the URL is the best way to set/switch the variable as there need to be multiple permutations of the site based on the URL so:-

/:dynamicVariable/

I'm looking for some guidance as to whether this is the best way to do it and what the best way to do it would be? I'm struggling as I don't want to have to set each route for each section like this /:dynamicVariable/homepage /:dynamicVariable/about-us etc etc. Ideally the core module checks it and sets it but the routing ignores it so /:dynamicVariable/ becomes the root.

Hope that makes sense, thanks in advance for your help.

Possible duplicate [http://stackoverflow.com/questions/11534710/angularjs-how-to-use-routeparams-in-generating-the-templateurl](http://stackoverflow.com/questions/11534710/angularjs-how-to-use-routeparams-in-generating-the-templateurl) — Chantal, Jun 01 '16 at 08:22
@steur36 although it is similar my issue isn't specifying templates based on dynamic URL variables - it's more to do with setting a base variable from the URL which is then used throughout the app, kind of like a multi-site. — Joe Keene, Jun 01 '16 at 08:32
Can you give an example of what you want the dynamicVariable to be? — Mathew Berg, Jun 01 '16 at 08:34
@MathewBerg Yes it will be the name of a client, they will have configured the output they'd like in the backend so `/jimscars/` and when you go to the site and `/jimscars/` you will get jims cars logo etc. — Joe Keene, Jun 01 '16 at 08:45

score 0 · Accepted Answer · answered Jun 07 '16 at 10:36

I ended up doing this by using ui.router and nesting states within an abstract parent state which held the client, like so :-

.state('rootClient', {
            abstract: true,
            url: '/:client',
            templateUrl: 'app/layout/layout.html',
            controller: 'Layout',
            controllerAs: 'layout',
            noClient: false,
            resolve: {
                client: function ($stateParams, ClientService) {
                    return ClientService.getClient($stateParams.client);
                }
            }
        })
.state('rootClient.home', {
            url: '/homepage',
            views: {
                'content': {
                    templateUrl: 'app/homepage/homepage.html',
                    controller: 'Homepage',
                    controllerAs: 'home'
                }

            }

        });

This way all the routes are under the parent route, I also added a resolve to make sure the client exists before moving to the route. Hopefully this will help someone else down the line.

Cheers

Dynamic variable in URL in AngularJS

1 Answers1