Angular/Todolist - Revision history

Donsez: /* Version 1 */

2015-11-19T19:27:33Z

Version 1

← Older revision		Revision as of 19:27, 19 November 2015
Line 21:		Line 21:

	=Version 1=		=Version 1=
			Créer un premier document principal

	<pre>		<pre>
	cat << EOF > index.html		cat << EOF > index.html
Line 34:		Line 36:
	<body>		<body>

			<h1>TodoList</h1>
			<h2>Today</h2>
	<ul>		<ul>
	<li>Todo 1</li>		<li>Todo 1</li>
	<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>		</ul>

2015-11-19T07:40:39Z

Démarrage

← Older revision		Revision as of 07:40, 19 November 2015
Line 3:		Line 3:

	=Démarrage=		=Démarrage=

			Installer les composants requis pour [[Angular]] avec [https://github.com/jbutko/AngularJS-Boilerplate AngularJS Boilerplate] :

	<pre>		<pre>
	mkdir todolist		mkdir todolist

2015-11-19T07:37:33Z

← Older revision		Revision as of 07:37, 19 November 2015
Line 194:		Line 194:
	}]);		}]);
	</pre>		</pre>

			Remarque: vous pouvez réaliser une promesse ([[Promise]]) pour charger le document json.



	=Next=		=Next=

2015-11-13T12:54:40Z

Version 4

2015-11-12T14:50:06Z

Version 3

← Older revision		Revision as of 14:50, 12 November 2015
Line 178:		Line 178:
	});		});
	</pre>		</pre>


			=Version 4=

	<pre>		<pre>
			...
			todoApp.controller('TodoListCtrl', ['$scope', '$http', function($scope, $http) {
			...

			$http.get('tasks/tasks.json').success(function(data) {
			$scope.tasks = data;
			});

			$scope.orderProp = 'date';
			}]);
	</pre>		</pre>

2015-11-12T14:46:44Z

← Older revision		Revision as of 14:46, 12 November 2015
Line 186:		Line 186:
	# Changer le status d'une tache (completed)		# Changer le status d'une tache (completed)
	# Supprimer une tache		# Supprimer une tache

			Vous pouvez vous inspirer de l'exemple [http://todomvc.com/examples/angularjs/#/ TodoMVC].

2015-11-12T14:42:23Z

Version 2

← Older revision		Revision as of 14:42, 12 November 2015
Line 60:		Line 60:
	<h1>Todolist</h1>		<h1>Todolist</h1>

	<form>Todo: <input type="text"/></form>

	~~<!--~~ Search: <input ng-model="query"~~> --~~>		Search: <input ng-model="query">


	<ul class="tasks">		<ul class="tasks">
	~~<!--~~ <li ng-repeat="task in tasks \| filter:query"~~> --~~>		<li ng-repeat="task in tasks \| filter:query">
	<li ng-repeat="task in tasks">
	<p>		<p>
	<!-- <form><input type="checkbox"/>{{task.description}} ({{task.date}}).</form> -->
	{{task.title}} ({{task.date}}).		{{task.title}} ({{task.date}}).
	</p>		</p>

2015-11-12T14:41:08Z

Version 3

← Older revision		Revision as of 14:41, 12 November 2015
Line 112:		Line 112:

	=Version 3=		=Version 3=
			index.html

	<pre>

	<!doctype html>		<pre><!doctype html>
	<html lang="en" ng-app="todoApp">		<html lang="en" ng-app="todoApp">
	<head>		<head>
Line 149:		Line 149:
	</pre>		</pre>

			js/controllers.js

	<pre>		<pre>
	'use strict';		'use strict';
Line 184:		Line 184:
	<pre>		<pre>
	</pre>		</pre>

			=Next=
			# Envoyer la tache cachée vers le serveur Node.js
			# Changer le status d'une tache (completed)
			# Supprimer une tache

2015-11-12T14:37:40Z

Version 1

← Older revision		Revision as of 14:37, 12 November 2015
Line 14:		Line 14:
	touch app.js controllers.js filters.js directives.js services.js		touch app.js controllers.js filters.js directives.js services.js
	</pre>		</pre>

			index.html

	=Version 1=		=Version 1=

2015-11-12T11:03:39Z

Version 3