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
div class="col-lg-10"
legend class="text-left">Comments
legend
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"
span
span
div
div class="col-sm-2"
button type="button" class="btn btn-primary" ng-click="addComment();">Submit
button
div
div
ul id="comments"
ul
div
div
form
div
div
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 !!