Bootstrap based responsive template that uses the Angularjs framework for loading pages and Requirejs for dependency management.
Hot on the heels of our first Angularjs based template we've created two more that will hopefully help you get going quickly on Angularjs and Bootstrap. They are is based on this fantastic seed project we found on Github by Matthew Odette, which has everything pre-wired for using Angualrjs with Requirejs. It also utilises the Angular-ui Bootstrap project, so you do not need to use jQuery or the bootstrap.js that relies on jQuery.
Requirejs is based around an AMD API, more information on AMD can be found here. The seed package includes an AMD file that has the necessary dependencies pre-configured. The file works and if no further libraries are required, you can simply add Angular controllers and services to complete your project.
One good reason to use Requirejs is your html file is cleaned up of all references to Javascript libraries. A single script reference is needed to call Requirejs which subsequently loads the other libraries.
bootzee.com beta
<script data-main="/js/AMD" src="//cdnjs.cloudflare.com/ajax/libs/require.min.js"></script>Within the AMD.js file the dependencies are defined together with where to load the files, you can also define fall back locations, we have taken this out for simplicity but you can go back to the original seed project on Github to see example of this.
require.config({
baseUrl: 'js',
paths: {
jquery : 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min',
angular : 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min',
ngAnimate : 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min',
ngCookies : 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-cookies.min',
ngResource : 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-resource.min',
ngRoute : 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-route.min',
ngSanitize : 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-sanitize.min',
ngTouch : 'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-touch.min',
ngBootstrap : 'http://bootzee.com/js/ui-bootstrap-tpls-0.11.2',
app: 'app',
},
shim: {
jquery: { exports: '$'},
angular: { exports: 'angular', },
ngAnimate: { exports: 'ngAnimate', deps: ['angular'] },
ngCookies: { exports: 'ngCookies', deps: ['angular'] },
ngResource: { exports: 'ngResource', deps: ['angular'] },
ngRoute: { exports: 'ngRoute', deps: ['angular'] },
ngSanitize: { exports: 'ngSanitize', deps: ['angular'] },
ngTouch: { exports: 'ngTouch', deps: ['angular'] },
ngBootstrap: { exports: 'ngBootstrap', deps: ['angular'] }
}
});Once you have the dependencies configured, you wire up the app by adding them to the configuration.
require(
[
// Dependencies from lib
'angular',
'ngRoute',
'ngBootstrap',
'ngSanitize',
// Angular directives/controllers/services
'app',
'viewHomeController',
'commonRoutes',
'header'
],
function (angular) {
var AppRoot = angular.element(document.getElementById('ng-app'));
AppRoot.attr('ng-controller','AppCtrl');
angular.bootstrap(document, ['TheApp']);
}
);It is good practice to keep different functional requirements in separate files, and in the seed example you can see app.js, viewHomeController.js, commonRoutes.js and header.js all sets up different Angular functions, Requirejs allows you to easily create new ones and add them in. Just enter the file name without the .js extension.
app.js also configures the main Angular app within this project with the basic dependencies.
define(['angular'], function (angular) {
angular.module('HashBangURLs', ['ngRoute']).config(['$locationProvider', function($location) {
$location.hashPrefix('!');
}]);
angular.module('HTML5ModeURLs', ['ngRoute']).config(['$locationProvider', function($location) {
$location.html5Mode(true);
}]);
// Choose to inject either HashBangs or HTML5 mode, your preference.
var TheApp = angular.module('TheApp', ['HashBangURLs', 'ui.bootstrap', 'ngSanitize'], function ($routeProvider, $locationProvider, $httpProvider) {
});
TheApp.controller("AppCtrl", function ($scope, $log, $q, $timeout) {
console.log("AppCtrl working");
});
return TheApp;
});This is the viewHomeController.js to show how new controllers and directives can be easily added.
define(['angular', 'app'], function (angular, app) {
return app.controller("ViewHomeController", function ($scope) {
console.log('ViewHomeController working');
});
});With all the javascript dependencies removed and using Angular to pull in a common header and the page contents, we are left with a minimal starting html file.
<!doctype html>
<html lang="en" id="ng-app" data-framework="angularjs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>AngularJS RequireJS Bootstrap Seed</title>
<!-- <link rel="icon" type="image/x-icon" href=""> -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="/css/app.css" />
</head>
<body>
<common-header></common-header>
<ng-view></ng-view>
<script data-main="/js/AMD" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>
</body>
</html> You can try this seed template here, either just preview it or try it on the bootzee.com platform, it's totally free to use.
The seed template has the absolute minimal to get you going, however we've created a second more extensive template, with multiple pages, site navigation and other bootstrap example components. This also demonstrates how a simple template can be tweaked into something more comprehensive by adding extra components.
Furthermore, this template also showcases one of our recently released functions on the bootzee.com platform - the ability to create and easily edit json files and have them serve dynamic content to the pages. This kind of functionality cannot replace a full database, but when used with Angularjs you can easily put together prototypes with some dynamic content or brochure sites with limited and read-mostly data.
Preview Template Try now, it's Free!
Update : following feedback on Reddit from aikah, brtt300 and Capaj suggesting RequireJS adds unnecessary complexity, we've created another template that functions the same but without Requirejs, currently the Angularjs stuff is all in one single file, we will look at a way allowing multiple files to be automatically concatenated. This demonstrate what bootzee.com is about, we want you to use it as a playground to try out different templates and frameworks, easily on-line without the need to create a local development environment. The new template can be found here...
Preview Template Try now, it's Free!
With the bootzee.com platform you can start a site by getting a complete copy of a template with all the files preconfigured to work. The platform is totally free to use. All you have to do is substitute the content and images then tweak the css to get the look and feel you are looking for.