- Buttons: <http://getbootstrap.com/css/#buttons>
- List Group <http://getbootstrap.com/components/#list-group>
- Gyphicons <http://getbootstrap.com/components/#glyphicons>
Like the previous example in JSFIDDLE, we will use the version of Angular.js provided by a Google CDN
<//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js> by adding it to the "External Resources". Likewise will be using a Google CDN version of ngRoute <//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-route.min.js>.
We also need to bring back in Bootstrap 3.2.0; in JSFIDDLE select jQuery 2.1.0 (or greater) in the Frameworks & Extensions and then select Bootstrap 3.2.0.
note: Actually, jQuery 2.1.0 is not necessary for this application (but included it because it is the easiest way of adding Bootstrap in JSFIDDLE).
note: It is important to set the place the JavaScript included in the HTML as "No wrap - in <head>".
For the remaining posts in this blog, we will be building onto this example (so one needs to save this example in JSFIDDLE).
note: It is important to set the place the JavaScript included in the HTML as "No wrap - in <head>".
For the remaining posts in this blog, we will be building onto this example (so one needs to save this example in JSFIDDLE).
<!-- index.html -->
<!-- normally files are stored in separate files; need to src js
<script src="controllers/my_controllers.js"></script>
<script src="app.js"></script>
<script src="routes/routes.js"></script>
-->
<div ng-app="myApp">
<div ng-view></div>
<!-- /views/home.html (obmit work-around script tag)-->
<script type="text/ng-template" id="views/home.html">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Home</h3>
</div>
<ul class="list-group">
<li ng-click="navigate('/wineries');" class="list-group-item">Wineries</li>
<li ng-click="navigate('/wines');" class="list-group-item">Wines</li>
</ul>
</div>
</script>
<!-- EOF -->
<!-- /views/wineries.html (obmit work-around script tag)-->
<script type="text/ng-template" id="views/wineries.html">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><button ng-click="navigate('/');" class="btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span> Back</button> Wineries</h3>
</div>
<ul class="list-group">
</ul>
</div>
</script>
<!-- EOF -->
<!-- /views/wines.html (obmit work-around script tag) -->
<script type="text/ng-template" id="views/wines.html">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><button ng-click="navigate('/');" class="btn btn-default"><span class="glyphicon glyphicon-chevron-left"></span> Back</button> Wines</h3>
</div>
<ul class="list-group">
</ul>
</div>
</script>
<!-- EOF -->
</div>
<!-- EOF -->
JavaScript
// controllers/my_controllers.js
var controllers = angular.module('myControllers', []);
controllers.controller('HomeCntrl', ['$scope', '$location', function($scope, $location) {
$scope.navigate = function(path) {
$location.path(path);
};
}]);
controllers.controller('WineriesCntrl', ['$scope', '$location', function($scope, $location) {
$scope.navigate = function(path) {
$location.path(path);
};
}]);
controllers.controller('WinesCntrl', ['$scope', '$location', function($scope, $location) {
$scope.navigate = function(path) {
$location.path(path);
};
}]);
// EOF
// app.js
var myApp = angular.module('myApp', [
'ngRoute',
'myControllers'
]);
// EOF
// routes/routes.js
angular.module('myApp').config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/home.html',
controller: 'HomeCntrl'
}).
when('/wineries', {
templateUrl: 'views/wineries.html',
controller: 'WineriesCntrl'
}).
when('/wines', {
templateUrl: 'views/wines.html',
controller: 'WinesCntrl'
}).
otherwise({
redirectTo: '/'
});
}
]);
// EOF
HTML (in the CSS Section)
</style> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style>
No comments:
Post a Comment