Angular/Todolist
Jump to navigation
Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
Démarrage
Installer les composants requis pour Angular avec AngularJS Boilerplate :
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
Créer un premier document principal
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> <h1>TodoList</h1> <h2>Today</h2> <ul> <li>Todo 1</li> <li>Todo 2</li> <li>Todo 3</li> <li>Todo 4</li> </ul> <h2>Tomorrow</h1> <ul> <li ng-repeat="n in [5, 6, 7, 8] track by $index">Task {{n}}</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> Search: <input ng-model="query"> <ul class="tasks"> <li ng-repeat="task in tasks | filter:query"> <p> {{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 = ''; }; });
Version 4
... todoApp.controller('TodoListCtrl', ['$scope', '$http', function($scope, $http) { ... $http.get('tasks/tasks.json').success(function(data) { $scope.tasks = data; }); // $scope.orderProp = 'date'; }]);
Remarque: vous pouvez réaliser une promesse (Promise) pour charger le document json.
Next
- Envoyer la tache cachée vers le serveur Node.js
- Changer le status d'une tache (completed)
- Supprimer une tache
Vous pouvez vous inspirer de l'exemple TodoMVC.