AngularJS Bootstrap Single Page App Template – Code Sample

July 29, 2014 by Ajitesh Kumar · Leave a comment
The article presents take-away code sample for quickly getting started with single page app using AngularJS and Bootstrap.

 

For detailed instructions, we recommend you to take a look at some of the following blogs we wrote earlier:

 

 

Following are key things to note:

  • Routes defined for different views (pages)
  • Container page where ng-view directive is placed in order to load different views
  • Separate HTML page representing different views
  • Unique controllers defined for each view (page)

 

Container Page

Copy and paste the code below in a new file and give a name to the file, may be, index.html.

 

<!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>

 

Inner Pages

As per the routes configuration, create a folder, “views” within the same folder where you saved the container page, index.html and create following two files:

home.html

 

<div>
  <div class="page-header" style="margin-top:0">
    <h1>Welcome, Home Page</h1>
  </div>
  <div>
    {{text}}
  </div>
</div>

link1.html

 

<div>
  <div class="page-header" style="margin-top:0">
    <h1>Welcome, Link1 Page</h1>
  </div>
  <div>
    {{text}}
  </div>
</div>

 

Conclusion

That is it. You are done. Open the index.html in the web browser (Chrome/Firefox) and test your single page app.

[adsenseyu1]

Ajitesh Kumar
Latest posts by Ajitesh Kumar (see all)

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.
Posted in Javascript, UI. Tagged with , .