Recomendados
Más contenido relacionado
Similar a Como usar el Angular CLI
Similar a Como usar el Angular CLI (20)
Último
Último (7)
Como usar el Angular CLI
- 1. Cómo Desarrollar usando el Angular CLI Daniel Marin
- 2. Agenda 1. Introduccion 2. Por que usar Angular? 3. Modulos 4. Componentes 5. Directivas 6. Servicios 7. Espacios de Trabajo 8. Aplicaciones 9. Librerias
- 3. Introducción
- 4. Por que usar Angular CLI?
- 5. Componentes Se definen usando @Component. Permiten crear elementos que pueden ser usados en HTML. Permiten crear elementos reutilizables.
- 6. Metadata - Selector: Es el nombre que usaremos para llamar el AppComponent en HTML. - templateUrl: Es la direccion al archivo HTML que contiene la plantilla que utilizara el AppComponent - styleUrls: Es un arreglo de direcciones a archivos css que seran usados para estilizar este componente.
- 7. Directivas Se definen usando @Directive. Todos los componentes son un tipo especial de directiva. Permiten realizar modificaciones al DOM de manera eficiente. Permiten extender funcionalidades nativas con mayor facilidad.
- 8. Metadata Selector: Es el nombre que usaremos para llamar HighlightDirective en HTML.
- 9. Servicios Se definen usando @Injectable. Permiten crear singletons o instancias compartidas. Perfectos para compartir información entre componentes. Es el hogar de los métodos que usamos en múltiples componentes.
- 10. Metadata Injectable: Nos permite definir en donde puede ser usado el Servicio, en caso de no pasar un providedIn debemos agregar el servicio a la lista de providers de algún modulo. NOTA: Deben usar providedIn siempre que sea posible, de esta manera Angular puede realizar Tree shaking e ignorar este servicio si no es utilizado.
- 11. Módulos Se definen usando @NgModule. Representan las partes de nuestra aplicación. Permiten modularizar la aplicación y hacerla más mantenible. Existen patrones para arquitecturas robustas.
- 12. Metadata - Declarations: Agregamos componentes, directivas y pipes. - Imports: Agregamos todos los módulos que queremos acceder desde el AppModule. - Providers: Agregamos todos los servicios que queremos proveer al inyectar el AppModule. - Bootstrap: Permite a Angular identificar el modulo raíz de la aplicación.
- 13. Aplicaciones En plataformas grandes es común contar con varias aplicaciones. Especialmente útil en ciertas arquitecturas donde hay múltiples versiones de la misma aplicación. Mejora la mantenibilidad de la plataforma al contar con todo lo que necesitas en un solo espacio de trabajo.
- 14. Librerias Cuando tenemos múltiples aplicaciones, el código que se usa en más de una aplicación se agrega en una librería. Angular provee mecanismos para crear librerías fácilmente.
- 15. Espacios de Trabajo Directorio donde vivirá nuestra plataforma. Contiene una lista de aplicaciones y librerías. Nos ayuda a tener una plataforma más mantenible. Especialmente útil para aplicaciones bastante grandes.
- 16. Angular CLI
Notas del editor
- Hola a todos y bienvenidos. Mi nombre es Daniel Marin, soy ingeniero de software en This Dot y co-organizador de Angular Montevideo. Me especializo en Angular y trabajo con Angular desde que tenía “JS” en el nombre. He ido evolucionando con el framework y sus cambios, así que hoy vengo a compartirles cómo estructurar una aplicación en Angular haciendo uso del CLI.
- La agenda para el dia de hoy consiste de una breve introducción, el porqué usar angular y luego definiremos conceptos como módulos, components, directivas, servicios, espacios de trabajo, aplicaciones y librerías.
- Hoy vamos a hablar sobre Angular, en primer lugar, que es Angular? Pues Angular es un framework o marco de trabajo, que cuenta con una serie de conceptos que nos ayudan a crear arquitecturas más robustas. Este framework ha ido evolucionando desde su nacimiento hace varios años, han introducido nuevos conceptos y en algunos casos, han conservado elementos de la implementación original. Lo que esto quiere decir es que si queremos hacer mejores aplicaciones debemos confiar en el framework y las herramientas que nos provee. Empezar con Angular puede ser bastante abrumador por eso el dia de hoy hablaremos sobre los conceptos básicos y cómo hacer mejores aplicaciones HOY!
- Lo primero que te debes preguntar es, por que usar un marco de trabajo? La verdad es que hacer aplicaciones grandes con interfaces dinámicas y reactivas es un gran desafío, especialmente si no contamos con un marco de trabajo que nos ayude a reducir la cantidad de código repetitivo y cosas que deben ingeniarse para darle al usuario lo que ellos consideran como una experience “normal”, hoy en dia todos los usuarios están esperando un mínimo de velocidad, calidad, eficiencia, etc, que ellos asumen son parte de cualquier aplicación. Angular nos provee de las bases y fundamentos que necesitamos para hacer aplicaciones de mayor calidad, si hacemos uso de las técnicas que han ido progresando desde el inicio de Angular, estamos usando todo este conocimiento generado por el equipo de Google durante muchos años. Imaginense el tiempo que necesitamos para crear nosotros mismos algo de esa magnitud, no reinventemos la rueda y confía en el framework. Angular en sus nuevas versiones viene con un CLI (interfaz de línea de comandos, básicamente un programa con el que interactuamos por medio de una terminal) que nos permite hacer muchas cosas, desde generar un nuevo proyecto hasta generar elementos en una aplicación. En especial hoy nos vamos a enfocar en “generate”, el comando que nos permite generar código. Ahora imaginense tener este increíble framework y además tener herramientas creadas por el equipo de Angular para generar este código robusto de manera automática corriendo comandos en la terminal. Ya que sabemos porque es importante, es tiempo de entender cómo funciona. Lo interesante de Angular es utilizar sus conceptos, si no queremos hacer eso, es mejor que no usemos el framework. La idea de Angular es darnos las herramientas que Google sabe que se necesitan para desarrollar aplicaciones, pues ellos lo utilizan en más de 2000 aplicaciones.
- Los componentes son clases que cuentan con un decorador llamado @Component, al que proveemos con metada sobre cómo compilar y usar dicho componente. En Typescript un decorador es un objeto con metadata que nos permite dar contexto adicional a una propiedad, un método o una clase. A partir de la versión 9 de Angular hay un nuevo compilador que permite tomar cualquier componente y compilarlo de manera directa. Esto no era posible en versiones anteriores y aun es bastante comun compilar componentes a traves de modulos, asi podemos hacer una estructuración lógica mucho más fácil de manejar. Los componentes nos permiten crear elementos personalizados que podemos usar en otros componentes como HTML. Así podemos crear nuevas funcionalidades o extender las nativas usando elementos reutilizables dentro del contexto de tu aplicación.
- Básicamente el Component nos permite darle superpoderes a una clase. Estos son los 3 superpoderes más comunes: templateUrl: Recibe una cadena de caracteres con la dirección a un archivo html que será usado por el componente. styleUrls: Recibe un arreglo de cadenas de caracteres, donde podemos definir una lista de direcciones a archivos CSS para estilizar nuestra plantilla. selector: Es el “nombre” del componente para cuando queremos usarlo dentro de otra plantilla.
- Al igual que los componentes, las directivas son clases que cuentan con un decorador llamado @Directive, al que proveemos de metadata sobre cómo compilar y usar dicha directiva. Quizás sueno como repetitivo pero la verdad es que los principales conceptos de Angular se utilizan por medio de decoradores. Una vez que entiendes estos decoradores, es mucho más sencillo hacer aplicaciones. Si se están preguntando, cuál es la diferencia entre una directiva y un componente, la verdad es que un componente es un tipo de directiva que tiene una plantilla que nos permite crear un elemento, mientras que las directivas son más generales y también pueden ser llamadas como atributos de un elemento. Las directivas son bastante efectivas cuando queremos trabajar con funcionalidades nativas de HTML o manipular el DOM.
- En el caso de las directivas, la propiedad que nos importa se llama selector y al igual que para los componentes nos permite darle un nombre que utilizaremos luego.
- Al igual que los componentes y directivas, los servicios son clases que cuentan con un decorador llamado @Injectable, al que proveemos de metadata sobre cómo instanciar y usar dicho servicio. Los servicios permiten crear singletons, lo que esto significa es que la clase que conforma nuestro servicio, es usada para crear una única instancia que puede ser inyectada en cualquier componente, directiva u otro servicio, todos los que accedan a él tendrán la misma instancia. Es comúnmente usado para compartir información o métodos que son usados en más de un componente.
- Los servicios no tienen opciones obligatorias, podemos usar providedIn con el valor ‘root’ para definir un servicio que es instanciado en la raíz y tiene una instancia única que es compartida por todos los que usen el servicio.
- Para mi los módulos son las vértebras en la columna vertebral de tu aplicación. Un módulo es una clase que cuenta con el decorador @NgModule, este decorador recibe metadata para la compilación de nuestras plantillas y crea un inyector que puede ser usado en tiempo de corrida. De esta manera podemos indicarle a Angular como queremos que funcione cierto elemento. Todas las aplicaciones de Angular cuentan con un AppModule que representa el módulo padre o raíz de la aplicación. El resto de los módulos son las partes del “todo” y en conjunto forman la experiencia de usuario que buscas. La modularidad de Angular nos permite hacer aplicaciones mucho más confiables y mantenibles, pues podemos dividir nuestro código como nos parezca mejor. En mi experiencia, es bueno seguir un patrón al estructurar nuestra aplicación con módulos, en la parte práctica vamos a hablar más al respecto. Esta modularidad unida al lazy loading que trae Angular nativamente nos permite reducir considerablemente el peso final de la aplicación, dándole a los usuarios una experiencia que se siente más rápida. En esta charla no voy a tocar el tema del lazy loading pero quería que lo tuvieran en mente, sobre todo a la hora de definir los módulos de una aplicación.
- Declarations: Permite listar todos los componentes, directivas y pipes que pertenecen al módulo. Imports: Permite incorporar contenido de otros módulos usando el inyector definido. Providers: Permite listar todos los servicios que va a proveer el modulo. Bootstrap: Esta es la menos usada y funciona para definir el punto de entrada de la aplicación.
- En plataformas grandes es común contar con varias aplicaciones. Especialmente útil en ciertas arquitecturas donde hay múltiples versiones de la misma aplicación. Mejora la mantenibilidad de la plataforma al contar con todo lo que necesitas en un solo espacio de trabajo.
- Cuando tenemos múltiples aplicaciones, el código que se usa en más de una aplicación se agrega en una librería. Angular provee mecanismos para crear librerías fácilmente.
- Directorio donde vivirá nuestra plataforma. Contiene una lista de aplicaciones y librerías. Nos ayuda a tener una plataforma más mantenible. Especialmente útil para aplicaciones bastante grandes.
- Es hora de usar el Angular CLI