En el post anterior se introdujo la arquitectura de la aplicación a crear. En este post se cubrirá como crear la estructura básica de la aplicación Angular 4.
Creación de la aplicación
Para iniciar, se debe instalar NodeJS, a fin de disponer del manejador de paquetes NPM, a través del cual se gestionarán todas las librerías y dependencias del proyecto. Posteriormente, se debe instalar angular-cli. Angular-cli es una herramienta de consola que dispone de un conjunto de utilidades y comandos para crear y gestionar aplicaciones Angular 4.
Entre las utilidades de Angular-cli se tienen:
- Crear aplicaciones
- Crear modules
- Crear components
- Crear directivas
- Crear services
- Instala servidor local: ng serve
Para instalar angular-cli, simplemente se ejecuta el comando npm install -g @angular/cli. Una vez instalado, se procede con la creación de la aplicación a través del comando: ng new school-restaurant. Se debería obtener un resultado indicando que todo salió bien:
Cuando se ha instalado la aplicación, se debe posicionar en la carpeta que la contiene y ejecutar con el comando: ng serve –open, con lo cual se obtendría el siguiente resultado:
Versionar la aplicación en GitHub
Es importante tener una herramienta que permita gestionar el versionado del código. Esto se realizará con GitHub. En este post se explica la forma de instalar un cliente GitHub e integrarlo con Visual Studio Code, además de versionar una aplicación.
Abrir y editar el proyecto creado con Visual Studio Code
Visual Studio Code es el editor que el equipo de Angular ha recomendado para crear aplicaciones Angular 4. Para abrir el proyecto recién creado, simplemente se lanza Visual Studio Code y se selecciona el proyecto a abrir:
En la siguiente imagen se puede observar la estructura básica de un proyecto Angular 4:
De esta estructura, lo más importante es la carpeta app donde se trabajará el resto del proyecto. Adicional a esto se han creado muchos archivos de configuración de diferente propósito: ejecución de pruebas unitarias, configuración del proyecto para ambiente de desarrollo o producción, gestión de paquetes…etc. En este link de la documentación oficial se puede encontrar mayor información de la estructura y archivos que componen el proyecto.
Para verificar que todo marcha bien, se puede editar el componente por defecto, como se muestra en la siguiente figura:
Tomado de: https://angular.io/guide/quickstart
Al editar los archivos src/app/app.component.ts y src/app/app.component.css se pueden observar los cambios sin refrescar la página, gracias al live-reload del servidor Angular que se ejecutó al lanzar el comando: ng serve –open este automáticamente recarga la página cada vez que se realiza un cambio en el código y se guarda.
Agregar una imagen personalizada al proyecto
Para agregar una imagen personalizada se recomienda crear una carpeta images o img, dentro del folder assets, y simplemente se referencia esta imagen en el HTML de la vista donde se desea incluir la imagen:
Al ejecutar el proyecto debería tener el siguiente aspecto:
Generación de módulos y componentes básicos de la aplicación:
Angular 4 posee un sistema de módulos, que son agrupadores/contenedores de diferentes activos de la aplicación: components, services, directives…etc. Cada aplicación Angular 4 tiene al menos una clase NgModule, el root module: AppModule. Toda clase module debe tener el decorator @NgModule, este decorator sirve para especificar las siguientes propiedades:
Tomado de: https://angular.io/guide/architecture
Inicialmente se va a generar el módulo: customers, por medio del siguiente comando: ng g module customers.
Posteriormente, se debe registrar este módulo de la aplicación para poder utilizarlo, esto se hace en app/app.module.ts:
Una vez creado el módulo, se procede con la creación de los componentes, en este caso se tendrán los siguientes:
- add: Permite crear nuevos customers.
- list: Permite listar los customers registrados
Para crear un componente add del módulo customers, se puede ejecutar el comando: ng g component customers/add:
Con esto, Angular ha creado los siguientes archivos:
- add.component.css: Especifica todos los estilos visuales (CSS) del componente: fuentes, tamaños de fuente, colores… etc.
- add.component.html: Contiene todo el código de marcado HTML del componente, aquí se especifican las etiquetas HTML que se desean utilizar en el componente: tablas, párrafos, imágenes… etc.
- add.component.spec.ts: Contiene pruebas unitarias que se deseen realizar sobre el componente.
- add.component.ts: En este archivo se especifica el comportamiento o la lógica de programación asociada al componente, aquí se responden los eventos del usuario: click en un botón y cosas así.
Se procede de la misma forma para crear el componente list de customer. Obteniendo el siguiente resultado:
Creación de módulos: customer y orders con sus componentes básicos
Angular posee un sistema de ruteo de vistas que nos permite navegar entre una vista y otra, con esto se podrá crear un menú que permita ir de la vista principal a la vista de add y list del module Customer:
Para esto se creará un componente customers/index que a su vez contendrá los componentes de add y list
Customer. Actualizando el diagrama de clases, se tiene:
Para crear el component index, simplemente se ejecuta: ng g component customers/index.
Nótese que en el archivo customers.module.ts se han referenciado todos los componentes creados en el módulo:
Seguidamente, se procederá con la creación del component menu.component dentro app, este componente permitirá navegar hacia index de Customer. Esto se hará con el comando: ng g component menu obteniendo el siguiente resultado:
Nótese que se tiene el módulo app, que a su vez contiene el módulo customers con los componentes de add, index y list. Dentro del módulo app se tiene el componente menu. Todos estos módulos y componentes se registran en app.module.ts. Agregando el componente de menu al diagrama de clases, se tiene:
En el código todavía faltan las interfaces del modelo Customer y Order. Esto se realizará más adelante.
Incluir componentes menú y current-option dentro del componente principal
Dentro del AppComponent se tendrá el MenuComponent y el CurrentOptionComponent. Los nombres de los component se pueden obtener del archivo .ts del component, por ejemplo, el nombre (selector) del MenuComponent se puede configurar y obtener aquí:
Esto significa que para utilizar el componente MenuComponent, se debe incluir como <app-menu></app-menu> en el archivo app.component.html:
Una vez que se han incluido los componentes MenuComponent (<app-menu>) y CurrentOptionComponent (<app-current-option>), la aplicación debe verse así:
Ruteo (routing)
Dentro del CurrentOptionComponent se tendrá uno de los dos components: customers/IndexComponent u orders/AddComponent. Por lo tanto, se requiere de un mecanismo que permita mostrar un componente u otro, dependiendo de la opción que seleccione el usuario desde el menú.
Para habilitar el routing, lo primero que debe hacerse es decirle a Angular que vamos a utilizar su sistema de ruteo, esto se consigue con la siguiente línea en el index.html <base href=»/»>:
Posteriormente, se debe importar el módulo de routing, los componentes y configurar las rutas en el app.module.ts:
Observese que la ruta para ir a orders es orders/add y para ir a customers es customers/index, a cada una de las rutas en el arreglo se le especifica el componente que se debe renderizar cuando se cargue la ruta.
Luego, en el CurrentOptionComponent (<app-current-option></app-current-option>) incluímos el contenedor de rutas, donde se mostrará el componente seleccionado, según la ruta elegida: <router-outlet></router-outlet>.
De esta forma, se le está indicando a Angular 4, que el componente CurrentOptionComponent (<app-current-option></app-current-option>) va a contener cualquiera de los componentes que se active en las rutas, ya sea: customers/IndexComponent u orders/AddComponent.
Para finalizar, en el componente MenuComponent, se incluyen los links que van a cargar cada una de las opciones: customers y orders, esto se hace con el attributo routerLink del elemento <a>:
Observese que las rutas especificadas en el atributo routerLink corresponden a las mismas rutas definidas en el arreglo appRoutes del archivo app.module.ts como se vió anteriormente.
La ejecución de la aplicación debe verse de la siguiente manera:
Se puede observar que el componente inferior de la página: CurrentOptionComponent muestra una u otra vista, dependiendo de la ruta seleccionada.
En el próximo post se verá como instalar una librería de componentes gráficos llamada Angular Material para construir elementos avanzados en la interfaz de usuario, de igual forma se construirá el formulario para agregar customer, así como el Grid donde se listarán los customers ya creados.
El código puede descargarse desde el siguiente repositorio de GitHub: angular4-crud-example.
Jose Ubaldo Carvajal 