×

Html & Html5

The World's best Software Development Study Portal

AngularJS Routing


ngRoute module routes different pages without reloading the entire application.

ngRoute module helps to make a Single Page Application.

step1:Add AngularJS Route module library

step2:we needs a container to put the content provided by the routing.

The container is ng-view

$routeProvider define page to display when a user clicks a link.

lets understand with an example:



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



Routes your application to different pages

<body ng-app="myApp"> <p><a href="#/!">Main</a></p> <a href="#!red">Red</a> <a href="#!green">Green</a> <a href="#!yellow">yellow</a> <div ng-view></div> <script> var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.html" }) .when("/red", templateUrl : "red.html" }) .when("/green", { templateUrl : "green.html" }) .when("/blue", { templateUrl : "yellow.html" }); }); </script> <p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p> </body>

Output

Main

Red Green yellow