Creating a Simple AngularJS Application with ngRoute and Partials

Video

This tutorial is explained in the below Youtube Video.

Overview

In this chapter we will create an AngularJS Application with Partials Views and ngRoute. AngularJS builds single page web applications. It creates web application where we have only one HTML page whose content can be changed in Javascript without having to download a new page. The new content is created programmatically in Javascript of with the use of templates. Have not used any css for this example

Lets Begin

Create a simple maven project as specified in Spring MVC Config chapter. Dont add any spring dependency in the created pom file.
Only add the build plugins required for maven and tomcat configurations. We will create Eclipse Maven project as follows-
angular-1-1

Our pom.xml file is as follows-

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.javainuse</groupId>
	<artifactId>angular-hashbang</artifactId>
	<packaging>war</packaging>
	<version>0.0.1-SNAPSHOT</version>
	<name>angular-hashbang Maven Webapp</name>
	<url>http://maven.apache.org</url>
	<dependencies>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>3.8.1</version>
			<scope>test</scope>
		</dependency>
	</dependencies>
	<build>
		<finalName>angular-hashbang</finalName>
		<plugins>
			<plugin>
				<groupId>org.apache.tomcat.maven</groupId>
				<artifactId>tomcat7-maven-plugin</artifactId>
				<version>2.2</version>
			</plugin>
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.4</version>
			</plugin>
		</plugins>
	</build>
</project>

In the scripts folder angular.min.js and angular-route.min.js are the AngularJS Script files downloaded from the https://AngularJS.org/ site.
We will create the script.js as follows-

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

app.config(function($routeProvider,$locationProvider) {
			$routeProvider
			.when("/about", {
				templateUrl : "Templates/about.html"
			})
			.when("/contact", {
				templateUrl : "Templates/contact.html"
			})
		});

Here angular.module defines a new module named blog. The module is a container for the different parts of an application like controllers. We use this module to bootstrap the index.html

Next we create the index.html page as follows. This will be the single main html page which will be used to dynamically load the content of other html templates

<!DOCTYPE html>
<html ng-app="blog">
<head>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
	<table style="font-family: Arial">
		<tr>
			<td class="menu">
			<a href="#/about">About</a><br>
			<a href="#/contact">Contact</a></td>
			<td class="content">
			<div ng-view></div>
			</td>
		</tr>
	</table>
</body>
</html>

Here we have used
<html ng-app="blog">- AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. It automatically initializes or bootstraps an AngularJS application. Here we are bootstrapping our AngularJS app with the blog app we created in script.js.
div ng-view- This AngularJS directive is the place where the partials get loaded dynamically.

Create the about.html in Templates folder. This is the template to be loaded in partial view.

This Site has been developed to help programmers learn and share knowledge. 
Efforts have been taken to attach screen shot and provide Hands on implementation Details. Any feedback is welcome. Hope it helps people learn.

Create the contact.html in Templates folder. This is the template to be loaded in partial view.

You can contact us at javainuse@gmail.com.

Now run the Maven commands-
clean install
tomcat:run

Open the Browser and go to http://localhost:8080/angular-hashbang.
angular-1-2

If we click the about It will open the page as below-
angular-1-3

If we click the contact
angular-1-4

Download Source Code

Download it - AngularJS Partials

Search Tutorials

Creating a Simple AngularJS Application with ngRoute and Partials

Popular Posts

See Also