Pages

Sunday, 21 June 2015

Create View or Multiple views in single page application using State Management in Angular js

In this post we are going to see how to create a view and multiple views in single page application using state management in Angular Js.Normally initially when angular js release we have to manage the views using the ng-view and routing using the $routeProvider. so because of this we have to manage the multiple views using the ng-include. but most of the applications developed are not using the angular routing, instead they using the angular for data binding and dom manipulation. Later in the angular release we have a additional provider called $stateProvider which is used to maintain the views in the name of state.using this we can maintain a multiple views in a single page, in ng-view we can't declare the more than one view in a signle view,to overcome this we have a new thing known as ui-view which can be declared more than once in a page, i.e multiple view declaration in a single page, in ng-Route we have to use the ng-include to have the multiple views and user have to inject the templates in code.Let we see what are the things we can do using ui-view, multiple views in a single page and view change based on state change, using ui-sref. First we have to declare the state in the config , because whenever you change the state using ui-sref, it will load the corresponding view from the config.Let we take a scenario we have a home page where we have to state views one is details view and another is latest information view, another one is a contact view where we can have multiple views defined in a single page , multiple views are defined based on the named defined in ui-view.Sample Code config: