Angularjs route configuration

angularjs route config example
angular ngroute example
angular route example
angular routeprovider example
angularjs routeprovider sample
$routeprovider angularjs
routeprovider angularjs example
angularjs routeprovider multiple when

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss configuring routes and creating controllers. This is continuation to Part 25. Please watch Part 25 from AngularJS tutorial.

var app = angular
.module("Demo", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
controller: "homeController"
})
.when("/courses", {
controller: "coursesController"
})
.when("/students", {
controller: "studentsController"
})
})
.controller("homeController", function ($scope) {
})
.controller("coursesController", function ($scope) {
})
.controller("studentsController", function ($scope, $http) {
.then(function (response) {
})
})

Set ng-app="Demo" on the root html element

Next video : How to remove hash from URL

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

[adolfoajuz]

Great tutorial, if anyone is having a problem with the templates, as a first option I suggest this change: <a href="#!home">home</a> This ! instead of /

[tapan]

Hello guys, The routing working in v 1.6.4 when you use #!/ instead of #/. Hope it will help some of you. edit the HREF after comparing it to the URL. if ! is coming then add an extra ! in the HREF . else use $locationprovider to fix the link.
<div>
<a href="#!/home">white</a>
<a href="#!red">red</a>
<a href="#!/green">green</a>
</div>

[theoryx]

you are very talented. your videos help me too much. I am very thankful to you to organize a very helpful tutorial series. Thanks

[persistencej]

Your Tutorials are so helpful to the beginners ... Thanks a lot

[niravk]

Hi Pragim, I am a great fan of you and same thing I have heard from many guys. It would be very helpful if you explain routing using state at the place of URL. Thanks a lot.

[damienspectre]

i thought you had to include ng-controller directive in the div element inside which you wanted to use that controllers functionality- from your earlier video where you were explaining controllers. but i dont see an ng-controller used here in partial templates. how does the app work ?

[bharathsrinivas]

Thanks for the videos. I did learn a lot going through these videos.

I have an angular web application. It works fine while I am running in VS. However when I publish it and host it in IIS, it doesnt work correctly. The Index.html opens with the Page header, but the rest of the page contents doesnt work.
What could be the issue. are there any guidelines for publishing Angular applications in IIS? How can I troubleshoot issues which are not happening in VS but occurs when I publish? Appreciate your help on this.

[onthewing]

Hi Venkat, thanks for this nice tutorial on AngularJS!!
I have below query:

This route configuration is not working for me if I host the application in IIS.
However, appending the return value of below function prior to the URLs resolves the issue:

function GetVirtualPath() {
var webFolderFullPath = window.location.href.substring(0,
return webFolderFullPath;
}

Do you have any better solution? It will be great if you cover deploying the application with route configuration in any future session.

[herambsharma]

If anyone is facing issue while routing by following this video and anyone whose routing is not working then only change your
<a href="#/home">Home</a><a to <a href="#!home">Home</a><a it will work fine.

[fyndstervishal]

Hey Venkat awesome tutorial series so far. Could you make 1 or 2 tutorial on routing using UI Router and incorporating Id parameter on run time ?
You know like when you change /Id in url, your results would change as per that.

[bharatreddytavva]

Hi Venkat, Thanks a lot for your awesome tutorial, can you please make a video on using ui-router which is the latest Routing module used in all angularJs applications, now a days many people are not using ngRoute. ui-router is sate level routing and has many benefits.

[ymtan]

Hi Venkat, your explanation on the AngularJS route configuration is very comprehensible or lucid. Sir I have already sent emails to you regarding Part 10 - AngularJS sort rows by table header. Kindly please reply to my enquiry in the emails.

[sandeepa]

Hi! I would like to know If I have all the angular JS project set up ready. Can I add routing to my already created angular JS project. And in my Project i have only one controller. Any advice would be really appreciated. Thank you so much. Your videos are really awesome.

[ThumbIKR]

Thank you sir, you make my concept clear :)

[ronaknmodi]

you explained well but i want to know that you gave links home courses students and when you click it then it would displayed in same page but i want to go another page means i want to link it another page... so how it is possible to another page....??

[RCARD]

I've tried following this and as far as I can tell, I have set it up as expected (albeit changing the file names etc). I am using cshtml files, this shouldn't make any difference right?
In the URL, I get back #!/home (v1.6.4) and yet no content shows in the ng-view.

Can anyone help me out please?

[bakrgroningen]

This has been a drama for me. Still the ngroute not working as well as the $routeParams. I have done everything this tut. told me. stil the paramater are undefined. Any tips are welcome.

[arjungupta]

on index.html page, getting error on <ng-view> tag. "validation (xhtml5): element ng-view is not supported". Due to which I am unable to inject students/courses/home html page into index.html page.

what should I do to resolve this issue..?!

[gurungsolta]

Great tutorial. How do we add dropdown on those nav bar

[sathishkomakul]

Hi Venkat it's great learning from you, but I followed steps this but Its not opening home.html I'm using angular version 1.8