Angular/Todolist

From air
Jump to: navigation, 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

  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.