Learn the Basic use of Routes in AngularJS

Angular JS-Routes

In this section we learn about Routes in AngularJS Application and how to navigate to multiple views by adding routes. Routes are capable of load multiple view without page refresh, since it is a single page application it load different data from multiple view. In our scenario, we will load about us and contact us view in our main template index.html using routes.

The control flow of routes declared by $RouteProvider.

It is used for configure a Routes.  It is a service provider for Application Routes.
It has following two methods, which can be used to configure a Route Provider.

  • When() : when method contain route, path, and associated controller
  • Otherwise () : to set route definition, when route definition not matches.

Configuring a Route Provider
Following is an example of configuring route provider for an Application. In this section I have made app with name of Eduonixapp. I will route two view aboutUS and ContactUS using route provider.

Creating App
TO better understanding of routes, let’s create our application with name Eduonix.

Example (Index.html)

Main.JS (Configuring route)



Our main page index.html now configure with route, you can see in following route is matching by #symbol in index.html .


Hence we have learnt the basic use of Routes in AngularJS.


Please enter your comment!
Please enter your name here