Crear Altamente Reutilizables AngularJS Componentes
la Preparación de su AngularJS aplicación de Angular
No pregunta si se va a construir hoy una nueva aplicación se puede iniciar con Angular construido en el Manuscrito (Angular 2+). Sin embargo, con miles de AngularJS (Angular 1.X) aplicaciones todavía en producción, AngularJS no va a ninguna parte todavía. De hecho, AngularJS sigue viendo el desarrollo y el apoyo continuos del equipo.
* * ACTUALIZACIÓN * *
Angular está actualmente en v6 y es adecuado para aplicaciones de producción grandes. Si está creando una nueva aplicación hoy, consulte Angular 6+.
Echa un vistazo a nuestra nueva guía para Crear Componentes Altamente Reutilizables Con Angular
Los desarrolladores también podrían favorecer a la rica comunidad de desarrolladores y las bibliotecas de código abierto en torno a AngularJS en lugar de sumergirse en otras nuevas y limitadas. Hay varias razones por las que es posible que desee crear una aplicación en AngularJS. Si la migración de su aplicación ng1 a ng2+ está en el radar, considere la posibilidad de componentizar su aplicación como requisito previo para la migración.
Nuevas funciones desde la versión 1.5.x se han agregado retroactivamente, principalmente el soporte de componentes y el enlace de datos unidireccional. Veremos cómo maximizar estas características para crear componentes altamente reutilizables para sus aplicaciones AngularJS que se alineen más cerca del nuevo marco Angular.
Organización de componentes
Es fácil perderse en el componente esto, componente que hoopla. Una de las piezas más críticas a entender es qué componente debe ser responsable de qué.
Mantenga los componentes de nivel de página como la fuerza impulsora detrás de una vista mientras utiliza componentes reutilizables o “tontos” para encargarse de tareas comunes.
Esto mantiene la lógica específica de la página en un solo componente mientras encapsula todo el código de rutina y la funcionalidad en trozos reutilizables.
Uno de los mayores errores que he visto es pasar datos a componentes secundarios que alteran los datos, asumen un caso de uso muy específico o se comunican a través de servicios en todo el lugar. Esto eventualmente los hace difíciles de entender/probar y no reutilizables en absoluto, ya que se convierten en códigos duros para casos de uso específicos.
Su primer Componente de “Hola Mundo”
El componente más simple posible se vería algo como esto. Observe lo similares que son a las directivas.
angular.module('app', )
.component('myComponent', {
template:'<h1>Hello World</h1>'
}
);
Vale la pena señalar que las directivas todavía están disponibles para los desarrolladores. Hay algunas circunstancias raras en las que todavía querrá usar una directiva de plantilla sobre un componente. Posiblemente si dependiera de alguna fase de compilación o enlace…. pero las directivas deben usarse como atributos para agregar otra funcionalidad a un componente, por ejemplo, tal vez desee agregar seguridad basada en permisos si un componente debe estar disponible o no para un usuario.
En caso de duda, favorezca el modelo de componentes. Quieres construir tu app como un árbol de componentes. Consulte los documentos de AngularJS para obtener más información sobre componentes y directivas. Las directivas deben pensarse en componentes sin plantillas que se utilicen para mejorar los componentes.
Opciones de enlace
Los parámetros de los componentes se pasan a través de la propiedad bindings. Similar a la antigua forma de asignar variables de ámbito de directiva.
angular.module('myApp')
.component('myComponent', {
template:'<h1>$ctrl.name</h1>',
bindings:{
name: '<' //one way data binding
},
controller: function(){
//component controller }})* < - One way data bindingUtilize one-way data binding for your bindings. Two way data bindings were great and one of the neatest feature of AngularJS, but it comes at a performance cost with the bound properties being watched within the component scope. This also means anything you change in component scope would be reflected in the parent in a two-way binding.!Important! - Its important to note that objects are passed by reference instead of a new copy. This means if your bound property is an object or array, changes to these objects would indeed reflect changes in the parent scope and still give you a two way data binding result. This is why its important to not mutate the object/array in the component scope and make those changes in the parent.* = - Two way data bindingNo worries if you need it though. Two way data binding is still around. #yolo* & - Output event. Provides a hook to parent componentsBindings marked with '&' signify a parameter that accepts a callback function from the parent component. This allows the parent to listen or catch any changes/messages. This is how our "dumb" component will talk back to the parent component with the change or event.* @ - String input
Comunicación de componentes
Supongamos que estamos haciendo una aplicación de mensajería. La vista principal es un componente de nivel de página con un componente de lista de contactos reutilizable. Queremos usar el componente de lista de contactos en otras áreas de nuestra aplicación, por lo que es importante que sea lo más reutilizable posible.
El componente de lista de contactos tiene un único propósito. Para renderizar la lista de contactos disponibles del servidor y generar las selecciones realizadas.
El componente messenger debe aceptar selecciones realizadas desde el componente de la lista de contactos y agregarlas a su lista de destinatarios.
