Categories: JavascriptUI

AngularJS Bootstrap Single Page App Template – Code Sample

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]

Author
Recent Posts

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.