Simple AngularJS Routing

Posted by LaravelIndia - 4 years ago

What is Routing in AngularJS?

If you want to navigate to different pages in your application, but you also want the application to be a SPA (Single Page Application), with no page reloading, you can use the ngRoute module.

<!DOCTYPE html>
<script src=""></script>
<script src=""></script>

<body ng-app="exampleApp">

<p><a href="#/!">Main</a></p>

<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>

<div ng-view></div>

var app = angular.module("exampleApp", ["ngRoute"]);
app.config(function($routeProvider) {
    .when("/", {
        templateUrl : "main.htm"
    .when("/red", {
        templateUrl : "red.htm"
    .when("/green", {
        templateUrl : "green.htm"
    .when("/blue", {
        templateUrl : "blue.htm"

<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>