What are the steps involved in ng-route in AngularJS

0 votes
Can Someone please explain me the steps to configure the ng-route in client side appliaction?

Thanx in advanced!!
Feb 6, 2020 in Angular by kartik
• 37,520 points
1,042 views

1 answer to this question.

0 votes

Hello,

As Routing is just another way of fixing some content dynamically as part of your application.It is a key part of all websites and web applications in one way or another. 

ng-route is a way to achieve routing in client side of AngularJS.

The steps involved for setting ng-route in your web page are:

1. Include or download or refer to ng-route module which is usally available through angular-route.js and this angular-route.js is separate javascript file which is made available through google API or google website and that's need to be included and whenever you are including make sure that it is after angular.js.

2. You have to use ng-route as part of your module dependency which means you have to include that in your module specification.

var app= angular.module ('app', [ng-route]);

3.Finally you need to configure your routes by using $routepProvider which is a service made automatically available to your web application and the moment you specify ng-route(step-2) and the same time include angular.js(step-1) . This means that what location or what URL, what views are available and those views are really supposed to be linked with controllers.

Let consider the sample routing code:

From above we use $routeProvider and with that we are specify the location that is the URl. That is if client saty that this URL then we have to go to msg.htm in order to fetch the content and once it fetch the content it has linked to a particular controller called message and once both the msg.htm and controller are renderd you are getting view out of it and that view will be made available through ng-view.

<div ng-view>

 </div>

  This is the place where you are going to inject your content what you are going to receive from the url.

answered Feb 6, 2020 by Niroj
• 82,840 points

Related Questions In Angular

0 votes
1 answer
0 votes
1 answer
0 votes
1 answer

What is the service that is used to configure the UI-Router and ngRoute in AngularJs?

Routing comes into play whenever you want ...READ MORE

answered Feb 11, 2020 in Angular by anonymous
• 82,840 points
557 views
0 votes
1 answer

What are the features supported in UI-Router Parameters?

UI-Route describes how the UI looks like ...READ MORE

answered Feb 11, 2020 in Angular by Niroj
• 82,840 points
835 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 1,153 views
+1 vote
1 answer

What is css box module?

Hey, All the element present in html follows ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 1,211 views
0 votes
3 answers

Explain the difference between visibility:hidden; and display:none?

display:none means that the tag in question will ...READ MORE

answered Dec 14, 2020 in Web Development by Gitika
• 65,770 points
119,715 views
+1 vote
1 answer

How to access the Angularjs scope of a particular html element from our console?

Hello, You should follow the below steps:-- 1.Compile and ...READ MORE

answered Jan 21, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 2,983 views
0 votes
1 answer

What are the $route service Events provide in AngularJs?

hey, $route is used for deep-linking URLs to controllers ...READ MORE

answered Feb 10, 2020 in Angular by Niroj
• 82,840 points
1,067 views
0 votes
1 answer
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP