Untitled

<!DOCTYPE html>
<html ng-app="BrentonApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Just a lame style to showcase save within tabular view -->


<title>Brent's AngularJS Demo</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
                            <!-- Needed reference for ngRoute -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular-route.min.js"></script>
                            <!-- Needed references for css and responsive design -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 <!-- The below script reference version does not work with this angularjs implementation -->
 <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>-->

<script type="text/javascript">
    //Used for records / faking identity-like pid
    var uid = 1;

    //Your localhost route to match up with endpoints
    var homeRoute = 'http://localhost:8080'

    //Define an angular module for our app
    var myApp = angular.module('BrentonApp', ['ngRoute']);


//Define Routing for app
//Uri /EmbeddedPartialView -> template EmbeddedPartialView.html and Controller PartialController
//Uri /ShowContacts -> template ShowContacts.html and Controller ContactController

    myApp.config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/AddNewOrder', {
            templateUrl: 'AddFakeHtmlPageHere',
            controller: 'PartialController'
        });
        /*when('/ShowOrders', {
            templateUrl: 'templates/show_orders.html',
            controller: 'ShowOrdersController'
        }).
        otherwise({
            redirectTo: '/AddNewOrder'
        }); */
    }]);

    myApp.controller('PartialController', function($scope) {

        $scope.message = 'This is PartialView for Contact';

    });


    myApp.controller('ContactController', ['$scope', function($scope) {

        $scope.contacts = [{
            id:0, 'name': 'Brenton Bates',
            'email':'brentonbates@gmail.com',
            'phone': '614-999-9999'
        }];

        $scope.saveContact = function() {
            //if this is new contact, add it in contacts array
            if($scope.newcontact.id == null) {
                $scope.newcontact.id = uid++;
                $scope.contacts.push($scope.newcontact);
            } else {
            //For an existing contact, find by contact id
            //and update it.
                for(i in $scope.contacts) {
                    if($scope.contacts[i].id == $scope.newcontact.id) {
                    $scope.contacts[i] = $scope.newcontact;
                    }
                }
            }

            //clear the add contact form
            $scope.newcontact = {};
        }

        $scope.delete = function(id) {

            //search for contact by id and delete it
            for(i in $scope.contacts) {
                if($scope.contacts[i].id == id) {
                    $scope.contacts.splice(i,1);
                    $scope.newcontact = {};
                }
            }
        }

        $scope.edit = function(id) {
        //search for contact by id and update it
            for(i in $scope.contacts) {
                if($scope.contacts[i].id == id) {
                    //we use angular.copy() method to create
                    //copy of original object
                    $scope.newcontact = angular.copy($scope.contacts[i]);
                }
            }
        }
    }]);
</script>

</head>
    <body>
        <div class="container-fluid" ng-controller="ContactController">
            <form class="form-inline" role="form">
            <div class="form-group">
                <label class="sr-only" for="nameInput"><strong>Name:</strong></label>
                    <input id="nameInput" class="form-control" type="text" name="name" ng-model="newcontact.name" placeholder="Enter Name"/>
                    <br/><br/>
                <label class="sr-only" for="emailInput"><strong>Email:</strong></label>
                    <input class="form-control" type="text" name="email" ng-model="newcontact.email" placeholder="YourEmail@example.com"/>
                    <br/><br/>
                <label class="sr-only" for="phoneInput"><strong>Phone:</strong></label>
                    <input class="form-control" type="text" name="phone" ng-model="newcontact.phone" placeholder="Enter Phone Number"/>
                    <br/><br/>
                    <input class="form-control" type="hidden" ng-model="newcontact.id" />
                    <br/>
                    <input class="btn btn-primary form-control" type="button" value="Save" ng-click="saveContact()" />
            </div>
            </form>
            <br/>
            <table class="table table-hover table-bordered table-condensed table-striped" width="300px">
                <thead>
                <tr>
                    <th class="active">Name</th>
                    <th class="success">Email</th>
                    <th class="warning">Phone</th>
                    <th class="danger">Action</th>
                </tr>
                </thead>
                    <tbody>
                        <tr ng-repeat="contact in contacts">
                            <td>{{ contact.name }}</td>
                            <td>{{ contact.email }}</td>
                            <td>{{ contact.phone }}</td>
                            <td>
                                <a href="#" ng-click="edit(contact.id)">edit</a> |
                                <a href="#" ng-click="delete(contact.id)">delete</a> |
                                <a href="#" ng-click="addEvent/ControllerCallByScope">view</a>
                            </td>
                        </tr>
                    </tbody>
            </table>
        </div>
    </body>
</html>