Routing in Angular JS using Angular UI Router
Last Updated :
19 Feb, 2019
AngularJS is a front-end web application framework based on JavaScript and is maintained by Google. AngularJS interprets the attributes of HTML as directives to bind input/output components to a model represented by standard JavaScript variables.
Pre-requisites:
- HTML
- CSS
- JavaScript
- AngularJS
Angular-UI-Router is an AngularJS module used to create routes for AngularJS applications. Routes are an important part of Single-Page-Applications (SPAs) as well as regular applications and Angular-UI-Router provides easy creation and usage of routes in AngularJS.
Angular-UI-Router has stateProvider method which is used to create routes/states in application. State Provider takes state name and state configurations as parameters.
Syntax:
$stateProvider
.state('StateName', {
url: 'Url pattern for this State',
template: "Html content",
controller: "Name of the Controller for this state"
});
Instead of template, templateUrl can be used and given the path of the HTML file to render for the state.
Example:
$stateProvider
.state('Home', {
url: '/home',
templateUrl: "home.html",
controller: "HomeCtrl"
});
Simple project to navigate between the routes to demonstrate the use of the Angular-UI-Router module.
Pre-requisites: Node.js and npm
To run and install http-server node module to host demo app.
Steps to perform the operation:
1. Create a directory structure as below:
routingDemo
--app.js
--index.html
--nav.html
2. Create nav.html file as below. This file consist of nav bar title and contents of it.
3. Create index.html file as below. All the required dependencies are included in this file along with nav.html file and definition of ui-view where content of different routes will be rendered.
Explanation:
- All the dependencies are included via CDN in the head tag.
- nav.html file is included to the index.html page in the body tag
- The last division in body defines ui-view div where the content of different routes will be rendered.
Note:If it does not work, replace the second and third script with below:
<script src="angular.min.js"></script>
<script src = "
https://unpkg.com/@uirouter/angularjs@1.0.7/release/angular-ui-router.min.js">
</script>
4. Create app.js file as below. This is the application file with routes information and actions to be performed through controller.
var app = angular.module('myApp', [ "ui.router" ]);
app.config(function($stateProvider, $locationProvider,
$urlRouterProvider) {
$stateProvider
.state('Home', {
url : '/home',
template : "<h1>Home Page</h1>",
controller : "HomeCtrl"
})
.state('Login', {
url : '/login',
template : "<h1>Login Page</h1>",
controller : "LoginCtrl"
})
.state('Signup', {
url : '/signup',
template : "<h1>Signup Page</h1>",
controller : "SignupCtrl"
});
$urlRouterProvider.otherwise("/home");
});
app.controller('MainCtrl', function() {});
app.controller('HomeCtrl', function() {});
app.controller('LoginCtrl', function() {});
app.controller('SignupCtrl', function() {});
|
5. To run the above demo app in the browser, install http-server node module. To install the http-server module use the following command:
npm install http-server -g
6. After Installing:
–From routingDemo folder, run following command:
http-server
Above command will host the demo app on port 8080. app can be accessed using below link:
localhost:8080/
7. If this application is accessed via browser, Output will be as below:
8. After clicking on Login tab in the nav bar, Output will be as below:
9. Clicking on Sign up tab in the nav bar, Output will be as below:
Three routes namely Home, Login and Sign up are created in this sample application.
Applications:
Routes are important for Single Page applications as they provide different functionalities to the application on the same page.
Routes creation and manipulation is easy with the angular-ui-router module.
References:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...