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) {


.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';
                        $ = '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:


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

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



    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-ui-router.min.js"></script>
    <script src="Application/app.js"></script>   
<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>
        <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>

    <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 class="panel-body">
                 <table class="table text-success" width="100px">
                     <tr><th width="200px">Type</th><th width="50px"></th>
                         <th class="text-left">Value</th></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>

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




<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 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 ui-view> </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>



Multiple Views Code:

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


<div class="panel">
    <div class="panel-heading text-warning bg-primary">
        US Location
    <div class="panel panel-body">
        <div class="text-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.