Introduction:

In this article we will explain how to use ngRoute  directive in AngularJS or What is  ngRoute  directive in AngularJS or why ngRoute  directive in AngularJS or how to build Single Page Application in AngularJS with example.

  • Description:

 

AngularJS supports single page application using module ngRoute. This routing module proceeds to based on the url. When user makes request routing engine capture that url and render the view inside where you defined ng-view directive Div or other elements  based on the defined routing rules. When We need to build Single Page Application .We can use AngularJS ngRoute and update dynamically view according to user interactions. 

Let's see how to implement a simple using routing in AngularJS application.

  •  Routing Example:

In this example, we will have one main view - index.cshtml, and two HTML templates - create.cshtml and List.cshtml.

  1. 1. Index.cshtml - layout view
  2. 2. create.cshtml - template
  3. 3. list.cshtml - template

The following is a main view - index.cshtml.

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>index</title>
    <script src="/Scripts/jquery-3.1.1.js"></script>
    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/angular-route.min.js"></script>
    <link href="/Content/bootstrap.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
    <fieldset>
        <legend>Angular Routing Demo</legend>
        <a href="#/Create">Create New User</a>
        <br />
        <a href="#/UserList">Show User List</a>
    </fieldset>
    <div class="col-sm-2"></div>
 
    <div class="col-sm-6">
        <div ng-view>
 
        </div>
    </div>
    <div class="col-sm-2"></div>
    <script>
        var app = angular.module('myApp', ['ngRoute']);
 
        app.config(function ($routeProvider,$locationProvider) {
            $routeProvider.when('/Create', {
                templateUrl: '/Home/Create',
                controller: 'CreateController'
            }).
                when('/UserList', {
                    templateUrl: '/Home/List',
                    controller: 'ListController'
                }).
                otherwise({
                    redirectTo: '/'
                });
           $locationProvider.html5Mode(false).hashPrefix('');            
        });
 
        app.controller("CreateController", function ($scope) {
            $scope.firstName = "aditya";
            $scope.lastName = "patel";
            $scope.contact = "7522019206";
 
        });
 
        app.controller("ListController", function ($scope) {
            $scope.data = {
                records: [{
                    id: '1', firstName: 'Rajeev', lastName: 'singh', contact: '7777777777'},
                         { id: '2', firstName: 'Tarun', lastName: 'deva', contact: '7777777777' },
                         { id: '3', firstName: 'mayank', lastName: 'pal', contact: '7777777777},
                         { id: '4', firstName: 'Sohel', lastName: 'kagi', contact: '7777777777' },
                         { id: '5', firstName: 'karan', lastName: 'panjabi', contact: '7777777777' }]
            }
        });
 
    </script>
</body>
</html>

 

The following is a partial view which is use for create a new user using anjularJS - Create.html  

<div ng-controller="CreateController">
    <form class="form-horizontal" role="form" >
        <div class="form-group">
            <label for="firstName" class="col-sm-3 control-label">First Name</label>
            <div class="col-sm-6">
                <input type="text" id="firstName" class="form-control" ng-model="firstName" />
            </div>
            <div class="col-sm-3"></div>
        </div>
        <div class="form-group">
            <label for="lastName" class="col-sm-3 control-label">Last Name</label>
            <div class="col-sm-6">
                <input type="text" id="lastName" class="form-control" ng-model="lastName" />
            </div>
            <div class="col-sm-3"></div>
        </div>
 
        <div class="form-group">
            <label for="dob" class="col-sm-3 control-label">Contact</label>
            <div class="col-sm-6">
                <input type="text" id="contact" class="form-control" ng-model="contact" />
            </div>
            <div class="col-sm-3"></div>
        </div>
 
        <input type="submit" value="Save" class="btn btn-primary col-sm-offset-3" />
        <input type="reset" value="Reset" class="btn btn-primary">
    </form>
</div>

 

The following is a partial view which is use for show user List in a table using anjularJS                                   ng-repeat  -  List.cshtml

<div class="table-responsive" ng-controller="ListController">
    <table class="table">
        <tr>
            <td colspan="4"><h2>AngularJS ng-repeat</h2></td>
        </tr>
        <tr ng-repeat="x in data.records">
            <td>{{x.id}}</td>
            <td>
                {{x.firstName}}
            </td>
            <td>{{x.lastName}}</td>
            <td>{{x.contact}}</td>
        </tr>
 
    </table>
</div>

 

The following is a controller it has three methods Index, Create, List – HomeController

Index method: its return index view which is our main view.

Create method: its return create view which is our template to create new user.

List method: its return list view which is our template to show user list.

using MvcApplication1.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
 
        public ActionResult Index()
        {
          return  View();
           
        }
        public ActionResult Create()
        {
            return View();
 
        }
 
        public ActionResult List()
        {
            return View();
        }
    }     }

 

Let's understand the above using directive:

$routingProvider : $routeProvider object Use to configure routing rules.

ng-view : ng-view directive use to <div> or other elements where you want to inject another child view.

Let’s See How it work.

Now, when you run the application, it will display a main page as shown below.

Routing in AngularJS When we click on Create New User called create method and return create.cshtml view template as shown below.

  • Routing in AngularJS

  • When we click on show User List called List method and return List.cshtml view template as shown below. 

Routing in AngularJS


I hope this article will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like