Learn the Basic use of Routes in AngularJS

0
2030
Angular JS-Routes

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.
The control flow of routes declared by $RouteProvider.

$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)

Aboutus.HTML

Contactus.html

Output
Our main page index.html now configure with route, you can see in following route is matching by #symbol in index.html .
Ouput
Ouput2
Ouput2
Hence we have learnt the basic use of Routes in AngularJS.

LEAVE A REPLY

Please enter your comment!
Please enter your name here