UnJavaScripter/cosasPorHacer_2.html

## cosasPorHacer_2.html
<!DOCTYPE HTML>
<html lang="en" ng-app="cosasPorHacer">
	<body ng-controller="cosasPorHacer_Ctrl">
		<!-- ng-submit se dispara cuando el formulario se envía (bien sea por el accionar de la tecla Enter o por clic sobre el botón "Enviar"); ejecutará "agregarElemento" es el nombre de la función que inserta elementos en el array "$scope.listaDeCosas". -->
		<form ng-submit="agregarElemento()">
			<!-- La propiedad ' ng-model="cosaPorHacer" ' del input hace que Angular pueda tomar su valor desde el controlador. Angular se debe referir a este modelo usando "$scope.cosaPorHacer" -->
			<input type="text" ng-model="cosaPorHacer" placeholder="Agregar nueva cosa por hacer">
			<input type="submit">
		</form>

		<ul>
			<!-- ng-repeat se encarga de crear un elemento por cada uno de los items que encuentre en la lista especificada, en este caso "listaDeCosas" (en la vista no es necesario poner el $scope. antes del nombre de la variable). -->

			<!-- "cosa" es el nombre que le doy a cada uno de los elementos que ng-repeat genera, por lo tanto puedo acceder a él en la vista usando "mustaches" así: {{cosa}}, de esta forma indico que quiero que se muestre todo item del array. -->

			<li ng-repeat="cosa in listaDeCosas track by $index">{{cosa}}</li>
		</ul>


		<!-- Recuerda usar la librería más reciente disponible (al menos mientras llegue una nueva versión de angular que cambie todo) -->
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>


	<script>
		// Declaramos la apliacaión con el nombre 'cosasPorHacer' con un array vacío '[]' y la asociamos a la variable 'aplicacion'
		var aplicacion = angular.module('cosasPorHacer', []);

		// Creamos un controlador, para este caso lo llamaremos cosasPorHacer_Ctrl y le inyectaremos '$scope' como dependencia. $scope sirve de puente entre lo que se defina en el controlador y la/s vista/s (HTML) *Explicación breve y poco técnica
		aplicacion.controller('cosasPorHacer_Ctrl', function($scope){

			// Definimos el Array que contendrá los elementos de nuestra lista de cosas por hacer
			$scope.listaDeCosas = [];

			// Creamos una función que se encargará de agregar elementos a la lista
			$scope.agregarElemento = function(){
				// Un push como cualquier otro en JS en donde $scope.cosaPorHacer es el input del formulario
				$scope.listaDeCosas.push($scope.cosaPorHacer)
				// Borramos el texto ingresado en el input del formulario para dejarlo listo para recibir una nueva Cosa Por Hacer
				$scope.cosaPorHacer = ""
			}

		})
	</script>
	</body>

</html>
	<!DOCTYPE HTML>
	<html lang="en" ng-app="cosasPorHacer">
	<body ng-controller="cosasPorHacer_Ctrl">
	<!-- ng-submit se dispara cuando el formulario se envía (bien sea por el accionar de la tecla Enter o por clic sobre el botón "Enviar"); ejecutará "agregarElemento" es el nombre de la función que inserta elementos en el array "$scope.listaDeCosas". -->
	<form ng-submit="agregarElemento()">
	<!-- La propiedad ' ng-model="cosaPorHacer" ' del input hace que Angular pueda tomar su valor desde el controlador. Angular se debe referir a este modelo usando "$scope.cosaPorHacer" -->
	<input type="text" ng-model="cosaPorHacer" placeholder="Agregar nueva cosa por hacer">
	<input type="submit">
	</form>

	<ul>
	<!-- ng-repeat se encarga de crear un elemento por cada uno de los items que encuentre en la lista especificada, en este caso "listaDeCosas" (en la vista no es necesario poner el $scope. antes del nombre de la variable). -->

	<!-- "cosa" es el nombre que le doy a cada uno de los elementos que ng-repeat genera, por lo tanto puedo acceder a él en la vista usando "mustaches" así: {{cosa}}, de esta forma indico que quiero que se muestre todo item del array. -->

	<li ng-repeat="cosa in listaDeCosas track by $index">{{cosa}}</li>
	</ul>




	<!-- Recuerda usar la librería más reciente disponible (al menos mientras llegue una nueva versión de angular que cambie todo) -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>


	<script>
	// Declaramos la apliacaión con el nombre 'cosasPorHacer' con un array vacío '[]' y la asociamos a la variable 'aplicacion'
	var aplicacion = angular.module('cosasPorHacer', []);

	// Creamos un controlador, para este caso lo llamaremos cosasPorHacer_Ctrl y le inyectaremos '$scope' como dependencia. $scope sirve de puente entre lo que se defina en el controlador y la/s vista/s (HTML) *Explicación breve y poco técnica
	aplicacion.controller('cosasPorHacer_Ctrl', function($scope){

	// Definimos el Array que contendrá los elementos de nuestra lista de cosas por hacer
	$scope.listaDeCosas = [];

	// Creamos una función que se encargará de agregar elementos a la lista
	$scope.agregarElemento = function(){
	// Un push como cualquier otro en JS en donde $scope.cosaPorHacer es el input del formulario
	$scope.listaDeCosas.push($scope.cosaPorHacer)
	// Borramos el texto ingresado en el input del formulario para dejarlo listo para recibir una nueva Cosa Por Hacer
	$scope.cosaPorHacer = ""
	}

	})
	</script>
	</body>

	</html>