Angular/Todolist: Difference between revisions
Jump to navigation
Jump to search
| Line 112: | Line 112: | ||
=Version 3= |
=Version 3= |
||
index.html |
|||
<pre> |
|||
<!doctype html> |
<pre><!doctype html> |
||
<html lang="en" ng-app="todoApp"> |
<html lang="en" ng-app="todoApp"> |
||
<head> |
<head> |
||
| Line 149: | Line 149: | ||
</pre> |
</pre> |
||
js/controllers.js |
|||
<pre> |
<pre> |
||
'use strict'; |
'use strict'; |
||
| Line 184: | Line 184: | ||
<pre> |
<pre> |
||
</pre> |
</pre> |
||
=Next= |
|||
# Envoyer la tache cachée vers le serveur Node.js |
|||
# Changer le status d'une tache (completed) |
|||
# Supprimer une tache |
|||
Revision as of 14:41, 12 November 2015
Démarrage
mkdir todolist cd todolist bower install angularjs-boilerplate mkdir css mkdir img mkdir js mkdir partials cd js touch app.js controllers.js filters.js directives.js services.js
index.html
Version 1
cat << EOF > index.html <!doctype html> <html lang="en" ng-app> <head> <meta charset="utf-8"> <title>My HTML File</title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="css/app.css"> <script src="bower_components/angular/angular.js"></script> </head> <body> <ul> <li>Todo 1</li> <li>Todo 1</li> </ul> </body> </html> EOF
Version 2
index.html
<!doctype html>
<html lang="en" ng-app="todoApp">
<head>
<meta charset="utf-8">
<title>TODO LIST Angular App</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="TodoListCtrl">
<h1>Todolist</h1>
<form>Todo: <input type="text"/></form>
<!-- Search: <input ng-model="query"> -->
<ul class="tasks">
<!-- <li ng-repeat="task in tasks | filter:query"> -->
<li ng-repeat="task in tasks">
<p>
<!-- <form><input type="checkbox"/>{{task.description}} ({{task.date}}).</form> -->
{{task.title}} ({{task.date}}).
</p>
</li>
</ul>
</body>
</html>
js/controllers.js
'use strict';
/* Controllers */
var todoApp = angular.module('todoApp', []);
todoApp.controller('TodoListCtrl', function($scope) {
$scope.tasks = [
{'date': '11/11/2015',
'title': 'Apprendre Angular.',
'completed': false
},
{'date': '12/11/2015',
'title': 'Faire le mini-projet.',
'completed': false
},
{'date': '12/11/2015',
'title': 'Faire le mini-projet.',
'completed': false
},
];
});
Version 3
index.html
<!doctype html>
<html lang="en" ng-app="todoApp">
<head>
<meta charset="utf-8">
<title>TODO LIST Angular App</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="TodoListCtrl">
<h1>Todolist</h1>
<p>
Search: <input ng-model="query">
</p>
<form id="task-form" ng-submit="addTask()">
<input id="new-task" placeholder="What needs to be done?" ng-model="newTask" ng-disabled="saving" autofocus>
</form>
<ul id="task-list" class="tasks">
<li ng-repeat="task in tasks | filter:query">
<p>
<form><input type="checkbox"/><label>{{task.title}} ({{task.date}}).</label></form>
</p>
</li>
</ul>
</body>
</html>
js/controllers.js
'use strict';
/* Controllers */
var todoApp = angular.module('todoApp', []);
todoApp.controller('TodoListCtrl', function($scope) {
$scope.tasks = [];
$scope.addTask = function () {
var title=$scope.newTask.trim();
if (!title) {
return;
}
var t = {
title: title,
date: Date.now(),
completed: false
};
$scope.tasks.push(t);
$scope.newTask = '';
};
});
Next
- Envoyer la tache cachée vers le serveur Node.js
- Changer le status d'une tache (completed)
- Supprimer une tache