Create A Single Page Application Using Templates With Angularjs And Bootstrap

1. Abstract
2. Getting started.
3. The HTML
4. Configuration and Routes
5. The Views
6. Summary

Abstact

With growth of the mobile platform, single page applications have gained a greater popularity.

Mobile and tablet sites benefit most from the single page application, and with the use of responsive frameworks such as bootstrap, a single site can be created to service all browser sizes.

This tutorial will use AngualarJS and Bootstrap to create a single page application without page refresh for display of different data by using templates.

Getting Started

Create a directory in the web tree to hold the application. The create a directory named app and a directory named templates.

The app directory will hold the angularJS content, whilst the templates directory will hold the templates for various pages.

As with many libraries, AngularJS and Bootstrap are available via CDN, so there is no need to download these libraries. Of course, feel free to download them and use them locally if yo like.

The HTML

In this tutorial, a simple main index.html template is created as the basis or, layout, of the application. It is into this file that the child templates will be injected with AngularJS.

For those familiar with Bootstrap, the markup will be quickly recognisable

The above template contains two major inclusions. first the html definition at the top of the file shows that this an AngularJS application and is named phpro.

The next major inclusion is the ng-view div. This is the div where templates and the contents will be injected.

Configuration, Routes and Views

AngularJS has made the job of configuration, routing and assigning templates quite simple. A routeProvider does the heavy lifting and the configuration and template views can be specified per route, making life quite sleek for our application.

In the app directory, create a file named app.js and put in the following content

// create the module and name it phpro
// also include ngRoute for all our routing needs
var phpro = angular.module('phpro', ['ngRoute']);

// configure our routes
phpro.config(function($routeProvider) {

$routeProvider
        // route for the index page
        .when('/', {
                templateUrl : 'templates/index.html',
                controller  : 'mainCtrl'
        })

        // route for the FAQ page
        .when('/faq', {
        templateUrl : 'templates/faq.html',
        controller  : 'faqCtrl'
        })

        // route for the contact page
        .when('/contact', {
                templateUrl : 'templates/contact.html',
                controller  : 'contactCtrl'
        });
});

// create the controller and inject Angular's $scope
phpro.controller('mainCtrl', function($scope) {
        // create a message to display in our view
        $scope.heading = 'Welcome to PHPRO.ORG';
        $scope.message = 'Here you will find the meaning of life.';
});

phpro.controller('faqCtrl', function($scope) {
        $scope.heading = 'PHPRO.ORG FAQ';
        $scope.message = 'This is where you will find the accumulated knowledge of the world.';
});

phpro.controller('contactCtrl', function($scope) {
        $scope.heading = 'Contact PHPRO.ORG';
        $scope.message = 'Contact Kevin Waterson:';
});

Stepping through the above file, the angular module name phpro is created (this refers to the phpro declaration at the to of the index.html file) and includes the ngRoute package. this will enable us access to the routing features. Without it, and errors will occur.

Next, the config option contains a function named routeProvider that defines what will happen when various routes are accessed. Each route contains the url to the template for that particular route, and which controller will take charge of handling the process.

At the bottom, three controllers are defined, which will correspond to a route. In the controller, information can be gained from sources, and injected into the templates. In this instance, two simple variables are created, and can then be used in the template files.

The Views

The view files are simply the template files. Here, three view files are created, one for each of the routes specified in the app/app.js file. The views themselves continue the Bootstrap markup and contain the template language variables {{heading}} and {{message}} which contain the data specified in their respective controllers.

templates/index.html

templates/faq.html

templates/contact.html

Summary

We can see above, the simple way that AngularJS can be used as an MVC application. Each page now has its own content with a browser refresh. The give greater scalability due to limiting bandwidth. With this application complete, you can now expand on the pages and add you own, and more style to build a robust application.