In Angular we are provided with a routing framework named Angular UI-Router. It enables us to make transitions based on states rather than routes URL (which is used in ngRoute),i.e. it is organized around states. It supports nested states and multiple views.
It is preferred over ngRoute because-
1.we can get or access information of different states and can easily pass information using stateparams.
2.allows nested states and named multiple views.
3.we can adjust the UI element within the templates as it allows user to determine if we are in a state or parent state via $state.
It is basically a ngRouter with more useful functions.
How to get started using UI-Router?-
Step 1:- Include Angular UI-Router module into your HTML-
<script src="js/angular-ui-router.min.js"></script>
Step 2:- Inject the ui-router module into your app module -
angular.module('routingDemoApp',['ui.router'])
Your HTML Template should be somewhat like this:-
<html ng-app='routingDemoApp'>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap-select.css"> </head>
<body class=HeadBox>
<h2>Example AngularJS UI Router Application</h2>
<nav class="navbar navbar-default row">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li><a ui-sref=home>Home</a></li><!--State Transition on click-->
<li><a ui-sref=cities>Cities</a></li><!--State Transition on click-->
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="span12">
<div class=box1 ui-view></div><!--Content of the above defined home & cities states will be injected here -->
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</body>
</html>
In the above code the hyperlink uses ui-sref. It auto generates href attribute and binds an <a> tag to a state. The ui-view directive tells where to inject the templates and when a state is activated,its template automatically gets inserted into the ui-view of its parent state.
Step 3:- Configuring states-
var App = angular.module('routingDemoApp',['ui.router']);
App.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /home
$urlRouterProvider.otherwise(/home)
$stateProvider
.state(home, {//State demonstrating Nested views
url: /home,
templateUrl: home.html"
})
.state(home.about, {//nested state [about is the nested state of home state]
url: /about,
templateUrl: about.html",
controller: function($scope){
$scope.categories = [Colleges, Schools, Hotels, Malls];
}
})
.state(home.services', {//nested state [services is the nested state of home state]
url: "/services",
templateUrl: "services.html",
controller: function($scope){
$scope.services = [Admission, "Support", Tutions, Food];
}
})
}]);
Here we use $stateProvider provides function so that user can define all states in one place. The function state(name,object) takes two parameters.
name defines the name of the state and object defines what needs to happen when that state is activated.
Step 4:- Our nested view will look like-(inside the home page)
<h1>Home page</h1>
<hr/>
<strong> Nested states & views. </strong>
<ul>
<li><a ui-sref=.about>About</a></li>
<li><a ui-sref=".services">Show Services</a></li>
</ul>
<div class="panel panel-default" ui-view></div>
about and services are child states while home is the parent state.
When any state is activated,i.e clicked, its template gets inserted automatically in the ui-view of its parent state. If any state doest not have a parent state it gets inserted into the ui-view of index.html.
Lastly, Our nested templates will be like this:-
about.html-
<h3>About</h3>
<ul>
<li ng-repeat="product in products">{{product}}</li>
</ul>
services.html-
<h3>List of services</h3>
<ul>
<li ng-repeat=service in Manyservices>{{service}}</li>
</ul>
0 Comment(s)