API tools faq
paste
Advertisement
Guest User

OHHH SEAN GET GREAT!!!

a guest
Nov 28th, 2014
183
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html ng-app="BrentonApp">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1">
  6.     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7.  
  8. <!-- Overriding bootstrap css table width of 100% -->
  9. <style>
  10. .table-nonfluid
  11. {
  12.    width: 800px;
  13. }
  14. </style>
  15.  
  16. <title>Brenton's AngularJS Demo</title>
  17.  
  18. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
  19.  
  20. <!-- Needed reference for ngRoute -->
  21. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular-route.min.js"></script>
  22.  
  23. <!-- Needed references for css and responsive design -->
  24. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  25. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  26.  
  27.  <!-- The below script reference version does not work with this angularjs implementation -->
  28.  <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>-->
  29.  
  30. <script type="text/javascript">
  31.     //Used for records / faking identity-like pid
  32.     var uid = 1;
  33.    
  34.     //Your localhost route to match up with endpoints
  35.     var uri = 'http://localhost:8080'
  36.    
  37.     //Define an angular module for our app
  38.     var myApp = angular.module('BrentonApp', ['ngRoute']);
  39.        
  40.        
  41. //Define Routing for app
  42. // Uri + /EmbeddedPartialView -> script template -> EmbeddedPartialView.html using PartialController
  43.     myApp.config(['$routeProvider', function($routeProvider) {
  44.         $routeProvider.when('/EmbeddedPartialView', {
  45.             templateUrl: 'EmbeddedPartialView.html',
  46.             controller: 'PartialController',
  47.             data:'Partial Data: Listing Contact Detail View'
  48.         });
  49.         /*when('/ShowOrders', {
  50.             templateUrl: 'templates/show_orders.html',
  51.             controller: 'ShowOrdersController'
  52.         }).
  53.         otherwise({
  54.             redirectTo: '/AddNewOrder'
  55.         }); */
  56.     }]);
  57.        
  58.     myApp.controller('PartialController', function($scope, $route) {
  59.          //access the data property set in RouteProvider config using $route.current
  60.         $scope.message = $route.current.data;
  61.        
  62.         });
  63.        
  64.     myApp.controller('ContactController', ['$scope', function($scope) {
  65.         $scope.contacts = [{
  66.             id:0, 'name': 'Brenton Bates',
  67.             'email':'brentonbates@gmail.com',
  68.             'phone': '614-999-9999'
  69.         }];
  70.          
  71.         $scope.saveContact = function() {
  72.             //if this is new contact, add it in contacts array
  73.             if($scope.newcontact.id == null) {
  74.                 $scope.newcontact.id = uid++;
  75.                 $scope.contacts.push($scope.newcontact);
  76.             } else {
  77.             //For an existing contact, find by contact id
  78.             //and update it.
  79.                 for(i in $scope.contacts) {
  80.                     if($scope.contacts[i].id == $scope.newcontact.id) {
  81.                     $scope.contacts[i] = $scope.newcontact;
  82.                     }
  83.                 }                
  84.             }
  85.              
  86.             //clear the add contact form
  87.             $scope.newcontact = {};
  88.         }
  89.          
  90.         $scope.delete = function(id) {
  91.              
  92.             //search for contact by id and delete it
  93.             for(i in $scope.contacts) {
  94.                 if($scope.contacts[i].id == id) {
  95.                     $scope.contacts.splice(i,1);
  96.                     $scope.newcontact = {};
  97.                 }
  98.             }            
  99.         }
  100.          
  101.         $scope.edit = function(id) {
  102.         //search for contact by id and update it
  103.             for(i in $scope.contacts) {
  104.                 if($scope.contacts[i].id == id) {
  105.                     //we use angular.copy() method to create
  106.                     //copy of original object
  107.                     $scope.newcontact = angular.copy($scope.contacts[i]);
  108.                 }
  109.             }
  110.         }
  111.     }]);   
  112. </script>
  113.  
  114. </head>
  115.     <body>
  116.         <div class="container-fluid" ng-controller="ContactController">
  117.             <form class="form-inline" role="form">
  118.             <div class="form-group">
  119.             <h2><u><strong>Viewing All Contacts</strong></u></h2>
  120.             <br/>
  121.     <label class="sr-only" for="nameInput"><strong>Name:</strong></label>
  122.     <input id="nameInput" class="form-control" type="text" name="name" ng-model="newcontact.name" placeholder="Enter Name"/>
  123.     <br/><br/>
  124.     <label class="sr-only" for="emailInput"><strong>Email:</strong></label>
  125.     <input class="form-control" type="text" name="email" ng-model="newcontact.email" placeholder="YourEmail@example.com"/>
  126.     <br/><br/>
  127.     <label class="sr-only" for="phoneInput"><strong>Phone:</strong></label>
  128.     <input class="form-control" type="text" name="phone" ng-model="newcontact.phone" placeholder="Enter Phone Number"/>
  129.     <br/><br/>
  130.     <input class="form-control" type="hidden" ng-model="newcontact.id" />                  
  131.     <br/>
  132.     <input class="btn btn-danger form-control" type="button" value="Save" ng-click="saveContact()" />
  133.     </div>
  134.     </form>
  135.     <br/>
  136.     <table class="table table-hover table-bordered table-condensed table-striped table-nonfluid">
  137.         <thead>
  138.             <tr>
  139.                 <th class="active">Name</th>
  140.                 <th class="success">Email</th>
  141.                 <th class="warning">Phone</th>
  142.                 <th class="danger">Action</th>
  143.             </tr>
  144.         </thead>
  145.                 <tbody>
  146.                     <tr ng-repeat="contact in contacts">
  147.                         <td>{{ contact.name }}</td>
  148.                         <td>{{ contact.email }}</td>
  149.                         <td>{{ contact.phone }}</td>
  150.                         <td>
  151.                             <a href="#" ng-click="edit(contact.id)">edit</a> |
  152.                             <a href="#" ng-click="delete(contact.id)">delete</a> |
  153.                             <a href="#/EmbeddedPartialView">view</a>
  154.                         </td>
  155.                     </tr>
  156.                 </tbody>
  157.             </table>
  158.  
  159.         </div>
  160.         <!-- Rendering PartialView -->
  161.         <div class="col-md-9">
  162.             <div ng-view></div>
  163.         </div>
  164.        
  165.         <script type="text/ng-template" id="EmbeddedPartialView.html">
  166.             <h2>Details for EmbeddedPartialView </h2>
  167.             {{message}}
  168.         </script>
  169.     </body>
  170. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!