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](http://stackoverflow.com/questions/21835471/angular-js-directive-dynamic-templateurl/21835866) — MoMo, Dec 15 '16 at 17:03

Aaron Pool · Accepted Answer · 2016-12-16T13:56:50.683

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 '16 at 13:56

answered Dec 15 '16 at 20:25

Aaron Pool

479
2
6

Nice, it works! I'd correct your code, though, to `params.entityTypeName`. At any rate, 10 points to you, sir – oscilatingcretin Dec 16 '16 at 11:44
Mmm. Good catch. Done. – Aaron Pool Dec 16 '16 at 13:57

score 0 · Answer 2 · answered Dec 15 '16 at 20:37

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"} }
            }
        });

Dynamic template URL

2 Answers2