Angular/Todolist: Difference between revisions
Jump to navigation
Jump to search
(→Next) |
|||
| Line 194: | Line 194: | ||
}]); |
}]); |
||
</pre> |
</pre> |
||
Remarque: vous pouvez réaliser une promesse ([[Promise]]) pour charger le document json. |
|||
=Next= |
=Next= |
||
Revision as of 07:37, 19 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>
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.