.

CURSO
ANGULAR 8: ARQUITECTURA
Y FUNDAMENTOS

Arquitectura de Angular, Librerías, Módulos y Directivas

Componentes, Metadatos, Modelos y Servicios.

1. En la carpeta compartida se encontrará un archivo index.html el cual es una estructura

html base con la cual empezaremos, además un archivo db.json que contiene una lista
de objetos que usaremos en el proyecto de la clase como base de datos.

2. Crear un proyecto nuevo con el cli de Angular, el comando para crear un proyecto nuevo
es:
ng new NOMBRE_APPLICACION --style=scss --routing=false

 style: es una opción para crear el proyecto con un sistema de estilos diferente
al que por defecto es css
 routing: es una opción para crear el proyecto con soporte a rutas, por ahora no
lo usaremos
 para más información de comandos y opciones de angular cli
https://angular.io/cli

3. Ingresar a la carpeta del proyecto y levantar el servidor con el comando

ng serve.

4. Migrar el contenido del recurso index.html, que se encuentra en el compartido, hacia el

component.html y el styles.scss.

5. Estructurar nuestra aplicación basada en componentes, para ello debemos crear 4

nuevos componentes, los cuales podrían llevar los nombres de Header, Navigation,
Main, Footer, en los cuales repartiremos el código html que actualmente se encuentra
en el componente App.

El comando para generar componentes es:

ng generate component NOMBRE_COMPONENTE

 Cada componente generado, traerá 4 archivos de los cuales nos interesaremos

en tres de ellos por ahora, el archivo html , scss y ts
 Cada sección de código html que pertenezca al nuevo componente creado
deberá ser trasladado a el archivo html de nuestro componente, al igual cada
sección de estilos que pertenezca a nuestro componente se trasladara al
archivo. scss

6. La lógica del proyecto se desarrollará en clase.

Ing. Manuel Vilcarromero 1

 NOTAS

 Para enviar intercambiar información entre componentes usaremos @Input para enviar
atributos y @Output para emitir eventos, a través de las directivas de componentes
(Selectores), ambos decoradores son importados del paquete @angular/core

 Para enviar contenido (Content projection) dentro de los Selectores de los componentes
debemos usar el selector <ng-content></ng-content> dentro del archivo html del
componente

 Para crear un servicio se debe ejecutar el siguiente comando

ng generate service NOMBRE_SERVICIO

IMPORTANTE:

A medida que va creciendo nuestra aplicación los componentes, directivas entre otros
tipos de clases que crearemos podrían generar confusión en la organización de
nuestro proyecto por lo cual para una mejor organización deberíamos repartir nuestro
código en al menos tres carpetas principales:

 core: Carpeta donde debe almacenarse un CoreModulo, servicios, componentes

universales y otras características que solo generen una instancia por aplicación
 modules: Carpeta designada a páginas y componentes privados que manejan
módulos propios
 shared: Carpeta donde se debe almacenar un SharedModule, componentes,
directivas, tuberías que sean compartidas y se usen en diferentes partes de la
aplicación

Esta estructura es una opción de organización del código, hay otras e incluso uno mismo con
la experiencia ganada puede elaborar su propia organización a seguir.

Referencia:

https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7

Ing. Manuel Vilcarromero 2