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.
Continuaremos con una integración de Angular con FireBase, posteriormente haremos la integración con AWS.
Top comments (0)