Angular/Todolist

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

 Todo 1 Todo 1 

EOF

=Version 2=

index.html

<!doctype html>   TODO LIST Angular App    <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'; }]);

=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.