Este tutorial muestra cómo se puede implementar la siguiente aplicación de libro de visitas:
Se necesitan las siguientes aplicaciones:
Instalación de Angular CLI
npm install -g @angular/cli
Generar nuevo proyecto (libro de visitas)
ng new guestbook
Instalación de la biblioteca Bootstrap vía gestor de paquetes ’npm’:
npm install –save bootstrap
Iniciar servidor de desarrollo para probar la aplicación:
ng serve
La aplicación está posteriormente disponible en la siguiente dirección:
http://localhost:4200/
Importación del proyecto en Visual Studio Code. Como se puede ver, dentro de index.html aparece una etiqueta
Con la etiqueta
El contenido del archivo TypeScript ‘app.component.spec.ts’ se mostrará más tarde como JavaScript en lugar de la etiqueta.
TypeScript es un lenguaje de programación desarrollado por Microsoft, basado en las propuestas para el futuro estándar ECMAScript 6. Constructos de lenguaje de TypeScript, como clases, herencia, módulos, funciones anónimas y genéricos, también fueron adoptados en ECMAScript 6.
El compilador de TypeScript desarrollado por Microsoft compila código TypeScript a ECMA Script 3 (ES3) y opcionalmente a ECMA Script 5 (ES5). Cualquier código JavaScript es también un código TypeScript válido, de modo que bibliotecas JavaScript comunes (como jQuery o AngularJS) pueden usarse en TypeScript. [wikipedia]
Además del archivo de configuración, disponemos de una visión general de todos los módulos utilizados (NgModules) y las funciones dentro de ‘app.modules.ts’.
Los paquetes necesarios (dependencies) se encuentran en ‘package.json’.
Toda la aplicación se inicia a través del archivo ‘main.ts’. Este se ejecuta primero.
Orden de los pasos:
1. Cargar ‘AppModule’
2. Cargar todos los ‘AppComponent’
3. Inyectar los componentes como etiqueta ‘app-root’ dentro de index.html
Se puede crear un nuevo componente con el siguiente comando:
ng generate component name
o
ng g c name
Para implementar la aplicación prevista, se necesitan los siguientes componentes:
- Root component
- Header component
- Message creation component
- Message list component
- Message edit component
Tras la creación de los componentes, se declaran bajo @NgModule. Sin embargo, los componentes no se especifican en bootstrap. Bootstrap hace referencia al componente raíz.
Los componentes creados se pueden probar usando las etiquetas correspondientes:
Para implementar la interfaz de usuario (UI), usaremos Bootstrap:
npm install –save bootstrap
El CSS de Bootstrap se puede importar después en ‘angular.json’:
Tuve que reiniciar el servidor después.
Una página con Bootstrap puede tener, por ejemplo, el siguiente aspecto:
https://jsfiddle.net/netperformance/a6qwk8bm/
Dentro del proyecto, las páginas se estructuran y anidan de la siguiente manera:
Los códigos fuente de los diferentes componentes se pueden encontrar aquí:
- app.component.html
- header.component.html
- message-creation.component.html
- message-list.component.html
- message-edit.component.html
Como se puede ver en la siguiente imagen, he insertado tres conjuntos de datos de ejemplo (messages):
Para crear los datos, primero debemos generar una clase de mensaje vía
TypeScript como se muestra en message.model.ts
A continuación, dentro de la lista de mensajes (message-list.component.ts), podemos crear los objetos o instancias de la clase ‘Message’:
Para mostrar o leer la matriz ‘Message[]’, podemos usar la directiva Angular ‘ngFor’ dentro de ‘message-list.component.html’. El uso de las directivas queda habilitado al incluir ‘BrowserModule’ en ‘NgModules’:
La estructura de la página y los mensajes creados también se pueden visualizar fácilmente con la aplicación Augury:
A continuación, al hacer clic en el enlace ’edit’, quiero reemplazar la lista de mensajes de la derecha por ‘message-edit.component.html’. Para ello, primero debemos activar el ‘Routing’:
Después, podemos indicar dónde queremos usar el routing mediante ‘
Ahora solo falta ajustar el enlace ’edit’ correspondientemente:
Por último, debemos especificar el ‘base href’ dentro de index.html:
El resultado es el siguiente:
