After the AngularJS Tutorial (Two Style Guides)

by John Tucker

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-route.min.js"></script>
<script src="//cdn.firebase.com/js/client/2.0.6/firebase.js"></script>
<!-- index.html -->
<div ng-app="myApp">
   <div ng-view></div>
    
    <!-- partials/home.html (obmit work-around script tag)-->
    <script type="text/ng-template" id="partials/home.html">
        <div class="panel panel-default" ng-cloak>
            <div class="panel-heading" 
				ng-attr-screen-heading 
				ng-attr-center-name="Home"
			>
			</div>
            <ul class="list-group">
                <li ng-if="! home.authenticated" ng-click="home.navigate('/login')" class="list-group-item">Login</li>
                <li ng-if="home.authenticated" ng-click="home.logout()" class="list-group-item">Logout</li>
                <li class="list-group-item" ng-click="home.navigate('/wineries')">Wineries</li>
                <li class="list-group-item" ng-click="home.navigate('/wines')">Wines</li>
            </ul>
        </div>
    </script>
    <!-- EOF -->
    
    <!-- partials/login.html (obmit work-around script tag)-->
    <script type="text/ng-template" id="partials/login.html">      
        <div class="panel panel-default" ng-cloak>
            <div class="panel-heading" 
				ng-attr-screen-heading 
				ng-attr-center-name="Login"
                ng-attr-left-name="back"
                ng-attr-left-icon="glyphicon-chevron-left"
                ng-attr-left-function="login.navigate('/')"
			>
            </div>
            <div class="panel-body">
                <form name="login_form" role="form" novalidate>
                    <div ng-class="{'form-group': true, 'has-feedback': true, 'has-error': login_form.email.$invalid}">
                        <label class="control-label" for="email">Email</label>
                        <input type="email" name="email" class="form-control" id="email"...

CSS

</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>

JavaScript

// app/app.js
(function() {
angular.module('myApp', [
    'ngRoute'  
]);
angular.module('myApp')
    .config(routes);
angular.module('myApp')
    .run(routesErrorHandler);
resolveWineries.$inject = ['Firebase', 'myFirebase'];    
function resolveWineries(Firebase, myFirebase) {
    var myDataRef = new Firebase('https://wineapp.firebaseio.com');    
    return myFirebase.onceValuePromise(myDataRef.child('wineries'));
}
routes.$inject = ['$routeProvider'];        
function routes($routeProvider) {
    $routeProvider.
            when('/', {
                templateUrl: 'partials/home.html',
                controller: 'HomeCtrl',
                controllerAs: 'home'
            }).
            when('/login', {
                templateUrl: 'partials/login.html',
       	        controller: 'LoginCtrl',
                controllerAs: 'login'
            }).
            when('/wineries', {
                templateUrl: 'partials/wineries.html',
                controller: 'WineriesCtrl',
                controllerAs: 'wineries',
                resolve: {
                    snapshot: resolveWineries
                }
            }).
            when('/wines', {
                templateUrl: 'partials/wines.html',
                controller: 'WinesCtrl',
                controllerAs: 'wines'
            }).
            when('/error', {
                templateUrl: 'partials/error.html',
                controller: 'ErrorCtrl',
                controllerAs: 'error'
            }).    
            otherwise({
                redirectTo: '/'
            });
}
routesErrorHandler.$inject = ['$location','$rootScope'];    
function routesErrorHandler($location, $rootScope) {
    $rootScope.$on('$routeChangeError', function() {
        $location.path('/error');
    });
}                   
})();
// EOF

// app/services/constants.js
/**
    * @ngdoc service
    * @name Firebase
    * @description
    *
    * 'Firebase' is a reference to the global variable Firebase. 
...