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:
Sample design code:
Index.html
******************
Home.Html
*********************
Partial.Home.Html
********************
Contact.html
****************
Multiple Views Code:
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.
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>
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.
No comments:
Post a Comment