Tag Archives: spa

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

spa_01

Her it is the index.html page:

<!DOCTYPE html>
<html lang=”en” ng-app=”CsbApp”>
<head>
<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=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script&gt;
<script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script&gt;
<![endif]–>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script&gt;
<script src=”https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular-route.min.js”></script&gt;
<script src=”js/app.js”></script>
</head>
<body>
<div class=”container”>
<div ng-view></div>
</div>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script&gt;
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.js”></script>
</body>
</html>

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″>
<blockquote>
<p><i class=”glyphicon glyphicon-home iconstyle”></i> {{item.address.address1}}, {{item.address.suburb}}, {{item.address.postcode}}, {{item.address.state.name}}, {{item.address.country.name}}</p>
<p><i class=”glyphicon glyphicon-envelope iconstyle”></i> {{item.email}}</p>
<p><i class=”glyphicon glyphicon-phone iconstyle”></i> {{item.phone}}</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>
</blockquote>
</div>
</div>
</div>

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;
$http.defaults.headers.get={“x-device-longitude”:0,”x-device-latitude”:0};

var request = {
method:”GET”,
url:”http://api.muulla.com/app/merchant/all/10/1&#8243;
};

$http(request).success(function(response){
$scope.items=response.data;
}).error(function(errorMessage) {
console.log(errorMessage);
})

}];

Advertisements