Nested views and templates in Angular


sTeam web interface is a perfect example of an Angular application that has multiple views to deal with. The router for sTeam is built using ui.router, which is a classic library for dealing with applications that might have a combination of both parent and child routes that are ought to be reused.

What is the difference between ui-view and ng-view ?
Generally we often get confused with the concept of view when it is used with a router and when it is used inside for injecting templates. The concept of view is simple, it acts like a small placeholder so that we can co-relate or place particular piece of DOM in a required location.
So to understand this better and clear the confusion we must first know how views and templates work. So the web interface for sTeam uses ui.router as a result the concept of ui-view differs from ng-view.
Both of these afore mentioned have different service provides while ui-view belongs to ui.router, ng-view belongs to the default angular’s ngRouter

How do we implement them ?
We must understand that we have three things involved while writing views using ui.router. Let us look at them carefully

  • router
  • template
  • view

Let us suppose the below is an example of the view that contains the configuration in the router

.state('workarea.list', {
  url: '^/room/:path',
  requireLogin: true,
  views: {
    'options': {
      templateUrl: '/views/options.html',
      controller: 'optionsCtrl'
    'workspaceList': {
      templateUrl: '/views/workspaceList.html',
      controller: 'workspaceListCtrl'
    'comments': {
      templateUrl: '/views/comments.html',
      controller: 'commentsCtrl'

Let us now have a look at the html

  div class="row"
    div class="col-lg-2"
    div class="col-lg-10"
      legend class="text-left">Comments
      form class="form-horizontal"
        div class="form-group"
          div class="col-sm-10"
            input class="form-control" type="text" ng-model="commentContent" required id="searchMe"
          div class="col-sm-2"
            button type="button" class="btn btn-primary" ng-click="addComment();">Submit
            ul id="comments"

Now since we have the html written, we can use the same in the same state that which we have declared in the router we are ready to use the view. Let us observe how should the route be used :

div ui-view="comments" div

So if we carefully observe the ui-view attribute we can see that the name of the view is being written, so accordingly we must declare the name in that place in order to use that view.

Thats it folks,
Happy Hacking !!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.