loading...
Cover image for Primeros Pasos con Angular.

Primeros Pasos con Angular.

edisonsanchez profile image Edison Sanchez ・2 min read

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,

Instalacion

Suponiendo que tienes instalado NPM LTS,
Instalar Angular Cli

npm install -g @angular/cli

Crear un Proyecto

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

ng new Angular-Typescript

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

Finalmente para correr el proyecto se ejecuta:

ng serve

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.

Posted on by:

edisonsanchez profile

Edison Sanchez

@edisonsanchez

Programming... React, React Native, JScript, AWS Serverless, Postgresql, Angular, IONIC, Python, and counting...

Discussion

markdown guide