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 41 posts at DZone. You can read more from them at their website. View Full User Profile

AngularJS Bootstrap Single Page App Template

07.29.2014
| 4835 views |
  • submit to reddit
<!DOCTYPE html>
<html ng-app="ngSpApp">
<head>
  <title>Single Page App Template</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
		<table style="width:100%;margin:10px">
			<tr>
				<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> 
					</div>
				</td>
				<td style="vertical-align: top;padding-left:10px;">
					<div ng-view></div>
				</td>
			</tr>
		</table>
	</div>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-route.js"></script>
  <script>
    // 
    // Defining Module
    //
    var spApp = angular.module( "ngSpApp", ['ngRoute'] );
    //
    // Defining Routes
    //
    spApp.config(function($routeProvider) {
    	$routeProvider.when('/link1', {
    		controller : 'Link1Ctrl',
    		templateUrl : 'views/link1.html'
    	}).otherwise({
    		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';
    }]);
  </script>
</body>
</html>

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)


Comments

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

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

http://yeoman.io

https://github.com/yeoman/generator-angular


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

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