Sunday, January 18, 2015

Mixing in the View

Now that we have the controller in place, we now are going to bring in the view.  In addition to the Bootstrap panel from an earlier post, we use:
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).

HTML
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!-- 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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 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)
?
1
2
3
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)