Primeros pasos
Qué es Angular y cómo aprenderlo
Instalación de Angular CLI
Comandos de Angular para correr tu proyecto
Estructura de un proyecto en Angular
Conceptos básicos de TypeScript para usar Angular
Comunicación de datos
String interpolation
Property Binding
Introducción al Event Binding de Angular
Otros eventos que puedes escuchar
Data binding con ngModel
Estructuras de control
Uso de *ngIf
Uso de *ngFor
*ngFor para arrays
Uso de *ngSwitch
Angular Devtools
Estilos
Estilos a la lista de productos
Class and style
NgClass y NgStyle
Crear un formulario
Despedida
Continúa con el Curso de Angular: Componentes y Servicios
Deploy
Despliegue con Firebase Hosting
Para comenzar con Angular, en primer lugar, se requiere tener instalado en tu computador NodeJS y NPM. Puedes verificar dicha instalación con el comando node -v y npm -v.
TIP: Se recomienda utilizar siempre versiones pares de NodeJS (10, 12, 14) ya que a estas se les darán mantenimiento a lo largo de muchos años.
Comienza instalando el CLI de Angular con el comando npm install -g @angular/cli. Nótese el -g que indica que instalaremos Angular de manera global en tu computador para la posterior creación de tu primer proyecto.
CLI son las siglas de Common Line Interface o Interfaz de Línea de Comandos. Son programas para darle ordenes al computador y ejecutar tareas y procesos a través de comandos de texto.
Luego de la instalación del Angular CLI, puedes utilizar ng version para corroborar la versión instalada de Angular (actualmente v13). Angular lanza una nueva versión cada 6 meses introduciendo mejoras. No debes preocuparte por utilizar una o varias versiones detrás de la actual. Las versiones de Angular son totalmente compatibles entre sí y no tendrá problemas tu aplicación.
Para crear tu primer proyecto, basta con el comando ng new myFirstProject. El CLI de Angular te realizará las siguientes preguntas:
Would you like to add Angular routing?Which stylesheet format would you like to use?
Primero pregunta si deseas emplear Angular Routing para la creación de rutas en tu aplicación. Se recomienda contestar siempre Yes, ya que, rara vez, una app no tendrá rutas. La segunda pregunta que realiza es si se desea utilizar un preprocesador de CSS pudiendo escojer entre SCSS, SASS, LESS o no utilizar un preprocesador. Se recomienda utilizar SCSS ya que es el más utilizado en la industria.
Luego de la creación de tu primer proyecto (puede demorar unos minutos en crearse) es hora de correr el servidor de desarrollo que Angular trae para hacer pruebas.
Ingresamos al directorio de nuestro proyecto:
cd myFirstProject
Y lanzamos el servidor de desarrollo con:
ng serve
Este comando preparará la aplicación para un entorno de desarrollo, no debe usarse en entornos productivos. Si ingresamos a localhost:4200/ podrás observar tu primera aplicación de Angular.
Aporte creado por: Kevin Fiorentino.
Aportes 27
Preguntas 24
Verifica versión de Node: node -v
Verifica versión de npm: npm -v
Instala el CLI de Angular: npm -g @angular/cli
Verifica tu instalación: ng version
Crea tu primer proyecto: ng new my-project
Ejecuta el servidor de desarrollo: ng serve Dentro de la carpeta de tu proyecto.
RESUMEN:
VERIFICAR VERSIÓN DE NODE
-> node -v
-> node --version
VERIFICAR VERSIÓN DE NPM
-> npm -v
-> npm --version
INSTALAR EL CLIENTE DE COMANDOS DE ANGULAR
-> npm i -g @angular/cli
VERIFICAR VERSIÓN DE ANGULAR CLI
-> ng version
CREAR TU PRIMER APLICACIÓN
-> ng new my-store
EJECUTAR UN SERVIDOR PARA VER NUESTRO PROYECTO
-> ng serve
Se menciona como preprocesador de hojas de estilos Sass pero la opción que escoge no es la tercera Sass sino la segunda "SCSS [ https://sass-lang.com/documentation/syntax#scss "
el preprocesador que usa en el curso es scss, yo creo que se confundio cuano dijo sass…
Si estas utilizando MAC, para instalar el CLI de Angular:
sudo npm i -g @angular/cli
me dio este error:
Warning: The current version of Node (16.11.0) is not supported by Angular.
verificando version de Node: node -v
Version de npm : npm -v
en mi caso no tenia ninguno de los anteriores intalado y lo qu ehice fue instalarlos con los comandos siguientes pero antes corriendo la actualizacion:
sudo apt-get update
sudo apt install nodejs
sudo apt install npm
y luego el cli de angular:
sudo apt i -g @angular/cli
y haciendo esto pude seguir al profesor.
Si tenemos algun problema con el cli podemos desistalar e instalar
npm uninstall -g @angular/cli
npm cache verify
npm install -g @angular/[email protected]
ng version
Para instalacion en wsl con Ubuntu por si les aparece errores por la versionamiento del Node https://ubunlog.com/angular-instala-framework-ubuntu/#Instalacion_de_NodeJs_y_NPM
Para los que no saben como se llegó a esa pantalla y están en windows: Primero abran PowerShell desde el inicio como administrador y se les abrirá la consola.
Despues de verificar las versiones pueden instalar Angular con este comando: npm install -g @angular/cli
Luego de hacer los demas pasos a veces sale un error que dice algo asi como: Set-ExecutionPolicy, lo pueden solucionar con este comando: Set-ExecutionPolicy Unrestricted y le dicen que sí. Listo!
El comando ng new crea una carpeta de espacio de trabajo de Angular y genera un nuevo esqueleto de aplicación. Un espacio de trabajo puede contener múltiples aplicaciones y bibliotecas. La aplicación inicial creada por el comando ng new está en el nivel superior del espacio de trabajo.
No me pregunto nada, solo se instalo
Comandos Resumidos de clase:
Verifica versión de Node: node -v
Verifica versión de npm: npm -v
Instala el CLI de Angular: npm i -g @angular/cli
Verifica tu instalación: ng version
Crea tu primer proyecto: ng new my-project
Ejecuta el servidor de desarrollo: ng serve Dentro de la carpeta de tu proyecto.
Esto me ayudó a instalar nodejs en linux mint:
https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04-es
La tercera forma de instalación fué la que me sirvió a mi y te permite saltar de una versión de nodejs a otra con comandos que usan “nvm” que es como los comandos de git.
Crear nueva aplicación ng new "nombre"
Para actualizar NodeJs, fácil y sin tanto pedo, consultar el siguiente vinculo:
https://github.com/nodesource/distributions/blob/master/README.md
De esta forma se puede actualizar en versiones de Linux derivadas de Debian o Ubuntu:
Node.js LTS (v16.x):
# Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
# Using Debian, as root
curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
apt-get install -y nodejs
Cuando cree la aplicación, no me hicieron esas preguntas, que si quería usar preprocesador Sass o scss, es la segunda vez que creo una nueva app en Angular… Alguien me podría responder cómo verificar si estoy utilizando el mismo preprocesador que el profesor o como poder configurarlo si en tal caso no estoy utilizando ese preprocesador de CSS?
por si quiere cambiar la versión de mongo pueden hacerlo con nvm(node version manager)
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@angular/[email protected]12.2.10',
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE yarn: '>= 1.13.0'
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: 'v16.11.0', npm: '8.0.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@angular-devkit/[email protected]0.1202.10',
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE yarn: '>= 1.13.0'
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: 'v16.11.0', npm: '8.0.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@angular-devkit/[email protected]12.2.10',
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE yarn: '>= 1.13.0'
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: 'v16.11.0', npm: '8.0.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@angular-devkit/[email protected]12.2.10',
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE yarn: '>= 1.13.0'
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: 'v16.11.0', npm: '8.0.0' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '@schematics/[email protected]12.2.10',
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE yarn: '>= 1.13.0'
npm WARN EBADENGINE },
npm WARN EBADENGINE current: { node: 'v16.11.0', npm: '8.0.0' }
npm WARN EBADENGINE }
npm WARN deprecated [email protected]3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]5.1.5: this library is no longer supported
npm WARN deprecated [email protected]2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
added 235 packages, and audited 236 packages in 12s
23 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
npm notice
npm notice New minor version of npm available! 8.0.0 -> 8.1.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.1.0
npm notice Run npm install -g [email protected]8.1.0 to update!
npm notice
Profe deberías sacar un curso actualizado de Ionic
Comandos para ver la versión de node:
-> node -v
-> node --version
Puedes ver la versión de esas dos formas, lo mismo para npm.
Excelente , el curso, Saludos
Pero si funciona
Tengo Linux Mint y me daba errores al instalar el CLI de Angular, lo solucione precediendo el comendo con sudo
creacion del nuevo programa.
ng version
Angular CLI: 12.2.7
Node: 14.17.6
Package Manager: npm 6.14.15
OS: linux x64
Angular:
…
@angular-devkit/architect 0.1202.7 (cli-only)
@angular-devkit/core 12.2.7 (cli-only)
@angular-devkit/schematics 12.2.7 (cli-only)
@schematics/angular 12.2.7 (cli-only)
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.