Agregando controladores Más videos
Descripción del tema
En el tutorial anterior vimos como crear módulos, en este tutorial agregaremos nuestro primer controller al módulo que hemos creado, también desplegaremos la información del controller en el view.
Vamos a agregar el siguiente código al archivo js/app.js que creamos en el tutorial anterior.
(function(){
"use strict";
angular.module('Bookmarks',[
//dependencies here
])
.controller('MainController',function($scope){ //Step 1
$scope.name = 'Carl' //Step 2
});
})();
- En el primer paso se utiliza el método controller para definir un controlador, este método recibe dos parámetros, el primero será el nombre que le daremos y el segundo la función constructora.
- En el paso dos creamos una propiedad dentro del objeto $scope, le hemos llamado name.
Aquí hay un concepto importante, el parámetro $scope es lo que une a los controladores con las vistas, es un objeto muy especial en angular ya que internamente se agregan listeners a este objeto para estar monitorizando cambios sobre el, ya sea desde las vistas o desde el controller, esto permite que tanto controladores como vistas estén completamente separadas y la manera de comunicarse es mediante el $scope.
Otro concepto importante en el código anterior es que el $scope se instancía de manera automática y angular lo injecta al controlador sin nosotros hacer ningún otro esfuerzo. A esto se le llama dependency injection, básicamente angular injectara mágicamente todas las dependencias que definamos en el controlador, en este caso solo definimos el $scope pero podríamos definir algún servicio, utilería o cualquier otra cosa disponible.
Lo siguiente que necesitamos hacer es modificar el HTML para hacer uso de nuestro controlador.
<!DOCTYPE html>
<html ng-app="Bookmarks">
<head>
<title>Installation - Angular JS</title>
</head>
<body ng-controller="MainController"> <!-- Step 1 -->
<div>
<!-- Step 2 -->
<h1>Welcome {{name}}</h1>
<p><input ng-model="name" type="text" /></p>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
- En el paso uno se agrega el controlador por medio del atributo ng-controller. Aquí referenciamos al controlador por el nombre que le asignamos cuando lo definimos.
- En el paso dos simplemente eliminamos el código que teníamos anteriormente para inicializar la variable name, ya que ahora la estamos inicializando en el controlador.
Si refrescamos nuestro navegador deberíamos ver lo siguiente.
Controladores en Angular JS
Ahora vamos a definir una colección de objetos en nuestro controlador para poder renderizarlo en la vista por medio de una directiva.
.controller('MainController',function($scope){
$scope.name = 'Carl'
$scope.categories = ['HTML5','JavaScript','CSS','Games'];
});
Una vez definida la información vamos a imprimirla en nuestra vista de la siguiente manera.
<ul>
<li ng-repeat="category in categories">{{category}}</li>
</ul>
Estamos usando la directiva ng-repeat, esta directiva nos permite repetir el elemento <li> por cada item de arreglo categories. Además nos pone cada elemento del arreglo categories en la variable category, luego simplemente imprimimos el valor de la variable category como el contenido del <li>.
Si refrescamos nuestro navegador veremos algo como lo siguiente.
Directiva ng-repeat
Usar el patrón MVC en nuestras aplicaciones nos ayuda a mantener un código más limpio, angular nos proporciona las herramientas necesarias para poder hacerlo fácilmente.
En el siguiente tema veremos como renderizar objetos en el view usando la directiva ng-repeat, usaremos estructuras un poco más complejas para representar información.
Puedes ver el resultado de lo que hemos realizado, para descargar el código fuente es necesario registrarse en el sitio. Si te ha gustado este tutorial por favor compártelo en las redes sociales, me harás un gran favor.
Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Introducción a Angular JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.
Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Introducción a Angular JS, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
7Comentarios
Muchas gracias, te vengo siguiendo los pasos!
Que bien, si tienes dudas sobre el curso puedes usar los foros de ayuda ;)
Excelente
Muy Bueno, gracias por el aporte ;)
Muchas Gracias!!
Como todos tus videos, Excelente. Que grandes conocimientos voy adquiriendo en tu pagina, ya me suscribi a tu canal, espero sigas subiendo mas videos como el uso de ng-Route y demas. Gracias por compartir tu conocimiento.
Excellent!!