i'm investigating if i can have what the title says. Here's my thought.

Let's assume that i've got this routes:

  .when('/', {
        templateUrl : 'partials/homepage.html',
  })

  .when('/test', {
        templateUrl : 'partials/test.html',
  })

  .when('/page/:pageID', {
        templateUrl : 'partials/page.html',
  })

  .when('/page/single/:pageID', {
        templateUrl : 'partials/page-single.html',
  })

Until now i had the opportunity to add the templateUrl as also the controller details in the route and everything was working just fine.

Now the app is changed and there is only one controller with all the information needed and must remain one controller. And the routes will be something like that:

  .when('/:templateName/:pageID', {
       controller: 'myCtrl'
  })

Can i set from the controller the template id by getting the templateName parameter? And if so how about the last route example /page/single/:pageID? How can i know that there is a second option in route?

I can take the templateName parameter and see it changing with the $routeChangeSuccess method but i cannot find any way to set the template on the fly.

Any ideas?

i'm investigating if i can have what the title says. Here's my thought.

Let's assume that i've got this routes:

  .when('/', {
        templateUrl : 'partials/homepage.html',
  })

  .when('/test', {
        templateUrl : 'partials/test.html',
  })

  .when('/page/:pageID', {
        templateUrl : 'partials/page.html',
  })

  .when('/page/single/:pageID', {
        templateUrl : 'partials/page-single.html',
  })

Until now i had the opportunity to add the templateUrl as also the controller details in the route and everything was working just fine.

Now the app is changed and there is only one controller with all the information needed and must remain one controller. And the routes will be something like that:

  .when('/:templateName/:pageID', {
       controller: 'myCtrl'
  })

Can i set from the controller the template id by getting the templateName parameter? And if so how about the last route example /page/single/:pageID? How can i know that there is a second option in route?

I can take the templateName parameter and see it changing with the $routeChangeSuccess method but i cannot find any way to set the template on the fly.

Any ideas?

• javascript
• angularjs
• routes
• angular-routing

• Why do you want to avoid using services for your state? In opposite of your request. – Chris Commented Aug 13, 2015 at 13:44
• Hmm, I'm not sure, i just want to find the correct way. I'm having a bug single controller with a lot of scopes and data. I was thinking the simple way to read the templateName parameter and update a scope with a path for the template and just include it but i'm not sure if this is correct or safe to do. – Vassilis Pits Commented Aug 13, 2015 at 13:48
• Well it is, off course, possible (see the answer below, although it doesn't keep your existing controller). But I would try removing all the singleton like logic from the controller and move it to a service. – Chris Commented Aug 13, 2015 at 13:55
• Could you provide an example? – Vassilis Pits Commented Aug 13, 2015 at 13:56

2 Answers 2

One solution could be the following one:

angular.module('myapp', []).
            config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/:templateName/:pageId', {
                templateUrl: function(urlattr){
                    return '/pages/' + urlattr.templateName + '.html';
                },
                controller: 'YourCtrl'
            });
        }
    ]);

From the AngularJs 1.3 Documentation:

templateUrl – {string|function()} – path or function that returns a path to an html template that should be used by ngView.

If templateUrl is a function, it will be called with the following parameters: Array.<Object> - route parameters extracted from the current $location.path() by applying the current route

I would move your singleton logic from your controller to a service. Since you didn't provide much code below is an example to give you an idea how it could work.

app.config(function($routeProvider) {
  
  $routeProvider
    .when('/', {
      templateUrl: 'partials/homepage.html',
      controller: 'SingleController'
    })
    .when('/test', {
      templateUrl: 'partials/test.html',
      controller: 'SingleController'
    })
    .when('/page/:pageId', {
      templateUrl: 'partials/page.html',
      controller: 'SingleController'
    });
  
});

app.provider('appState', function() {
  
  this.$get = [function() {
    return {
      data: {}
    };
  }];

});

app.controller('SingleController', function ($scope, appState) {
  
  $scope.data = appState.data;
  
});

But if it must be a singleton controller you actually could use the ng-controller directive before your ng-view directive so it bees a $rootScope like scope for all your views. After that just add empty function wrappers in your $routeProvider for the controllers.