Routing in Angular JS using Angular UI Router

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.

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      // 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() {});

      chevron_right

      
      

      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:



      My Personal Notes arrow_drop_up

      Check out this Author's contributed articles.

      If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

      Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




      Article Tags :

      Be the First to upvote.


      Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.