Mi primera aplicaci贸n en Angular

Mi primera aplicaci贸n en Angular

Mi primera aplicaci贸n en Angular

Hola a todos, hoy nuestro equipo de DevSun Europe contin煤a con la serie de publicaciones relacionados con Angular. En el presente art铆culo generamos una aplicaci贸n Angular b谩sica. Para ello explicamos las herramientas necesarias para cometer esta tarea. Describimos varios de los archivos que de forma autom谩tica se crean en una aplicaci贸n y recomendamos algunas extensiones para los editores m谩s comunes para desarrollar 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:

npm install -g @angular/cli
Angular
Foto de Dribble por: Anano Miminoshvili

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:

ng new

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:

ng serve --open

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.

Realizado todos los pasos anteriores ya podemos comenzar a trabajar en nuestra aplicaci贸n. En pr贸ximos art铆culos nuestro equipo de DevSun Europe continuar谩 indagando sobre las caracter铆sticas y funcionalidades que brinda Angular.


Total de Vistas: 424
Like
Like Love Haha Wow Sad Angry
7

You may also like

 

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Publicaci贸n recomendada
Scroll Up