Table of Contents
Como desarrollador front-end, siempre te preguntan si te especializas en React o Angular. Estas dos tecnologías principales tienen sus fortalezas y debilidades, y cada una es más apropiada dependiendo del proyecto, pero en este artículo no vamos a discutir eso. Recientemente empecé a trabajar en Angular y esta es una hoja de trucos rápida para iniciarse en Angular como desarrollador de React.
Crear un componente en Angular
Imaginemos que queremos crear un componente CustomButton. Cuando creamos este componente en React, puede tener un aspecto similar a este:
//imports
export const CustomButton = () => {
const onClick= () => {}
return (
<button
onClick={onClick}
className=”button-class”>
Click me
</button>
)
};Donde tenemos el nombre del componente, su marcado y la lógica que puede manejar en un archivo de extensión JSX -o TSX si estamos usando typescript-.
En Angular, para crear el mismo componente podemos utilizar el comando
ng generate component custom-buttonY creará una carpeta con tres archivos dentro: custom-button.component.html, custom-button.component.scss y custom-button.component.ts. ¿Cómo maneja Angular estos tres archivos para utilizarlos como un solo componente? La configuración de este componente está en el archivo .component.ts. Tiene el decorador @Component que le dice a Angular cómo procesar e instanciar el componente y dónde encontrar cada capa de información. Este sería el mismo ejemplo que antes en Angular:
//custom-button.component.html
<button
class="button-class"
(click)="onClick()">
Click me
</button>
//custom-button.component.ts
//imports
@Component({
selector: 'custom-button',
templateUrl: './custom-button.component.html',
styleUrls: ['custom-button.component.scss]
})
export class CustomButton {
onClick = () => {}
}Como puedes ver se parecen bastante, pero hay algunas diferencias sintácticas notables debido a que React utiliza JSX y Angular utiliza HTML para el marcado:
- En Angular las clases son establecidas por la clase de atributos.
- Los componentes de Angular son visibles en el inspector del navegador. En este ejemplo veríamos algo similar a esto:
<custom-button class=”button-class”><button>Click me</button><custom-button>- Fíjate que Angular crea una capa adicional en el markup que representa el componente en sí, mientras que en Reactor verías el botón directamente.
Añadir atributos a un componente
En React, utilizamos props para hacer que los componentes sean personalizables y dinámicos. Por ejemplo, podemos pasar la propiedad text=»Click me» para hacer el botón más genérico:
export const CustomButton = ({text}) => {
const onClick= () => {}
return (
<button ...>
{text}
</button>
)
};
En Angular necesitamos usar el decorador @Input() en nuestro archivo .ts e inicializarlo:
@Component({
selector: 'custom-button',
templateUrl: './custom-button.component.html',
styleUrls: ['custom-button.component.scss]
})
export class CustomButton {
@Input() text = ‘’ //Note that it is mandatory to initialise it either here or in the class constructor
onClick = () => {}
}
Y utiliza las dobles llaves en el html:
<button
class="button-class"
(click)="onClick()">
{{ text }}
</button>
Llamada a una función del componente padre
Cuando usamos un componente puramente UI podemos querer pasar una función del componente padre al componente hijo. En React se vería algo así en el componente hijo:
export const CustomButton = ({onClick}) => {
handleClick = () => {
//some internal logic
onClick();//function passed from the parent component
}
return (
<button
onClick={handleClick}
className=”button-class”>
Click me
</button>
)
};
En Angular utilizaríamos el decorador @Output():
@Component({
selector: 'custom-button',
templateUrl: './custom-button.component.html',
styleUrls: ['custom-button.component.scss]
})
export class CustomButton {
@Output() onClick: new EventEmitter<any>();
handleClick = () => {
//some logic
this.onClick.emit()//here we can also pass the event or other data that we want to receive in the parent component
}
}
Creando un NgModule
Ahora sabemos un poco sobre cómo crear un componente de Angular, pero ¿dónde vive en el ecosistema de Angular? Cuando creamos un componente en Angular, es necesario declararlo en un NgModule. Un NgModule es un bloque de código que tiene su propia configuración, su enrutamiento y sus dependencias especificadas con el decorador @NgModule, que puede ser cargado perezosamente por ruta. Esto puede sonar un poco complicado al principio cuando se viene de React, pero vamos a verlo con un ejemplo. Cuando iniciamos un proyecto de Angular, éste viene con un módulo llamado app.module.ts que contiene lo básico:
// imports
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Este es el ngModule más básico:
- El array de declaraciones indica qué componentes de presentación incluirá, por ejemplo si estamos cargando nuestro botón personalizado en este módulo lo incluiríamos aquí.
- Imports: módulos que se necesitan para cargar el módulo actual. Internamente Angular está añadiendo la lista de proveedores de servicios de los módulos al inyector de la raíz de la aplicación. En este caso, el BrowserModule tiene servicios específicos del navegador como el renderizado del DOM, la sanitización y la localización.
- Proveedores: lista de dependencias de servicios que tiene el módulo actual. Puede ser un servicio que cargue datos o un servicio que maneje la autenticación, por ejemplo.
- Exportaciones: no aparece aquí pero es un array donde se pueden exportar componentes del módulo actual para poder utilizarlos en otros módulos.
- Bootstrap: es el componente raíz donde Angular insertará en index.html
¿Por qué necesitamos estos módulos?
Las aplicaciones siempre se dividen en bloques funcionales para su mantenimiento. En React esta división depende de los desarrolladores y no hay una convención específica a seguir, pero en Angular el código se puede dividir en ngModules. El decorador @ngModule especifica la configuración de estas partes de código, que incluye sus dependencias externas, cómo deben inyectarse sus dependencias internas y cómo debe compilarse. Esto crea bloques de código cohesivos con sus propios componentes de interfaz de usuario y routing.
No todos los módulos van a ser componentes presentacionales que se muestren por ruta. Un ejemplo de módulo incorporado de componente no presentacional es el RouterModule, que es un módulo muy utilizado que ofrece Angular para definir las rutas existentes y qué componentes deben cargar. Permite controlar si la página actual corresponde a una ruta específica (RouterActiveLink) o si una url necesita alguna condición para ser accedida (CanActivate).
El equipo de Angular también está trabajando en simplificar esta configuración para eventualmente eliminar la necesidad de un ngModule y hacer esta configuración por ruta, lo discutiremos en la siguiente sección.
Nuevas APIs para reducir la necesidad de NgModules
Con el fin de mejorar el árbol y reducir la complejidad, Angular está trabajando en la creación de nuevas APIs donde:
- La inyección de dependencia se manejaría con proveedores y arrays de proveedores directamente. En lugar de configurar el router de angular a través de RouterModule.forRoot(routes, config) en el ngModule, se podría configurar en el router.
- El bootstrap, que actualmente se configura en el ngmodule, se gestionaría mediante una nueva función bootstrapApplication.
- La función importProvidersFrom permitiría la compatibilidad con los antiguos ngModules
- La carga perezosa de los componentes sería posible no sólo para los ngModules sino también para los componentes individuales y las rutas hijas.
- Las dependencias de cada ruta podrían especificarse individualmente en lugar de por módulo.
Próximos pasos
Al ser Angular un framework ofrece muchas más funcionalidades que React, como el manejo de formularios, el router, el manejo de peticiones y demás que sería muy interesante explorar a continuación si se quiere aprender más sobre Angular.
Como desarrollador de React, aprender Angular me ha dado la perspectiva de entender cómo cada tecnología aborda un problema específico y lo resuelve, y también ayuda a entender mejor los fundamentos de Javascript.
