AngularJS
Componentes
Buscar..
Parámetros
| Parámetro | Detalles |
|---|---|
| = | Para el uso de enlace de datos de dos vías. Esto significa que si actualiza esa variable en el alcance de su componente, el cambio se reflejará en el alcance principal. |
| < | Enlaces unidireccionales cuando solo queremos leer un valor de un ámbito primario y no actualizarlo. |
| @ | Parámetros de la cadena. |
| Y | Para devoluciones de llamadas en caso de que su componente necesite enviar algo a su ámbito principal. |
| - | - |
| LifeCycle Hooks | Detalles (requiere angular.version> = 1.5.3) |
| $ onInit () | Se llama a cada controlador después de que todos los controladores de un elemento se hayan construido y se hayan inicializado sus enlaces. Este es un buen lugar para colocar el código de inicialización de su controlador. |
| $ onChanges (changesObj) | Se llama cada vez que se actualizan los enlaces unidireccionales. El changesObj es un hash cuyas claves son los nombres de las propiedades enlazadas que han cambiado, y los valores son un objeto de la forma { currentValue, previousValue, isFirstChange() } . |
| $ onDestroy () | Llamado a un controlador cuando se destruye su ámbito de contención. Utilice este gancho para liberar recursos externos, relojes y controladores de eventos. |
| $ postLink () | Llamado después de que el elemento de este controlador y sus hijos hayan sido enlazados. Este gancho puede considerarse análogo a los ganchos ngAfterViewInit y ngAfterContentInit en Angular 2. |
| $ doCheck () | Llamado en cada vuelta del ciclo de digestión. Brinda una oportunidad para detectar y actuar sobre los cambios. Cualquier acción que desee realizar en respuesta a los cambios que detecte debe invocarse desde este enlace; implementar esto no tiene efecto cuando se llama a $ onChanges. |
Observaciones
Componente es un tipo especial de directiva que usa una configuración más simple que es adecuada para una estructura de aplicación basada en componentes. Los componentes se introdujeron en Angular 1.5, los ejemplos en esta sección no funcionarán con versiones anteriores de AngularJS.
Una guía de desarrollador completa sobre Componentes está disponible en https://docs.angularjs.org/guide/component
Componentes básicos y ganchos de ciclo de vida
¿Qué es un componente?
- Un componente es básicamente una directiva que usa una configuración más simple y que es adecuada para una arquitectura basada en componentes, que es de lo que trata Angular 2. Piense en un componente como un widget: un fragmento de código HTML que puede reutilizar en varios lugares diferentes de su aplicación web.
Componente
angular.module('myApp', [])
.component('helloWorld', {
template: '<span>Hello World!</span>'
});
Margen
<div ng-app="myApp">
<hello-world> </hello-world>
</div>
Usando datos externos en el componente:
Podríamos agregar un parámetro para pasar un nombre a nuestro componente, que se usaría de la siguiente manera:
angular.module("myApp", [])
.component("helloWorld",{
template: '<span>Hello {{$ctrl.name}}!</span>',
bindings: { name: '@' }
});
Margen
<div ng-app="myApp">
<hello-world name="'John'" > </hello-world>
</div>
Uso de controladores en componentes
Echemos un vistazo a cómo agregarle un controlador.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.myName = 'Alain';
}
});
Margen
<div ng-app="myApp">
<hello-world name="John"> </hello-world>
</div>
Los parámetros pasados al componente están disponibles en el alcance del controlador justo antes $onInit función $onInit . Considera este ejemplo:
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.$onInit = function() {
this.myName = "Mac" + this.name;
}
}
});
En la plantilla de arriba, esto representaría "¡Hola John, soy MacJohn!".
Tenga en cuenta que $ctrl es el valor predeterminado Angular para controllerAs si no se especifica uno.
Usando "require" como un objeto
En algunos casos, es posible que deba acceder a los datos de un componente principal dentro de su componente.
Esto se puede lograr especificando que nuestro componente requiere ese componente principal, el requisito nos dará una referencia al controlador de componente requerido, que luego se puede usar en nuestro controlador como se muestra en el siguiente ejemplo:
Observe que se garantiza que los controladores necesarios estarán listos solo después del gancho $ onInit.
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
require: {
parent: '^parentComponent'
},
controller: function () {
// here this.parent might not be initiated yet
this.$onInit = function() {
// after $onInit, use this.parent to access required controller
this.parent.foo();
}
}
});
Sin embargo, tenga en cuenta que esto crea un acoplamiento estrecho entre el niño y el padre.
Componentes en angular JS
Los componentes en angularJS se pueden visualizar como una directiva personalizada (<html> esto en una directiva HTML, y algo como esto será una directiva personalizada <CUALQUIER COSA>). Un componente contiene una vista y un controlador. El controlador contiene la lógica de negocio que está enlazada con una vista, que el usuario ve. El componente difiere de una directiva angular porque contiene menos configuración. Un componente angular puede definirse así.
angular.module("myApp",[]).component("customer", {})
Los componentes se definen en los módulos angulares. Contienen dos argumentos, uno es el nombre del componente y el segundo es un objeto que contiene un par de valores clave, que define qué vista y qué controlador va a usar de esta manera.
angular.module("myApp",[]).component("customer", {
templateUrl : "customer.html", // your view here
controller: customerController, //your controller here
controllerAs: "cust" //alternate name for your controller
})
"myApp" es el nombre de la aplicación que estamos creando y cliente es el nombre de nuestro componente. Ahora, para llamarlo en el archivo html principal, lo pondremos así.
<customer></customer>
Ahora esta directiva será reemplazada por la vista que ha especificado y la lógica de negocios que ha escrito en su controlador.
NOTA: Recuerde que el componente toma un objeto como segundo argumento mientras que la directiva toma una función de fábrica como argumento.