3gwebtrain 3gwebtrain - 3 months ago 11
AngularJS Question

How to supply the separate `template` when param exist?

I have a scenario, to handle the params. ( when param exist it will handled differently )

so, how can i keep 2 templates and use them according to the requirement? at present I am trying like this, which is not working at all.

any one help me?

my state with 2 template: ( please help me to correct )

.state('serialCreateCase', {
url: '/serialCreateCase?sn=',
"" : {
"templateUrl": 'app/login/loginWithSerial.html'
"?sn=" : {
"templateUrl": 'app/login/login.html'

here is the redirection with 2 scenarios: ( correct me if I am wrong )

if(!$rootScope.isUserLoggedIn && toParams.sn !== undefined ) {

console.log('dont take action', toState, toParams.sn );
$rootScope.canNavigate = true;
$state.go('serialCreateCase'); //works
$state.go('serialCreateCase', {sn:'1234'}); //not works



There is a working plunker

I would say that you need replace templateUrl with


TemplateUrl ...

templateUrl can also be a function that returns a url. It takes one preset parameter, stateParams, which is NOT injected.


Or you can use a template provider function which can be injected, has access to locals, and must return template HTML, like this...

There are more details and plunkers

This I prefer the most

templateProvider: [$stateParams, '$templateRequest',
  function($stateParams, templateRequest) 
    var tplName = "pages/" + $stateParams.type + ".html";
    return templateRequest(tplName);

(check it here) because it uses also $templateRequest


There is a working plunker

this could be the state def

  .state('serialCreateCase', {
    url: '/serialCreateCase?sn',
    views: {
      "": {
        templateProvider: ['$stateParams', '$templateRequest',
          function($stateParams, templateRequest) {
            var tplName = "app/login/loginWithSerial.html";
               tplName = "app/login/login.html";
            return templateRequest(tplName);

what we really need is to always pass some value, as sn. So, these should be the calls:

  // we need to pass some value, to be sure that there will be other than last
  <a ui-sref="serialCreateCase({sn: null})">
  // here is reasonable value
  <a ui-sref="serialCreateCase({sn:'1234'})">

Check it here in action