Dynamic routing in Angular

Question

I have an Angular app which is supposed to display different pages depending on the resource in the following way:

Given url: localhost/foo/456
Call REST service (fooService) to get a descriptor for the foo.
Based on the descriptor use an appropriate template.

Here's the config part (a bit of a pseudocode):

.config(['$routeProvider', '$locationProvider', 'fooService', function ($routeProvider, $locationProvider, fooService) {
    $locationProvider.html5Mode();
    var fooTemplateUrlSelector = function (routeParams) {
            var foo = fooService.getFoo(routeParams.fooId);
            switch (foo.TemplateId) {
            case 1:
                return 'Foo1.html';
            case 2:
                return 'Foo2.html';
            default:
                return 'Unsupported.html';
            }
        };

    $routeProvider.when('/foo/:fooId', { templateUrl: fooTemplateUrlSelector, controller: 'FooController' })

The problem is that in the config phase I don't have access to any service ('Unknown provider: fooService'). It seems to be an Angular constraint that in the config part you're allowed to only access 'static' things. I get it.

What's the best (in terms of best practices) solution to this problem?

The templates might differ a lot, so I don't want to have one html file with a lot of "if TemplateId == 1, then display_some_markup else if TemplateId == 2 then display_something_else".

you could make provider instead of making service which would be easily available in config phase — Pankaj Parkar
– Pankaj Parkar, Commented May 27, 2015 at 17:37
How is my provider supposed to have $http injected in order to make a REST call? Can you give me a link to an example? — dzendras
– dzendras, Commented May 27, 2015 at 23:55

Mariusz · Accepted Answer · 2015-05-27 18:24:12Z

1

This is must be in app.config() ? I preffer this way:

html:

 <div ng-controller="Ctrl" ng-init="init()">
    <div ng-if="foo.templateID == 1">
      // ng-include="foo1.html"
    </div>
    <div ng-if="foo.templateID == 1">
      // ng-include="foo2.html"
    </div>
</div>

controller:

function Ctrl($scope, fooService) {
    $scope.init = function() {
        $scope.foo = fooService.getFoo(routeParams.fooId);
    };
    // other functions and features
};

edited May 27, 2015 at 18:24

answered May 27, 2015 at 18:19

Mariusz

363 bronze badges

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

Collectives™ on Stack Overflow

Dynamic routing in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related