DEV Community

Cover image for Primeros Pasos con Angular.
Edison Sanchez
Edison Sanchez

Posted on

Primeros Pasos con Angular.

No vamos a entrar en que es Angular, vamos directamente en manejar y crear un proyecto angular con Angular 9. Los comandos a emplear serán con Angular CLI:

  • ng new: Crear un nuevo proyecto con todas las librerías necesarias.
  • ng generate: Para generar los elementos, componentes, rutas, etc que necesita el proyecto; evitando repetir código o hacerlo manualmente.
  • ng serve: Es para correr la aplicación en el localhost.
  • Test y Lint permiten correr pruebas unitarias.

Extensiones de VSCode recomendadas

  • Prettier.
  • TSLint.
  • Angular 8 Snippets.
  • Angular 9 Snippets.
  • ES6 Snippets
  • ESLint
  • Bracket Pair Colorizer 2.
  • Babel ES6/ES7. Aumentar el tamano maximo de caracteres por linea (default: 80) para pasarlo a 140. En Settings.json de usuario o Workspace.
  "prettier.singleQuote": true,
  "prettier.printWidth": 140,
Enter fullscreen mode Exit fullscreen mode

Instalacion

Suponiendo que tienes instalado NPM LTS,
Instalar Angular Cli

npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

Crear un Proyecto

Instalado previamente el CLi, ahora crearemos un proyecto, en este caso lo llamare AngularTypescript.

ng new Angular-Typescript
Enter fullscreen mode Exit fullscreen mode

A las preguntas respondemos:

  • Yes, a la pregunta si queremos el routing de Angular.
  • Seleccionamos el Styling (ej. SCSS).

Creara entonces todos los archivos necesarios basados en Typescript, toda la configuración de angular estará en angular.json; también un .gitignore para evitar las rutas que serian carga para el repositorio.

En la carpeta src, los assets donde pondremos las imágenes, etc. Environments serán todos los ambientes tanto de desarrollo, produccion, stagging, etc; esto permite identificar las diferentes rutas a servidores y demás. En la carpeta app estana los primeros components y archivos para el funcionamiento de la aplicación.

Configurando el Proyecto.

Desactivamos el cache de la consola de Chrome. Con la consola abierta, settings, network, Disable Cache.

Si es necesario hacer un downgrade se puede hacer a las versiones de Angular, o por temas de compatibilidad al rxjs; después hacer un:

npm update
Enter fullscreen mode Exit fullscreen mode

Finalmente para correr el proyecto se ejecuta:

ng serve
Enter fullscreen mode Exit fullscreen mode

Esta compilación rápida para desarrollo, para subir al repositorio o a producción deberá hacerse un Build. Vamos a la dirección del localhost en el puerto 4200.
First Project in Angular 10

Continuaremos con una integración de Angular con FireBase, posteriormente haremos la integración con AWS.

Top comments (0)