Skip to content

Instantly share code, notes, and snippets.

@lighteternal

lighteternal/index.html

Created March 11, 2017 18:35
Show Gist options
  • Save lighteternal/f0f39ac24b2679faf5ce18929a29e4f8 to your computer and use it in GitHub Desktop.
Save lighteternal/f0f39ac24b2679faf5ce18929a29e4f8 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Basic AngularJS: List, New, Delete, Edit, Read // source https://jsbin.com/dojeqag
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Basic AngularJS: List, New, Delete, Edit, Read">
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<script src="https://rawgit.com/angular/bower-angular-route/master/angular-route.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div class="container">
<h1 class="page-header">AngularJS Project</h1>
<div ng-view></div>
</div>
<script type="text/ng-template" id="list.html">
<p ng-repeat="student in students">
<a href="#!/{{$index}}">{{ student.fullName() }}</a>
<a href="#!/edit/{{$index}}" class="btn btn-xs btn-warning">Edit</a>
<button ng-click="student.delete()" class="btn btn-xs btn-danger">Delete</button>
</p>
<p ng-if="students.length == 0">No students yet!</p>
<a href="#!/new" class="btn btn-primary">Add a student</a>
</script>
<script type="text/ng-template" id="details.html">
<p><a href="#!/edit/{{index}}">Edit</a></p>
<p>Name: {{ student.name }}</p>
<p>Last Name: {{ student.lastName }}</p>
<p><a href="#!/" class="">Back to students</a></p>
</script>
<script type="text/ng-template" id="form.html">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" ng-model="student.name" class="form-control" id="name" placeholder="eg. Giorgos">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" ng-model="student.lastName" class="form-control" id="lastName" placeholder="eg. Papadopoulos">
</div>
<button type="submit" ng-click="saveStudent()" class="btn btn-default">Submit</button>
</form>
<br/>
<p><a href="#!/" class="">Back to students</a></p>
</script>
<script id="jsbin-javascript">
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'List'
}).when('/new', {
templateUrl: 'form.html',
controller: 'StudentForm'
}).when('/edit/:id', {
templateUrl: 'form.html',
controller: 'StudentForm'
}).when('/:id', {
templateUrl: 'details.html',
controller: 'Details'
});
}]);
app.controller('List', ['$scope', 'Student', function($scope, Student) {
$scope.students = Student.list;
}]);
app.controller('Details', ['$scope', '$routeParams', 'Student', function($scope, $routeParams, Student) {
console.log('entering details..');
$scope.student = Student.list[$routeParams.id];
$scope.index = $routeParams.id;
}]);
app.controller('StudentForm', ['$scope', '$routeParams', '$location', 'Student', function($scope, $routeParams, $location, Student) {
var student = $routeParams.id !== undefined ?
Student.list[$routeParams.id] :
new Student();
$scope.student = {
name: student.name,
lastName: student.lastName
};
$scope.saveStudent = function() {
student.name = $scope.student.name;
student.lastName = $scope.student.lastName;
student.save();
$location.path('/');
}
}]);
app.factory('Student', function() {
var Student = function(name, lastName) {
var s = {
name: name,
lastName: lastName
};
s.fullName = function() {
return s.name + ' ' + s.lastName;
};
s.save = function() {
var pos = Student.list.indexOf(s);
if (pos > -1) {
Student.list.splice(pos, 1, s);
} else {
Student.list.push(s);
}
};
s.delete = function() {
var pos = Student.list.indexOf(s);
Student.list.splice(pos, 1);
}
return s;
};
// Student.list = [];
Student.list = [
new Student('Nikos', 'Korompos'),
new Student('Petros', 'Matzaflokos'),
new Student('Nasos', 'Kaprivourkos')
];
return Student;
})
</script>
<script id="jsbin-source-javascript" type="text/javascript">
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'List'
}).when('/new', {
templateUrl: 'form.html',
controller: 'StudentForm'
}).when('/edit/:id', {
templateUrl: 'form.html',
controller: 'StudentForm'
}).when('/:id', {
templateUrl: 'details.html',
controller: 'Details'
});
}]);
app.controller('List', ['$scope', 'Student', function($scope, Student) {
$scope.students = Student.list;
}]);
app.controller('Details', ['$scope', '$routeParams', 'Student', function($scope, $routeParams, Student) {
console.log('entering details..');
$scope.student = Student.list[$routeParams.id];
$scope.index = $routeParams.id;
}]);
app.controller('StudentForm', ['$scope', '$routeParams', '$location', 'Student', function($scope, $routeParams, $location, Student) {
var student = $routeParams.id !== undefined ?
Student.list[$routeParams.id] :
new Student();
$scope.student = {
name: student.name,
lastName: student.lastName
};
$scope.saveStudent = function() {
student.name = $scope.student.name;
student.lastName = $scope.student.lastName;
student.save();
$location.path('/');
}
}]);
app.factory('Student', function() {
var Student = function(name, lastName) {
var s = {
name: name,
lastName: lastName
};
s.fullName = function() {
return s.name + ' ' + s.lastName;
};
s.save = function() {
var pos = Student.list.indexOf(s);
if (pos > -1) {
Student.list.splice(pos, 1, s);
} else {
Student.list.push(s);
}
};
s.delete = function() {
var pos = Student.list.indexOf(s);
Student.list.splice(pos, 1);
}
return s;
};
// Student.list = [];
Student.list = [
new Student('Nikos', 'Korompos'),
new Student('Petros', 'Matzaflokos'),
new Student('Nasos', 'Kaprivourkos')
];
return Student;
})
</script></body>
</html>
Raw
jsbin.dojeqag.js
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'List'
}).when('/new', {
templateUrl: 'form.html',
controller: 'StudentForm'
}).when('/edit/:id', {
templateUrl: 'form.html',
controller: 'StudentForm'
}).when('/:id', {
templateUrl: 'details.html',
controller: 'Details'
});
}]);
app.controller('List', ['$scope', 'Student', function($scope, Student) {
$scope.students = Student.list;
}]);
app.controller('Details', ['$scope', '$routeParams', 'Student', function($scope, $routeParams, Student) {
console.log('entering details..');
$scope.student = Student.list[$routeParams.id];
$scope.index = $routeParams.id;
}]);
app.controller('StudentForm', ['$scope', '$routeParams', '$location', 'Student', function($scope, $routeParams, $location, Student) {
var student = $routeParams.id !== undefined ?
Student.list[$routeParams.id] :
new Student();
$scope.student = {
name: student.name,
lastName: student.lastName
};
$scope.saveStudent = function() {
student.name = $scope.student.name;
student.lastName = $scope.student.lastName;
student.save();
$location.path('/');
}
}]);
app.factory('Student', function() {
var Student = function(name, lastName) {
var s = {
name: name,
lastName: lastName
};
s.fullName = function() {
return s.name + ' ' + s.lastName;
};
s.save = function() {
var pos = Student.list.indexOf(s);
if (pos > -1) {
Student.list.splice(pos, 1, s);
} else {
Student.list.push(s);
}
};
s.delete = function() {
var pos = Student.list.indexOf(s);
Student.list.splice(pos, 1);
}
return s;
};
// Student.list = [];
Student.list = [
new Student('Nikos', 'Korompos'),
new Student('Petros', 'Matzaflokos'),
new Student('Nasos', 'Kaprivourkos')
];
return Student;
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment