AngularJS is very powerful framework and provide the solution for almost every challenge without integrating any outside libraries. Angular UI library is broken in many parts so you can pick the feature and include only that in your angularJS application.
But still we can add libraries and make the angular application more powerful.
ui-router is one of most powerful ui library of the angularJS . Instead for just providing the url route it plays with the state. ui-router provide many extra and more powerful feature. We can have nested views , multiple views on one page or the multiple view wich have common controller .
INSTALLATION : For installing ui-router in your application you can install it through the bower
$ bower install angular-ui-router --save and then include the it in your HTML file
<script src="phoneCatApp/bower_components/angular-ui-router/release/angular-ui-router.js" type="text/javascript"></script>
or
you can save the source code from the GITHUB .
For using the ui-route you need to ui-router as a dependency in your module
<html ng-app="phoneCatApp">
<head>
<script src="script/angular.js"></script>
<!-- Include the ui-router script -->
<script src="script/angular-ui-router.min.js"></script>
<script>
// ...and add 'ui.router' as a dependency
var phoneCatApp= angular.module('phoneCatApp', ['ui.router']);
</script>
</head>
<body>
</body>
</html>
If you used ng -router then you most probably came across the ng-view directive . So here instead of using the ng-view we use ui-view ,the views will get change inside this ui-view
<div ng-controller="mainController">
<div ui-view="">
</div>
</div>
Now we will write the config of the app for routing . It is very simmiler to the ng-route but instead of playing upon $routeProvider we deal with $stateProvider.
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('first', {
url: '/first',
templateUrl: 'template/first.html',
controller :firstController
})
});
template templateUrl and templateProvider
These three are used for setting the views .You can use any of them according to your needs .
- template - template is a string of HTML content or a function that returns HTML
- templateUrl - templateUrl is a string of a URL path to a template or a function that returns a URL path string
- templateProvider - templateProvider is a function that returns an HTML content string
Controller
controller is used to bind the controller to the view. Which can operate over the view
url
This work very simmiler to the ng-route but have many upgrades in it .Which we will discuss in future.
How to route ?
1 . ui-sref
ui-sref work smiler to the href but it have more capability . It takes the stateName as the the parameter .
<a ui-sref="first">First</a>
2 . $state.go
If you want to change the view from controller then you need to use $state.go . The syntax is
go(to, params, options)
- $state.go('first') will take it to first state.
- $state.go('^') - will take it to a parent state
- $state.go('^.sibling') - will take it to a sibling state
- $state.go('.child.grandchild') - will take it to grandchild state
This is the first part of ui-router. I will discuss many other parts in next series of it.
0 comments:
Post a Comment
...