Angular/Todolist
Jump to navigation
Jump to search
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.