After the AngularJS Tutorial (Style Guide)

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">
                <h3 class="panel-title">Home</h3>
            </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">
                 <h3 class="panel-title"><button class="btn btn-default" ng-click="login.navigate('/')"><span class="glyphicon glyphicon-chevron-left"></span> Back</button> Login</h3>                
            </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" placeholder="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'  
])
.config(['$routeProvider',    
    function($routeProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'partials/home.html',
                controller: 'HomeCntrl',
                controllerAs: 'home'
            }).
            when('/login', {
                templateUrl: 'partials/login.html',
       	        controller: 'LoginCntrl',
                controllerAs: 'login'
            }).
            when('/wineries', {
                 templateUrl: 'partials/wineries.html',
                 controller: 'WineriesCntrl',
                 controllerAs: 'wineries'
            }).
            when('/wines', {
                templateUrl: 'partials/wines.html',
                controller: 'WinesCntrl',
                controllerAs: 'wines'
            }).
            otherwise({
                redirectTo: '/'
            });
    }
]);
})();
// EOF

// app/controllers/homeCtrl.js
(function() {
angular.module('myApp')
.controller('HomeCntrl', ['$location', '$window', function($location, $window) {
    var ctrl = this;
    var myDataRef;
    ctrl.navigate = function(path) {
        $location.path(path);
    };
    ctrl.authenticated = false;
    myDataRef = new $window.Firebase('https://wineapp.firebaseio.com');
    ctrl.logout = function() {
        ctrl.authenticated = false;
        myDataRef.unauth();
    };
    var authData = myDataRef.getAuth();
	if (authData != null) {
        ctrl.authenticated = true;
    }
}]);
})();
// EOF

// app/controllers/loginCtrl.js
(function() {
angular.module('myApp')
.controller('LoginCntrl', ['$location', '$timeout', '$window', function($location, $timeout, $window) {
    var ctrl = this;
    var myDataRef;
    ctrl.navigate = function(path) {
        $location.path(path);
    };
    ctrl.failed = false;
    myDataRef = new $window.Firebase('https://wineapp.firebaseio.com');
    ctrl.login = function() {
       ...