Dynamic template URL

Question

I am diving head first into Angular 1 for the first time with an existing app. One of the things about this app that I want to change is how there are separate services and other things for every entity in our application.

I've abstracted it out so that there's only one service for all entities, but now I am trying to load a template where the file name is equal to a particular state parameter.

Here's how the per-entity routing is done now:

namespace App.Employee {
    'use strict';

    angular
        .module('app.employee')
        .run(appRun);

    appRun.$inject = ['routerHelper'];
    function appRun(routerHelper: Common.Router.IRouterHelperService) {
        routerHelper.configureStates(getStates());
    }

    function getStates() {
        return [{
            name: 'employee',
            url: '/employee/{employeeId}',
            templateUrl: 'app/employee/employee.html',
            controller: 'employeeCtrl',
            controllerAs: 'vm',
            data: {
                title: 'Employee'
            }
        }];
    }
}

Here's what I want to change it to:

namespace App.Entity {
    'use strict';

    angular
        .module('app.entity')
        .run(appRun);

    appRun.$inject = ['routerHelper'];

    function appRun(routerHelper: Common.Router.IRouterHelperService) {
        routerHelper.configureStates(getStates());
    }

    function getStates() {
        return [{
            name: '||entityTypeName||',
            url: '/{entityTypeName}/{entityId}',
            templateUrl: 'app/entity/||entityTypeName||.html',
            controller: 'entityCtrl',
            controllerAs: 'vm',
            data: {
                title: '||entityTypeName||'
            }
        }];
    }
}

Notice how I introduced {entityTypeName} in the URL. This successfully points to the proper Web API service and pulls back the entity. However, I want to tokenize the ||entityTypeName|| placeholder to be what's matched for {entityTypeName}. That's the general idea, at least.

I know little of Angular at this point and am learning as I go along, so let me know if additional code is needed.

Possible duplicate of Angular.js directive dynamic templateURL — MoMo
– MoMo, Commented Dec 15, 2016 at 17:03

Aaron Pool · Accepted Answer · 2016-12-16 13:56:50Z

1

The templateUrl property can be given a function instead of a string, and it will be passed the current state parameters. Like so:

templateUrl: function(params) {
    return 'app/entity/' + params.entityTypeName + '.html';
}

The params argument is provided for you by the ui-router framework.

edited Dec 16, 2016 at 13:56

answered Dec 15, 2016 at 20:25

Aaron Pool

4892 silver badges6 bronze badges

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

2 Comments

oscilatingcretin Over a year ago

Nice, it works! I'd correct your code, though, to params.entityTypeName. At any rate, 10 points to you, sir

Aaron Pool Over a year ago

Mmm. Good catch. Done.

Brad Burns · Accepted Answer · 2016-12-15 20:37:36Z

I also do something similar using dynamic routing with views and view parameters like so:

        /**
        * url: "/view?a"
        * Will match to url of "/view?a=value"
        */
        .state('root.view', {
            url: '/view?a',
            views: {
                  'main-content@': { templateUrl: function(params) {console.log(params.a); return 'app/views/ + params.path + ".php"} }
            }
        })

Or for the following:

        /**
        * Dynamic Routing
        */
        .state('root.catpath', {
            url: '/{path:.*}',
            views: {
                'main-content@': { templateUrl: function(params) {console.log(params); return 'app/views/' + params.path + ".php"} }
            }
        });

Collectives™ on Stack Overflow

Dynamic template URL

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related