AngularJS Routing

AngularJs enables us to build single page applications (SPA) in which you can navigate to different pages of your application dynamically without page reloading.

The "ngRoute" module routes your application to different pages without reloading the entire application.  

Steps for Routing :

1. Include the AngularJS Route module.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>  

   

2. Add the as a dependency in the application module 

var app = angular.module("app", ["ngRoute"]);  

3. Use the $routeProvider to configure different routes in your application

app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "home.htm"
  })
  .when("/services", {
    templateUrl : " services.htm"
  })
  .when("/products", {
    templateUrl : "products.htm"
  })
  .when("/contact", {
    templateUrl : "contact.htm"
  });
});

With $routeProvider, we can define what page to display when user clicks a link without reloading entire page.

4. Add a container for Routing

<div ng-view></div>  

An Application can only have one "ng-view" directive, and this will be the placeholder for all views provided by the route.  

When a user clicks 'services' link, the contents of 'services.htm' will be added to the child of the element where ng-view directive is present.

Click here to read about custom directives.

Deals At Amazon