EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJS Routing Example
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

AngularJS Routing Example

Introduction to AngularJS Routing Example

AngularJS routing example is used to navigate the different types of pages in our application, but suppose we want a single-page application with no page reloading. We can use the module of ngroute. The ngroute module routes our application with the different pages without reloading our entire application. Routing is an essential feature of AngularJS; we can build web applications using routing.

AngularJS Routing Example

Overviews AngularJS Routing Example

The angularjs routing ngroute module provides deep linking services and directives for angular applications. We can download the script of angular-route.js, which contains the ngroute module; this script is used to use the feature of angular routing. To include these files in our application, we can use the CDN; we also use the Google CDN to have the angular-route.js file. If suppose we want to build this file in our application, then we can add the same to our page by adding the code of the src script.

How does AngularJS Routing Example Work?

  • AngularJS routing is used when we want to navigate the different pages in our application. Routing in angularjs enables the user to create different contents of different urls in different content of the application.
  • The module of ngroute helps us access the application’s different pages without reloading.
  • By using @routeProvider in angularjs, we can configure the routes. Routing in angularjs helps us to display the page when the user clicks on it. The routing method in angularjs will accept the otherwise or when method.
  • The ngroute module is added as a dependency in our application module.

Below is the syntax which was used to configure the route in AngularJS.

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,560 ratings)

Syntax:

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

app.config(function($routeProvider) {
$routeProvider
  .when('/angular1', {
    templateUrl : 'angular1.html',
    controller : 'controller1'
})
.when('/angular2', {
  templateUrl : 'angular2.html',
  controller : 'controller2'
})
  .otherwise({
   redirectTo : '/angular1'
 });
});
  • In the above syntax, the method is used to take the parameters of the route and path. In angularjs routing path is a url part that was used after the symbol.
  • Angularjs route contains the two properties name as controller and the templateUrl. The property of templateUrl will define which controller we are using in the html template.
  • When loading, the angularjs application path is matched against the URL after using the #symbol. The browser will be redirected to the specified function if the supposed path matches no route URL.

The below example shows to navigate the angular routing as follows:

Code:

<body ng-app="AngularJSRouting">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var routing = angular.module("AngularJS Routing", ["ngRoute"]);
routing.config (function ($routeProvider) {
$routeProvider
.when ("/", {
templateUrl : "main.htm"
} )
.when("/red", {
templateUrl : "red.htm"
} )
.when ("/green", {
templateUrl : "green.htm"
} )
.when("/blue", {
templateUrl : "blue.htm"
} );
} );
</script>
</body>

Output:

shows to navigate the angular routing

AngularJS Routing Example 2

The below example shows the simple example of angular routing as follows. In the first step, we define the module, routes for creating the controller, and multiple views. In the last step, we created a shell page of our application which was used to hold the views.

  • In the first step, we create the module name as AngularRouting and loading the dependent module name as ngroute.
  • After creating the module and loading the dependent module, we configure the routes using $routeProvider.
  • After configuring the route in this step, we use two paths as /home and /angularjs.
  • After using the path in this step, we use a single controller named AngularController.
  • After using the angular controller, we initialize the AngularController of an array.

Code:

var AngularRouting = angular.module("AngularRouting", ['ngRoute']);
AngularRouting.config (function ($routeProvider) {
$routeProvider
   .when ('/home', {
     templateUrl: 'home.html',
     controller: 'AngularController'
})
.when ('/angularjs’, {
   templateUrl : 'viewAngular.html',
   controller : 'AngularController'
} )
.otherwise ( {
   redirectTo: '/home'
  } );
} );
AngularRouting.controller ('AngularController', function ($scope) {
$scope.angular = [
  {name : 'ABC', Addr : 'Mumbai'},
  {name : 'PQR', Addr :'Pune'},
];
$scope.message = "Click here.";
} );

Output:

creating the module name

  • The URL part of /home is loading the home.html page; if the page matches the /viewAngular, it will load the viewAngular.html into our shell page. If it does not match anything, it will go to the otherwise condition, and then the page will be redirected to the home.html.
  • In the below example, we are creating the view and saving the same as home.html and viewAngular.html as follows.

Code:

<div class = "AngularJSRouting ">
<h2> AngularJS Routing </h2>
<p> {{message}} </p>
<a href = "#/viewAngular"> List of student</a>
</div>

Output:

creating the view and saving the same

  • Above is the default page of our application; in the above view, we are printing the message we have initialized in a controller.

In the below example, we are creating the view of viewAngular and saving the same as viewAngular.html.

Code:

<div class = "AngularJSRouting ">
<h2> AngularJS Routing </h2>
<p> {{message}} </p>
<a href = "#/viewAngular"> List of student</a>
</div>
<div class = "AngularJSRouting">
<h2> Angular JS routing </h2>
Search:
<br/>
<input type = "text" ng-model = "name" />
<br/>
<ul>
<li ng-repeat = "student | filter:name">{{angular.name}} , {{angular.city}}</li>
</ul>
<a href = "#/home"> Back</a>
</div>

Output:

creating the view of viewAngular

  • Now we are creating the index.html file. In that, we are defining the ng-app auto-bootstraps for our application. We are using the ngView directive for the placeholder of a view of home.html and viewAngular.html. We also include the main.js file we created; then, we save this file name as index.html.

Code:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset = "utf-8">
<title> AngularJS Routing Example </title>
</head>
<body>
<div ng-app = "AngularRouting ">
<ng-view> </ng-view>
</div>
…..
</body>
</html>

Output:

creating the index.html file

Conclusion

The angularjs routing ngroute module provides deep linking services and directives for angular applications. The ngroute module routes our application with the different pages without reloading our entire application. Routing is an essential feature of AngularJS; we can build a web application using routing.

Recommended Articles

This is a guide to AngularJS Routing Example. Here we discuss the introduction and how does AngularJS routing example work. You may also have a look at the following articles to learn more –

  1. Angular Material Overlay
  2. Angular Material NPM
  3. Angular material radio button
  4. Angular material slider
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more