Angular/Todolist

=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>   My HTML File   

TodoList Today  Todo 1 Todo 2 Todo 3 Todo 4 

Tomorrow  <li ng-repeat="n in [5, 6, 7, 8] track by $index">Task </li> </ul>

EOF

=Version 2=

index.html

<!doctype html> <html lang="en" ng-app="todoApp"> <meta charset="utf-8"> TODO LIST Angular App <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 src="js/controllers.js"> <body ng-controller="TodoListCtrl">

Todolist

Search: <input ng-model="query">

<li ng-repeat="task in tasks | filter:query"> .	   </li> </ul>

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"> <meta charset="utf-8"> TODO LIST Angular App <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 src="js/controllers.js"> <body ng-controller="TodoListCtrl">

Todolist

Search: <input ng-model="query">

<form id="task-form" ng-submit="addTask"> <input id="new-task" placeholder="What needs to be done?" ng-model="newTask" ng-disabled="saving" autofocus>

 <li ng-repeat="task in tasks | filter:query"> . 	    </li> </ul>

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=
 * 1) Envoyer la tache cachée vers le serveur Node.js
 * 2) Changer le status d'une tache (completed)
 * 3) Supprimer une tache

Vous pouvez vous inspirer de l'exemple TodoMVC.