JavaScript and JQuery Essentials Trainin... (44 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (18 Blogs)
  • jQuery UI Development (1 Blogs)
  • The Complete WebDeveloper (34 Blogs)
  • ReactJS (7 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

Angular JS Routing : All You Need To Know

Published on Aug 21,2019 33 Views
21 / 21 Blog from JavaScript

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

Suppose we have a web application with just two pages and when we move to another page every time our page loads. Now just think if the page doesn’t load and the next page content is shown and the URL also changes, Angular JS Routing does these all thing for you. Here I am going to show you how to do that?

Following pointers will be covered here,

So let us get started then,

Angular JS Routing

Let’s have a look at the directory structure of the APP. Here we created three pages in the template directory home, about and contact so these pages are shown when we click on their links and you see that the page would change without loading.

Moving on with this Angular JS Routing,

Setting up a simple angular JS Application

For setting up the app we first need to make an index.html file that handles main content and here we define three links that represent three pages home, about and contact respectively and when a user clicks on that link then that page-specific data shown here.

also, we create an app.js file that works the backend functionality, here we set up our module, configuration of our routes and controllers.

There are also two folders

  • templates
  • assets

the template folder is responsible for all HTML pages that are later shown in views and the assets folder is responsible for angular.js and angular.routing.js.

Next in this Angular JS Routing,

Adding routing to angular JS application

Now we need to add routing to our application for this all the code we place into the app.js file.  First, we create our module and we give the name “myTestRoutingApp” module after that we set up the router configuration here we redirect the page according to given route path.

We define three things here

  • path
  • templateUrl
  • controller

The path is the URL last path when the user clicks on the link that links the match with this URL. The templateUrl is the path of the template HTML file of the links pages,  these pages are linked with the anchor tag.

Finally, the controller is the file that handler the backend or page functionality, the name of the controller is generally a template name followed by controller word.

index.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Routing Test</title>
</head>
<body ng-app="myTestRoutingApp">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<!--our views shown here-->
<div id="main">
<div ng-view></div>
</div>
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>

app.js

</p>
// first we create our module
var routingTestApp = angular.module('myTestRoutingApp', ['ngRoute']);
// now we configure the routes here
routingTestApp.config(($routeProvider) => {
$routeProvider
//setting route for home page
.when('/',
{
templateUrl: 'templates/home.html',
controller: homeController
})
//setting route for about page
.when('/about',{
templateUrl: 'templates/about.html',
controller: aboutController
})
//setting route for contact page
.when('/contact',{
templateUrl: 'templates/contact.html',
controller: contactController
})
}
);
// creating a controller
routingTestApp.controller('homeController', ($scope) => {
// showing hello word message
$scope.message = 'Hello, You are on the HOME page';
});
routingTestApp.controller('aboutController', ($scope) => {
//showing hello word message
$scope.message = 'Hello, You are on the ABOUT page';
});
routingTestApp.controller('contactController', ($scope) => {
// showing hello word message
$scope.message = 'Hello, You are on the CONTACT page';
});
<p style="text-align: justify;"><img class="alignnone size-medium wp-image-107692" src="/blog/wp-content/uploads/2019/08/angularjs-routing-1-300x175.jpg" alt="Feature Image - Angular JS Routing - Edureka" width="300" height="175" />

Moving on with this Angular JS Routing,

Adding the HTML template file

In the final part, we need to add HTML pages in the template directory these files are normal HTML files, just one thing we use here “{{}}”, this notation is used for string interpolation in angular js when we use this, a variable’s value is directly printed on the template as the variable “message” is printed.

This brings us to the end of this I hope this blog was informative and added value to you. Now, you must be clear with the building blocks of Angular and ready to create an Angular application. I would recommend you to go through this Angular Tutorial Edureka video playlist to watch videos and learn how to create an Angular application.

Now that you know the building blocks of Angular, check out the Angular training by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework which is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community driven indirectly driving better job opportunities. The Angular Certification Training aims at covering all these new concepts around Enterprise Application Development.

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.