Commit 8c767d08 authored by ANDREW STEVEN KRAMM's avatar ANDREW STEVEN KRAMM

Initial commit

parents
node_modules
bower_components
.tmp
*.sw*
.log
.DS_Store
{
"name": "angular-training-04",
"version": "0.0.0",
"authors": [
"Andrew Kramm <ask15@psu.edu>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"angular": "~1.4.3",
"sugar": "~1.4.1",
"bootstrap-css-only": "~3.3.4"
}
}
var gulp = require('gulp'),
browserSync = require('browser-sync')
wiredep = require('wiredep');
// proxy = require('http-proxy-middleware');
var serverOptions = {
files: [
'./src/*'
],
host: '0.0.0.0',
port: 9000,
reloadDelay: 3000,
server: {
baseDir: ['./src'],
middleware: [
// proxy('/hr-payroll/', { target: 'https://apps.opp.psu.edu:8001/hr-payroll/' })
],
routes: {
'/bower_components': './bower_components'
}
},
watchOptions: {
debounceDelay: 1000
}
};
gulp.task('default', ['serve']);
gulp.task('serve', ['wire'], function() {
browserSync(serverOptions);
});
gulp.task('wire', function(cb) {
wiredep({ src: './src/index.html', cwd: './', ignorePath: '../' });
cb();
});
{
"name": "Assignment",
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"browser-sync": "^2.5.2",
"gulp": "^3.9.0",
"http-proxy-middleware": "0.0.5",
"wiredep": "^2.2.2"
},
"engines": {
"node": ">=0.10.0"
}
}
angular
.module('app', [])
.controller('TaskController', function($scope) {
$scope.tasks = [
{ description: 'Task out the trash', complete: true },
{ description: 'Feed the fish', complete: true },
{ description: 'Write a small novel', complete: false },
{ description: 'Learn AngularJS', complete: false }
];
$scope.addTask = addTask;
$scope.description = '';
$scope.getToggleLabel = getToggleLabel;
$scope.toggleComplete = toggleComplete;
/*
* Adds a new task to the task list only the description is not blank or only spaces
* The task description input should be blanked out if a new task is added
*/
function addTask() {
// add code here
}
function getToggleLabel(task) {
return task.complete ? 'Undo' : 'Complete';
}
/*
* Toggle the 'complete' property of a task
*/
function toggleComplete(task) {
// add code here
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap-css-only/css/bootstrap.css" />
<!-- endbower -->
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="TaskController">
<div class="container">
<h1>Tasks</h1>
<div class="row">
<form ng-submit="addTask()">
<div class="input-group">
<input type="text" class="form-control" ng-model="description" placeholder="Task description...">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">Add Task</button>
</span>
</div>
</form>
</div>
<div class="row spacer">
<table class="table table-striped">
<tbody>
<tr ng-repeat="task in tasks">
<td ng-class="task.complete ? 'complete' : 'incomplete'">{{ task.description }}</td>
<td class="button-column"><button class="btn btn-sm btn-default" ng-click="toggleComplete(task)">{{ getToggleLabel(task) }}</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/sugar/release/sugar.min.js"></script>
<!-- endbower -->
<script src="application.js"></script>
</body>
</html>
.spacer {
margin-top: 10px;
}
.button-column {
width: 100px;
text-align: center;
}
.complete {
color: #aaa;
text-decoration: line-through;
}
td {
vertical-align: middle !important;
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment