The ui-router is a third party routing framework for AngularJS. It provides everything what an ng-route provides along with additional features. The ui-router implement routing based on the state of the application where ng-route implements routing based on the route url. Hence views and routes are not tide to the application url in case of ui-router unlike ng-route.
Configuring state in ui-router
A state corresponds to a "place" in the application.
Angular function .configure is used for to define the routes in AngularJS application. The object $stateProvider is injected in the .config() function. The object $stateProvider has the function .state that maps the partial views. You can have as many as .state functions you want, depending on the numbers of routes you are configuring.
var myApp = angular.module('myApp', ["ui-router"])
.config( function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/abc");
$stateProvider
.state("abc", {
url: "/abc",
templateUrl: "Partial/abc.html",
controller: "abcController"
})
.state("xyz", {
url: "/xyz",
templateUrl: "Partial/xyz.html",
controller: "xyzController"
})
.state("def", {
url: "/def",
templateUrl: "Partial/def.html",
controller: "defController"
})
});
To configure default route, inject $urlRouteProvider service into .config() function and use .otherwise function to map to the default url. When the default route is defines it means that if we try to access either the route which is not configured or the base route page, it will redirect us to the url which is specified in the .otherwise method.
Using state from main Layout:
Directive ui-sref is used for creating links with ui-router. The ui-sref points to the state of the application.
<head>
</head>
<body>
<div>
<a sref="abc"> ABC</a>
<a sref="xyz"> XYZ</a>
<a sref="def"> DEF</a>
</div>
<div class="container">
<ui-view>
<!-- Here partial templates will be injected -->
</ui-view>
</div>
</body>
Things to Note::
Steps to use the AngularJS routing module uiRouter:
- Add the reference for the same in your application.
<script src="scripts/angular-ui-router.min.js"></script>
- Include uiRouter as a dependency while creating the module in our application.
var myApp = angular.module('myApp', ["ui.router"]);
- Add ui-view directive in the layout page.
<div class="container">
<ui-view>
<!-- Here partial templates will be injected -->
</ui-view>
</div>
- Configuring state using state() method of $stateProvider service.
$stateProvider.state(stateName, stateConfiguration);
A state corresponds to a "place" in the application.
Angular function .configure is used for to define the routes in AngularJS application. The object $stateProvider is injected in the .config() function. The object $stateProvider has the function .state that maps the partial views. You can have as many as .state functions you want, depending on the numbers of routes you are configuring.
var myApp = angular.module('myApp', ["ui-router"])
.config( function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/abc");
$stateProvider
.state("abc", {
url: "/abc",
templateUrl: "Partial/abc.html",
controller: "abcController"
})
.state("xyz", {
url: "/xyz",
templateUrl: "Partial/xyz.html",
controller: "xyzController"
})
.state("def", {
url: "/def",
templateUrl: "Partial/def.html",
controller: "defController"
})
});
To configure default route, inject $urlRouteProvider service into .config() function and use .otherwise function to map to the default url. When the default route is defines it means that if we try to access either the route which is not configured or the base route page, it will redirect us to the url which is specified in the .otherwise method.
Using state from main Layout:
Directive ui-sref is used for creating links with ui-router. The ui-sref points to the state of the application.
<head>
</head>
<body>
<div>
<a sref="abc"> ABC</a>
<a sref="xyz"> XYZ</a>
<a sref="def"> DEF</a>
</div>
<div class="container">
<ui-view>
<!-- Here partial templates will be injected -->
</ui-view>
</div>
</body>
Things to Note::
- To reload the section of a layout use reload() function of object $state. The object $state is provided by the ui-router module.
- To remove the # from url, use the same mechanism which is being used in earlier post for ng-route, where it is done by enabling html5mode routing.
- By default the routes which are configured using the ui-router are case-sensitive. To make a route case insensitive we need to inject $urlMatchFactoryProvider service into the .confige() and call function caseInsensitive(true);. To make all the routes to be case insensitive set the $routeProvider.caseInsensitiveMatch = true.
angular.module('myApp', ["ngRoute"])
.config( function ($stateProvider, $urlMatchFactoryProvider){
$urlMatchFactoryProvider.caseInsensitive(true);
$stateProvider
.state("abc", {
url: "/abc",
templateURL: "Partial/abc.html",
controller: "abcController",
})
.state("/xyz", {
url: "xyz",
templateURL: "Partial/xyz.html",
controller: "xyzController"
})
$stateProvider
.state("abc", {
url: "/abc",
templateURL: "Partial/abc.html",
controller: "abcController",
})
.state("/xyz", {
url: "xyz",
templateURL: "Partial/xyz.html",
controller: "xyzController"
})
});
No comments:
Post a Comment