Angular ui router How to change the html in view of a state

Question

i am new to angular i want to create a nested view using angular ui router

i have index.html in this

<div>
  <div ui-view="menu"></div>
  <div ui-view="content"></div>
   <div ui-view="footer"></div>
</div>

in my app.js i use this

 app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('public', {
        url: "",
        views: {
            'menu': {
                templateUrl: 'app/index/public.menu.html'
            },
            'content': {
                templateUrl: 'app/index/public.content.html'
            },
            'footer': {
                templateUrl: 'app/index/public.footer.html'
            }
        }
    })
   })

in content.html i have

<div>
    <div ui-view="status"></div>
</div>

i want to set default html to that view "status"

and i also want to lode the html according to the url

Radim Köhler · Accepted Answer · 2014-06-13 12:32:15Z

1

There is working plunker

And this is an extract, of the state definition update, supporting both:

the ui-view="content" contains ui-view="status"
the status url is generated dynamically by the url

State def:

 $stateProvider
    .state('public', {
      url : '/{name:[abc]}',
      views: {
        'menu': { templateUrl: 'public.menu.html', },
        'content': { templateUrl: 'public.content.html', },
        'footer': { template: '<div>footer content</div>', },
        'status@public': {
            templateUrl: function($stateParams){
              if($stateParams.name === "a"){
                return "a.tpl.html";
              } 
              if($stateParams.name === "b"){
                return "b.tpl.html"
              }
              return "c.tpl.html";
            },
        },

The biggest magic is in the status@public name definition, read more here:

View Names - Relative vs. Absolute Names

The template selection is driven by the feature:

Templates

Check the working example

answered Jun 13, 2014 at 12:32

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

2 Comments

kannanfa Over a year ago

this is what i exactly i need thanks for the quick reply @Radim Köhler and for the answer

Radim Köhler Over a year ago

Great if that helped anyhow! Enjoy ui-router ;)

Collectives™ on Stack Overflow

Angular ui router How to change the html in view of a state

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related