How to load language-specific templates in AngularJS?

Question

I have a route defined as

$routeProvider.when('/:culture/:gameKey/:gameId/closed', { templateUrl: '/templates/tradingclosed', controller: TradingClosedCtrl });

I would like angular to include the "culture" parameter when requesting the template somehow, so I can serve a translated template.

Is this possible?

score 1 · Answer 1 · edited May 23 '17 at 12:20

If I'm reading this correctly you'd like to somehow use the culture parameter from the url route to determine which location to retrieve your template.

There may be a better way but this post describes retrieving the $routeParams inside a centralized controller with ng-include to dynamically load a view.

Something similar to this:

angular.module('myApp', []).
    config(function ($routeProvider) {
        $routeProvider.when('/:culture/:gameKey/:gameId/closed', {
            templateUrl: '/templates/nav/urlRouter.html',
            controller: 'RouteController'
        });
    });

function RouteController($scope, $routeParams) {
        $scope.templateUrl = 'templates/tradingclosed/' + $routeParams.culture + '_template.html';
    }

With this as your urlRouter.html:

<div ng-include src="templateUrl"></div>

You can define the controller you want to load in your views using ng-controller and access the $routeParams for the additional route parameters:

<div ng-controller="TradingClosedCtrl">
</div>

Thank you :) a shame it's not possible without the include though (saving a resource load and possibly some performance). — Micael, Aug 24 '12 at 10:12
I've chosen to unaccept the answer, because it seems to cause interference with the scope when using the include functionality, so I'm still searching for a good way to do this. — Micael, Sep 04 '12 at 10:57

score 0 · Answer 2 · edited May 23 '17 at 12:27

I've posted similar question with working Plnkr example of solution like @Gloopy suggested.

The reason why you can't implement that without ng-include is that routing is done in 'configuration' block, where you can't inject any values (you can read about these blocks in Modules documentation, section Module Loading & Dependencies

If you want not to introduce new scope, you can replace ng-include with my stripped version of ng-include directive, that do absolutely same that ng-include does, but do not create new scope: source of rawInclude directive

Hope that solution will satisfy your use case.

How to load language-specific templates in AngularJS?

2 Answers2