Mi primera aplicación en Angular

Instalación de las herramientas

Node.js y Npm

Para la configuración de una aplicación en Angular se requiere de Node.js. Node.js es un ambiente de programación basado en el lenguaje JavaScript. Las instrucciones para su configuración la podemos encontrar en el sitio oficial https://nodejs.org. Este reúne numerosos módulos en su instalación, llamados paquetes y pueden ser incorporados nuevos módulos a través de npm.

Npm es un manejador de paquetes de Node.js. Permite la compilación, instalación y actualización de dependencias de repositorios de código abierto en un proyecto a través de la interfaz de líneas de comando, así como la ejecución de scripts para el desarrollo, el despliegue y ejecución de pruebas unitarias. El sitio oficial para npm es https://www.npmjs.com/.

Angular CLI

Además, necesitamos para facilitar el proceso de creación de un proyecto la herramienta Angular CLI, que posibilita también agregar archivos y ejecutar una variedad de tareas para el desarrollo. Hace que todo se realice de forma rápida y sencilla.

Para instalar globalmente Angular CLI es necesario ejecutar el siguiente comando:

Creación de la nueva aplicación

Angular CLI nos permite generar un nuevo proyecto por defecto con todos los archivos necesarios para su ejecución a través del siguiente comando:

Al ejecutar este, como explicamos anteriormente, se crean todos los archivos de la aplicación, pero también se instalan a través de npm todas las dependencias o módulos necesarios.

Los archivos introducidos en este proceso, como son las carpetas src y e2e son utilizados para el desarrollo, mientras los que se encuentran fuera de las mismas determinan el ambiente de desarrollo como son package.json, node_modules y tsconfig.json. Estos no son los únicos, pero se encuentran dentro de los más necesarios conocer. A continuación, los detallamos con más claridad:

• src: Se incluyen todos los archivos de la aplicación (módulos, componentes, etc.).

• e2e: End-to-End (e2e). Se hallan todos los test de la aplicación, escritas en Jasmine.

• node_modules: Se encuentran todos los paquetes de npm.

• package.json: Permite definir las dependencias de paquetes npm en el proyecto.

• tsconfig.json: Indica al compilador de TypeScript como convertir los archivos de este lenguaje a JavaScript.

Para ejecutar la aplicación ejecutamos el siguiente comando dentro de la carpeta de la aplicación:

Este construye la aplicación e inicia el servidor de desarrollo, lo que nos permite vigilar los cambios en los archivos y actualizarlos en la aplicación. Además, nos abre una nueva pestaña en el navegador en la dirección http://localhost:4200/ con la ejecución del programa.

Extensiones para Angular

Antes de desarrollar nuestra aplicación en Angular debemos contar con las herramientas adecuadas. Entre los editores más usados podemos encontrar VSCode y Atom. Como hemos mencionado en otros artículos estos se basan en la instalación de extensiones. Entre las más usadas para Angular podemos encontrar las siguientes:

Extensiones para Visual Studio Code

VS Code Angular Extension Pack (vscode:extension/loiane.angular-extension-pack): Esta extensión se encuentra dentro de las más populares para Angular con miles de descargas. Su autor es Loiane Groner y la versión más reciente es la 0.6.0. Incluye en su instalación a otras múltiples extensiones útiles para el desarrollo de un proyecto, como son los fragmentos de código para las diferentes versiones de Angular, Angular Material 2, Flex Layout 1, Covalent 1 y Material icon, generación de pruebas unitarias automáticas a partir del código, permitir depurar la aplicación con el Chrome y marcar los puntos de interrupción en el VSCode, enriquecer el editor de plantillas Angular, entre otras muchas.

Extensiones para Atom

Atom Angular TypeScript & Html Snippets (atom://settings-view/show-package?package=angular-snippets): Posee fragmentos de código para Angular 2, 4, 5, 6 y 7 y para Angular Material. La misma esta optimizada para desarrolladores Angular y no para AngularJS.