AngularJS Tutorial

Define AngularJS

Download AngularJS

AngularJS Expression

AngularJS vs Javascript

AngularJS Directives

AngularJS Module

AngularJS Controller

Custom Directive

AngularJS Scope

AngularJS Validation

AngularJS Filter

AngularJS SelectBox

AngularJS Directive

AngularJS Services

AngularJS Directives

AngularJS Routing

Interview Questions

Angular Routing

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.

<body ng-app="myApp">

<a href="#!main">Home</a>
<a href="#!about">About</a>
<a href="#!contact">Contact</a>

<div ng-view></div>

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    .when("/main", {
        templateUrl : "main.html"
    .when("/about", {
        templateUrl : "about.html"
    .when("/contact", {
        templateUrl : "contact.html"

Note: To make your applications ready for routing, you must include the AngularJS Route module:
1. Download from Angular site. Download
2. Use CDN <script src=""></script>

There are three different ways to include the ng-view directive in your application:

1. <div ng-view></div>

2. <ng-view></ng-view>

3. <div class="ng-view"></div>

Note: Applications can only have one ng-view directive

Last Updated: 14-July-2018