build one page app by using bootstrap working with angular.js from begginng–Part2

Since sombody is intrested in this topic, I am going to finish it now.

here it is the structure of your folder


Her it is the index.html page:

<!DOCTYPE html>
<html lang=”en” ng-app=”CsbApp”>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>AngularJS Tutorial CSB Test App</title>

<!– Bootstrap –>
<link href=”css/bootstrap.css” rel=”stylesheet”>
<link href=”css/site.css” rel=”stylesheet”>

<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=””></script&gt;
<script src=””></script&gt;
<script src=””></script&gt;
<script src=””></script&gt;
<script src=”js/app.js”></script>
<div class=”container”>
<div ng-view></div>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=””></script&gt;
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.js”></script>

then the list.html page is the patrial page will dynamic generate into the ng-view div holder:

<div class=”col-sm-6 col-md-6″ ng-repeat=”item in items” id=”{{item._id}}”>
<div class=”row”>
<div class=”col-sm-3 col-md-3″><img src=”{{item.logo.path_to_file}}” alt=”{{item.display_name}}” class=”img-responsive”></div>
<div class=”col-sm-9 col-md-9″>
<p><i class=”glyphicon glyphicon-home iconstyle”></i> {{item.address.address1}}, {{item.address.suburb}}, {{item.address.postcode}}, {{}}, {{}}</p>
<p><i class=”glyphicon glyphicon-envelope iconstyle”></i> {{}}</p>
<p><i class=”glyphicon glyphicon-phone iconstyle”></i> {{}}</p>
<p><i ng-show=”item.status==’active'” class=”glyphicon glyphicon-ok iconstyle”></i><i ng-show=”item.status!=’active'” class=”glyphicon glyphicon-remove iconstyle”></i> {{item.status}}</p>

Last part is you module

var module = angular.module(“CsbApp”, [“ngRoute”]);

module.config(function ($routeProvider) {
$routeProvider.when(“/”, {
controller: “listsController”,
templateUrl: “list.html”

$routeProvider.otherwise({ redirectTo: “/” });

var listsController = [“$scope”, “$http”, function ($scope, $http) {
var self = this;

var request = {

}).error(function(errorMessage) {



One thought on “build one page app by using bootstrap working with angular.js from begginng–Part2”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s