Angular/Todolist: Difference between revisions
Jump to navigation
Jump to search
(Created page with " =Version 2= js/controllers.js <pre> 'use strict'; →Controllers: var todoApp = angular.module('todoApp', []); todoApp.controller('TodoListCtrl', function($scope) { ...") |
|||
| Line 2: | Line 2: | ||
=Version 2= |
=Version 2= |
||
index.html |
|||
<pre> |
|||
<!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.description}} ({{task.date}}). |
|||
</p> |
|||
</li> |
|||
</ul> |
|||
</body> |
|||
</html> |
|||
</pre> |
|||
js/controllers.js |
js/controllers.js |
||
<pre> |
<pre> |
||
Revision as of 10:08, 12 November 2015
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.description}} ({{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
},
];
});