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:


var appUistate = angular.module('appUistate', ['ui.router']);

appUistate.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/Home');

   
 $stateProvider        
.state('home', { 
                 url: '/Home'
                 templateUrl: 'Templates/Home.html' }
             )

        
.state('contact', {
            url: '/Contact',           
 views: {                
   '': { 
         templateUrl: 'Templates/Contact.html' 
       }, 
                               
   'locindia@contact': {
                    
                 template: '<div class="panel bg-success">' +
                           '<div class="panel-heading panel-success bg-info"><strong>India                                   Address</strong></div>' +
                           '<div class="panel panel-body bg-success"><br/> {{Address}}<br/>                                     {{City}}<br/> {{country}}</div></div>',
                
                 controller: function ($scope) {
                        $scope.Address = 'No 23, old Ecr Road,';
                        $scope.City = 'Chennai -123';
                        $scope.country = 'India';
                    }
                },                

    'locus@contact': {
                    templateUrl: 'Templates/UsLoc.html',
                    controller: 'LocController'
                }
            }
        })

        .state('home.details', {
            url: '/Detail'
            templateUrl: 'Templates/Partial.Home.html'
            controller: function ($scope) {
                $scope.Employess = ['Rajesh', 'Suresh', 'Ramu', 'Shiny']
            }
        })

        .state('home.latestinfo', { 
             url: '/Info'
             template: '<p class="text-info">This is the important organisation                                      information.<span class="glyphicon glyphicon-globe"></span></p>' });

 });

appUistate.controller('rootController', function ($scope, $state) {
    $scope.state = $state.current;
    $scope.value = 2;

    $scope.GetState = function () {
        $scope.state = $state.current;
    }

});

appUistate.controller('LocController', function ($scope) {
    $scope.Address = 'N0 23, IT Park';
    $scope.City = 'California';
    $scope.Location = 'United States';
});



Sample design code:

Index.html
******************

<!DOCTYPE html>
<html>
<head lang="en">

    <meta charset="UTF-8">
    <link rel="stylesheet" href="Css/bootstrap.min.css" >

    <style>
        .navbar{

        }
    </style>

    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-ui-router.min.js"></script>
    <script src="Application/app.js"></script>   
</head>
<body ng-app="appUistate">

<div ng-controller="rootController">

    <nav class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand">Angular JS Sample</a>
        </div>
        <ul class="nav navbar-nav navbar-left">
            <li><a ui-sref="home">Home</a></li>
            <li><a ui-sref="contact">Contact</a></li>
            <li><a style="cursor:pointer;" ng-click="GetState()">Get State Details</a></li>
        </ul>
    </nav>

    <div class="container">
     <div class="row"> 
     <div class="col-lg-4 col-md-4">
         <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">Angular state information</h3>
            </div>
             <div class="panel-body">
                 <table class="table text-success" width="100px">
                     <thead>
                     <tr><th width="200px">Type</th><th width="50px"></th>
                         <th class="text-left">Value</th></tr>
                     </thead>
                     <tbody>
                     <tr><td>Name</td><td>:</td><td>{{state.name}}</td></tr>
                     <tr><td>Url </td><td>:</td><td>{{state.url}}</td></tr>
                     <tr><td>Template Url</td><td>:</td><td class="text-left">                                          {{state.templateUrl}}</td></tr>
                     </tbody>
                 </table>

             </div>
         </div>
     </div>
     <div class="col-lg-8 col-md-8">
        <div ui-view></div>
     </div>
     </div>
    </div>

</div>
</body>

</html>


Home.Html
*********************

<div class="panel">
    <div class="page-header text-info">
        Organisation Details, you can see some of the latest information as well as detailed         information takes places in organisation in this page.
    </div>
    <div class="panel-body panel-info">
        <a ui-sref=".details" class="btn btn-primary">Details</a>
        <a ui-sref=".latestinfo" class="btn btn-success">Latest Info</a>
    </div>
</div>


<div ui-view> </div>


Partial.Home.Html
********************

<div>
    <div class="h4"> Employee details </div>
    <ul class="panel">
        <li class="list-inline list-group-item bg-success text-success" ng-repeat="emp in Employess">{{emp}}</li>
    </ul>

</div>


Contact.html
**************** 

Multiple Views Code:

<div class="panel">
    <div class="page-header">
        Contact Information
    </div>
    <div class="panel-body panel-info">
        <div ui-view="locindia"></div>
        <div ui-view="locus"></div>
    </div>

</div>


UsLoc.Html
***************
<div class="panel">
    <div class="panel-heading text-warning bg-primary">
        US Location
    </div>
    <div class="panel panel-body">
        <div class="text-info">
                <div>{{Address}}</div>
            <div>{{City}}</div>
            <div>{{Location}}</div>
        </div>
    </div>
</div>


Output:













Home.Details:







Home.Info









Contact with Multiple views





From this post we can learn how to create a View and multiple views in a single page application using state management in Angular JS.