Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

AngularJS routing tutorial

Suggested Videos
Part 20 - Create custom service in AngularJS
Part 21 - AngularJS anchorscroll example
Part 22 - Angular anchorscroll with database data

In this video and in the next few upcoming videos we will discuss routing in Angular. Let's understand routing with an example.

In general, as the application becomes complex you will have more than one view in the application. Let's say you are building a single page application for a training institute and you have the following views
 - Home
 - Courses
 - Students

We can take advantage of the Angular routing feature, to have a single layout page, and then inject and swap out different views depending on the URL the end user has requested.

So in our application we will have the following views
AngularJS routing tutorial

index.html is the layout view
home.html, courses.html & students.html will be injected into the layout view(index.html) depending on the URL the end user has requested

For example, if the user has requested http://localhost:51983/home, then home.html will be injected into the layout view (index.html). Similarly if the user has requested http://localhost:51983/courses, then courses.html will be injected into the layout view (index.html).

Preparing the angular application application to use routing : The AngularJS Route module is present in a separate JavaScript file. You can either download it from and use it in the application or you can use the CDN link.

In our next video, we will discuss creating the main layout view.

AngularJS tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.