superchris/jsbin.cadat.html

## jsbin.cadat.html
<!DOCTYPE html>
<html ng-app="studentApp">
<head>
<meta name="description" content="Camp NG Example 2" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
  <script src="http://code.angularjs.org/1.2.12/angular-route.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="StudentCtrl as studentList">
  <ul>
    <li ng-repeat="student in studentList.students"><a href="#/students/{{student.id}}">{{student.name}}</a></li>
  </ul>
  <ng-view></ng-view>
</body>
  <script id="showStudent.html" type="text/ng-template">
    <dl>
      <dt>{{student.name}}</dt>
      <dd ng-show="student.email"><img ng-src="http://avatars.io/email/{{student.email}}" /></dd>
    </dl>
    <a href="#/students/{{student.id}}/edit">Edit<a>
  </script>
  <script id="editStudent.html" type="text/ng-template">
  <form name="studentForm" class="form-vertical" novalidate="true">
    <div class="control-group" ng-class="{error: studentForm.name.$invalid}">
      <label for="name" class="control-label">Name</label>
      <input name="name" ng-model="student.name" type="text" ng-required="true" ng-pattern="/^[A-Z].*/">
      <span class="inline-help text-error" ng-show="studentForm.name.$error.required">You need a name!</span>
      <span class="inline-help text-error" ng-show="studentForm.name.$error.pattern">Name must be capitalized</span>
    </div>
    <div class="control-group">
      <label for="email">Email</label>
      <input name="email" ng-model="student.email" />
    </div>
    <div class="form-actions">
      <input type="submit" class="btn primary" value="Save" ng-click="saveStudent()">
      <input type="button" class="btn" value="Cancel">
    </div>
  </form>
  </script>

</body>
</html>

## jsbin.cadat.js
var studentApp = angular.module("studentApp", ["ngRoute"]);

studentApp.factory("Student", function() {
  return {
    students: [{
      id: 1,
      name: "Joe Blow",
      email: "chris@gaslight.co"
    }, {
      id: 2,
      name: "John Doe",
      email: ""
    }],

    getStudent: function(id) {
      return _.findWhere(this.students, {id: Number(id)});
    }
  };
});

studentApp.controller("StudentCtrl", function(Student) {
  this.students = Student.students
});

studentApp.controller("ShowStudentCtrl", function($scope, Student, $routeParams) {
  $scope.student = Student.getStudent($routeParams.id);
});

studentApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/students/:id/edit', {templateUrl: 'editStudent.html', controller: "ShowStudentCtrl"}).
      when('/students/:id', {templateUrl: 'showStudent.html', controller: "ShowStudentCtrl"});
  }]);
	<!DOCTYPE html>
	<html ng-app="studentApp">
	<head>
	<meta name="description" content="Camp NG Example 2" />
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
	<script src="http://code.angularjs.org/1.2.12/angular-route.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body ng-controller="StudentCtrl as studentList">
	<ul>
	<li ng-repeat="student in studentList.students"><a href="#/students/{{student.id}}">{{student.name}}</a></li>
	</ul>
	<ng-view></ng-view>
	</body>
	<script id="showStudent.html" type="text/ng-template">
	<dl>
	<dt>{{student.name}}</dt>
	<dd ng-show="student.email"><img ng-src="http://avatars.io/email/{{student.email}}" /></dd>
	</dl>
	<a href="#/students/{{student.id}}/edit">Edit<a>
	</script>
	<script id="editStudent.html" type="text/ng-template">
	<form name="studentForm" class="form-vertical" novalidate="true">
	<div class="control-group" ng-class="{error: studentForm.name.$invalid}">
	<label for="name" class="control-label">Name</label>
	<input name="name" ng-model="student.name" type="text" ng-required="true" ng-pattern="/^[A-Z].*/">
	<span class="inline-help text-error" ng-show="studentForm.name.$error.required">You need a name!</span>
	<span class="inline-help text-error" ng-show="studentForm.name.$error.pattern">Name must be capitalized</span>
	</div>
	<div class="control-group">
	<label for="email">Email</label>
	<input name="email" ng-model="student.email" />
	</div>
	<div class="form-actions">
	<input type="submit" class="btn primary" value="Save" ng-click="saveStudent()">
	<input type="button" class="btn" value="Cancel">
	</div>
	</form>
	</script>

	</body>
	</html>
	var studentApp = angular.module("studentApp", ["ngRoute"]);

	studentApp.factory("Student", function() {
	return {
	students: [{
	id: 1,
	name: "Joe Blow",
	email: "chris@gaslight.co"
	}, {
	id: 2,
	name: "John Doe",
	email: ""
	}],

	getStudent: function(id) {
	return _.findWhere(this.students, {id: Number(id)});
	}
	};
	});

	studentApp.controller("StudentCtrl", function(Student) {
	this.students = Student.students
	});

	studentApp.controller("ShowStudentCtrl", function($scope, Student, $routeParams) {
	$scope.student = Student.getStudent($routeParams.id);
	});

	studentApp.config(['$routeProvider', function($routeProvider) {
	$routeProvider.
	when('/students/:id/edit', {templateUrl: 'editStudent.html', controller: "ShowStudentCtrl"}).
	when('/students/:id', {templateUrl: 'showStudent.html', controller: "ShowStudentCtrl"});
	}]);