AngularJS - ¿Que es un Controller / controlador en AngularJS? - Controlador buenas practicas - Asignar alias un Scope de un Controlador - Controlador en archivo/fichero externo
Hola hoy vamos a continuar con nuestro tutorial de AngularJS, hace muy poco tiempo vimos que con los Módulos y que es el Scope! Hoy vamos a ver los controladores, así bueno pongamos manos en esto!
Los controladores se enlazan a la vista mediante la directiva ng-controller, aunque existe una excepción que veremos mas adelante.
En la vista:
Si necesitamos pasar un parámetro al método del scope sigue siendo muy sencillo, solo se agrega al momento de declarar la función el parámetro dentro de los paréntesis y al momento de utilizar la función en la vista se le pasa un valor, un ejemplo:
Dentro del controller:
En la vista:
AngularJS - ¿Que es un Controller / controlador en AngularJS?
Los controladores en AngularJS son objetos que permiten desarrollar la lógica de la aplicación, enlaza el ámbito, $scope, con la vista y permite tener un control total de los datos. Explicándolo de otra manera, es el encargado de gestionar los eventos.
Los controladores se enlazan a la vista mediante la directiva ng-controller, aunque existe una excepción que veremos mas adelante.
A los controladores podemos inyectarles valores o constantes. Como su propio nombre indica, las constantes son las que no van a cambiar a lo largo del uso de la aplicación y los valores son aquellas variables cuyo dato puede cambiar durante la ejecución de una aplicación. También podremos inyectar servicios y factorías, componentes muy parecidos entre sí.
Para crear nuestro controlador tenemos que hacer lo siguiente:
- Creamos un Modulo (modele de AngularJS). ya que este objeto contiene el controlador.
- Mediante el método controller() de nuestro "module", asignarle una función constructora que Angular usará cuando deba crear nuestro controlador
- Usar la directiva ng-controller, asignándole el nombre de nuestro controlador, en el HTML. Colocaremos esa directiva en el pedazo del DOM donde queremos tener acceso al scope.
Ejemplo controlador:
angular.module("miApp", []).controller("myCtrl", function($scope) {
$scope.text1 = "Hola ";
$scope.text2 = "El lado oscuro de Java";
});
Y en la parte de la vista a mostrar y donde hacemos la llamada a los elementos del scope:
<html lang="en" ng-app="miApp" ng-controller="myCtrl">
...
...
...
<span> Nombre: {{text1+text2}}</span>AngularJS - Controlador buenas practicas
Bueno existen muchas cosas que se pueden hacer con los controladores pero de esas cosas no es recomendable hacer otras, especifiquemos
El controlador debo utilizarlo para:
- Se deben utilizar para inicializar el estado del scope para que nuestra aplicación tenga los datos necesarios para comenzar a funcionar y pueda presentar información correcta al usuario en la vista.
- Se deben utilizar para escribir código que añada funcionalidades o comportamientos (métodos, funciones) al scope.
El controlador no debo utilizarlo para:
- No se debe utilizar ningún caso manipular el DOM de la página, pues los controladores deben de ser agnósticos a cómo está construido el HTML del documento donde van a estar trabajando.
- No se debe utilizar para formatear la entrada de datos.
- No se debe utilizar para filtrar la salida.
- No se debe utilizar para intercambiar estados entre distintos controladores.
- No de sebe utilizar para manejar el ciclo de vida de componentes, ejemplo: crear servicios o instancias.
AngularJS - Asignar alias un Scope de un Controlador
Para asignar un alias al scope de un controlador, se debe agregar en el momento que se genera el controlador la palabra "as" y el nombre del controlador, por ejemplo:
<div ng-app="miApp" ng-controller="AppCtrl as my">Luego al utilizar el controler:
angular.module("miApp", []).controller("myCtrl", function() {
this.text1 = "Hola ";
this.text2 = "El lado oscuro de Java";
});Aquí tenemos que marcar que no escribimos el $scope, si no que directamente lo eliminamos del header, es decir la declaración del function(), para asignar un valor al scope se debe utilizar el this.
En la capa de datos:
<span> Nombre: {{my.text1+my.text2}}</span>Lo que remarcamos acá es que para acceder a las variables del scope ahora tenemos que indicarle el alias que agregamos arriba en nuestro ejemplo es "my"
AngularJS - Agregar metodos / funciones al scope dentro de un controlador
Para agregar un comportamiento/función al scope dentro de un controlador es muy sencillo, agregamos el nombre de la función/método como si fuera un atributo al scope, pero luego le asignamos "= function() { " después de abrir la llave escribimos nuestro método, en el caso que retorne algo escribimos "return" y al finalizar " };", aclaro para los que son novatos que cada linea hecha en JavaScript la debemos terminar con un ";". Luego para llamarlo desde la vista es como siempre se llama al scope y como si fuera un atributo pero con los dos paréntesis al finalizar "()".
Un ejemplo de esto:
Dentro del controller:
this.saludar = function() { return "Texto Plano saludar!"; };En la vista:
Nombre: {{my.saludar()}}Si necesitamos pasar un parámetro al método del scope sigue siendo muy sencillo, solo se agrega al momento de declarar la función el parámetro dentro de los paréntesis y al momento de utilizar la función en la vista se le pasa un valor, un ejemplo:
Dentro del controller:
<script>
angular.module("miApp", []).controller("myCtrl", function() {
this.text1 = "Hola ";
this.text2 = "El lado oscuro de Java ";
this.saludar = function(parametro) {
var salida="";
if (parametro == "pepe"){
salida = "Hola Pepeeeeee";
} else {
salida =" Hola Wey";
}
return salida; };
});
</script>En la vista:
<span> Nombre: {{my.saludar('pepe') }}</span>AngularJS - Controlador en archivo/fichero externo
De acuerdo vaya creciendo nuestra aplicación de seguro utilizaremos controladores en mas de una pagina, para esto es sumamente recomendable realizar los controladores aislados, es decir en ficheros aparte.
Un ejemplo de esto:
Creamos el archivo myCtrl.js y escribimos
Luego en nuestro archivo main invocamos este controlador que creamos en un archivo externo.
Simplemente con la etiqueta script
Esperamos como siempre que allá quedado claro cualquier duda nos consultan!
Creamos el archivo myCtrl.js y escribimos
angular.module("miApp", []).controller("myCtrl", function() {
this.text1 = "Hola ";
this.text2 = "El lado oscuro de Java";
});Luego en nuestro archivo main invocamos este controlador que creamos en un archivo externo.
Simplemente con la etiqueta script
<script src="myCtrl.js"></script>Esperamos como siempre que allá quedado claro cualquier duda nos consultan!
AngularJS - ¿Que es un Controller / controlador en AngularJS? - Controlador buenas practicas - Asignar alias un Scope de un Controlador - Controlador en archivo/fichero externo
Reviewed by El lado oscuro de java
on
mayo 26, 2015
Rating:
Reviewed by El lado oscuro de java
on
mayo 26, 2015
Rating:
No hay comentarios: