Routing in Angular JS using Angular UI Router

$stateProvider
.state('StateName', {
    url: 'Url pattern for this State',
    template: "Html content",
    controller: "Name of the Controller for this state"
});

$stateProvider
.state('Home', {
    url: '/home',
    templateUrl: "home.html",
    controller: "HomeCtrl"
});

To run and install http-server node module to host demo app.

routingDemo
--app.js
--index.html
--nav.html

• 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/[email protected]/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. javascript

// declares application module with name "myApp"
// inject ui.router dependency
var app = angular.module('myApp', [ "ui.router" ]);

// define route configurations inside app.config
// injecting dependencies
app.config(function($stateProvider, $locationProvider, 
                                $urlRouterProvider) {

    // creating routes or states
    $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"
        });

    // Redirect to home page if url does not 
    // matches any of the three mentioned above
    $urlRouterProvider.otherwise("/home");
});

// create empty controllers for the states as we are
// not doing anything but just displaying message
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:
• https://github.com/angular-ui/ui-router/wiki/quick-reference
• https://ui-router.github.io/ng1/docs/1.0.0-beta.1/classes/state.stateprovider.html
• https://en.wikipedia.org/wiki/AngularJS


Comment
More info
Advertise with us
Next Article
How to use Angular Material in Angular 17?

N

neerajnegi174

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• JavaScript-Questions