Angular/Todolist: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
|||
| Line 1: | Line 1: | ||
=Démarrage= |
|||
<pre> |
|||
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 |
|||
</pre> |
|||
=Version 1= |
|||
<pre> |
|||
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 |
|||
</pre> |
|||
=Version 2= |
=Version 2= |
||
Revision as of 10:57, 12 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
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>
<form>Todo: <input type="text"/></form>
<!-- Search: <input ng-model="query"> -->
<ul class="tasks">
<!-- <li ng-repeat="task in tasks | filter:query"> -->
<li ng-repeat="task in tasks">
<p>
<!-- <form><input type="checkbox"/>{{task.description}} ({{task.date}}).</form> -->
{{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
<!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>
'use strict';
/* Controllers */
var todoApp = angular.module('todoApp', []);
todoApp.controller('TodoListCtrl', function($scope) {
$scope.tasks = [];
$scope.addTask = function () {
var t = {
title: $scope.newTask.trim(),
date: Date.now(),
completed: false
};
/* if (!t.title) {
return;
}
*/
$scope.tasks.push(t);
$scope.newTask = '';
console.log(tasks);
};
});