DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Ajitesh is passionate about various different technologies including programming languages such as Java/JEE, Javascript, PHP, .NET, C/C++, SCALA, mobile programming languages etc and, computing fundamentals such as application security, cloud computing, API, mobile apps, google glass, big data etc. Currently, he is exploring different Javascript frameworks including AngularJS and the likes. He is also focusing on Big Data, especially, data science aspect of Big Data. He is working as a Principal Architect with Evoke technologies based out of Hyderabad, India. Ajitesh is a DZone MVB and is not an employee of DZone and has posted 49 posts at DZone. You can read more from them at their website. View Full User Profile

AngularJS Bootstrap Single Page App Template

  • submit to reddit
<!DOCTYPE html>
<html ng-app="ngSpApp">
  <title>Single Page App Template</title>
  <link rel="stylesheet" href="">
  <div class="container">
		<table style="width:100%;margin:10px">
				<td style="width: 15%;vertical-align: top;">
					<div class="list-group" style="margin-top:20px" >
						<a href="#/" class="list-group-item active">Home</a> 
						<a href="#/link1" class="list-group-item">Link 1</a> 
				<td style="vertical-align: top;padding-left:10px;">
					<div ng-view></div>
  <script src=""></script>
  <script src=""></script>
    // Defining Module
    var spApp = angular.module( "ngSpApp", ['ngRoute'] );
    // Defining Routes
    spApp.config(function($routeProvider) {
    	$routeProvider.when('/link1', {
    		controller : 'Link1Ctrl',
    		templateUrl : 'views/link1.html'
    		controller : 'HomeCtrl',
    		templateUrl: 'views/home.html'
    // Controller for Home Page
    spApp.controller( "HomeCtrl", [ '$scope', function($scope) {
      $scope.text = 'Hello, this is homepage';
    // Controller for Link1 Page
    spApp.controller( "Link1Ctrl", [ '$scope', function($scope) {
      $scope.text = 'Hello, this is link1 page';

The code snippet allows one to get started with single page app using AngularJS and Bootstrap in no time.

Following are key things to note:

  • Routes defined for different views (pages)
  • The code snippet is for the main page, say index.html, where ng-view directive is placed in order to load different views
  • Separate HTML page representing different views; Create a folder called as views in the same folder as index.html and create two files named as home.html and link1.html.
  • Unique controllers (HomeCtrl, Link1Ctrl) defined for each view (page)


Adolfo Benedetti replied on Sun, 2014/08/24 - 4:29am

Why to reinvent (and maintain) the wheel? better use yeoman with the angular generator

Gordon Steven replied on Wed, 2014/08/20 - 10:40pm

 This is the future. I am having a hard time learning this. - C Frederick Wehba