Skip to content

Instantly share code, notes, and snippets.

@superchris

superchris/index.html

Created May 4, 2015 21:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save superchris/db7406e1f8aeddaecba6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save superchris/db7406e1f8aeddaecba6 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Fully worked student example // source http://jsbin.com/cadat
Raw
index.html
<!DOCTYPE html>
<html ng-app="studentApp">
<head>
<meta name="description" content="Fully worked student example" />
<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" class="control-label">Email</label>
<input name="email" type="text" 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>
<script id="jsbin-javascript">
var studentApp = angular.module("studentApp", ["ngRoute"]);
studentApp.factory("Student", function() {
return {
students: [{
id: 1,
name: "Joe Blow",
email: "[email protected]"
}, {
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.controller("EditStudentCtrl", function($scope, Student, $routeParams, $location) {
$scope.student = Student.getStudent($routeParams.id);
$scope.saveStudent = function() {
$location.path("/students/" + this.student.id);
}
});
studentApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/students/:id/edit', {templateUrl: 'editStudent.html', controller: "EditStudentCtrl"}).
when('/students/:id', {templateUrl: 'showStudent.html', controller: "ShowStudentCtrl"});
}]);
</script>
<script id="jsbin-source-javascript" type="text/javascript">var studentApp = angular.module("studentApp", ["ngRoute"]);
studentApp.factory("Student", function() {
return {
students: [{
id: 1,
name: "Joe Blow",
email: "[email protected]"
}, {
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.controller("EditStudentCtrl", function($scope, Student, $routeParams, $location) {
$scope.student = Student.getStudent($routeParams.id);
$scope.saveStudent = function() {
$location.path("/students/" + this.student.id);
}
});
studentApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/students/:id/edit', {templateUrl: 'editStudent.html', controller: "EditStudentCtrl"}).
when('/students/:id', {templateUrl: 'showStudent.html', controller: "ShowStudentCtrl"});
}]);</script></body>
</html>
Raw
jsbin.cadat.js
var studentApp = angular.module("studentApp", ["ngRoute"]);
studentApp.factory("Student", function() {
return {
students: [{
id: 1,
name: "Joe Blow",
email: "[email protected]"
}, {
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.controller("EditStudentCtrl", function($scope, Student, $routeParams, $location) {
$scope.student = Student.getStudent($routeParams.id);
$scope.saveStudent = function() {
$location.path("/students/" + this.student.id);
}
});
studentApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/students/:id/edit', {templateUrl: 'editStudent.html', controller: "EditStudentCtrl"}).
when('/students/:id', {templateUrl: 'showStudent.html', controller: "ShowStudentCtrl"});
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment