0% encontró este documento útil (0 votos)
4 vistas4 páginas01 05 00 NuevoProyectoAngular UAC
El documento es una guía paso a paso para crear un nuevo proyecto Angular utilizando Angular CLI y Visual Studio Code. Incluye instrucciones sobre cómo navegar al directorio de trabajo, crear el proyecto, configurarlo, ejecutarlo y personalizarlo. También se mencionan comandos específicos y opciones de configuración para adaptar el proyecto a diferentes necesidades.
Cargado por
Emilio Jose Tabales MuñozDerechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
4 vistas4 páginas01 05 00 NuevoProyectoAngular UAC
El documento es una guía paso a paso para crear un nuevo proyecto Angular utilizando Angular CLI y Visual Studio Code. Incluye instrucciones sobre cómo navegar al directorio de trabajo, crear el proyecto, configurarlo, ejecutarlo y personalizarlo. También se mencionan comandos específicos y opciones de configuración para adaptar el proyecto a diferentes necesidades.
Cargado por
Emilio Jose Tabales MuñozDerechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
/ 4
Ing.
Ubaldo Acosta Universidad Angular
Creación de un Proyecto de Angular
Crear un Nuevo Proyecto Angular con Visual Studio Code
En esta lección, aprenderás a crear un nuevo proyecto Angular utilizando Angular CLI y
cómo configurarlo y ejecutarlo desde Visual Studio Code. Esta es una guía paso a paso que
te llevará desde la creación del proyecto hasta verlo en acción en tu navegador.
Crear un Nuevo Proyecto Angular
1. Navegar al Directorio de Trabajo:
o En la terminal integrada de Visual Studio Code, navega al directorio donde
deseas crear tu nuevo proyecto. Puedes usar el siguiente comando para
cambiar de directorio:
cd ruta/del/directorio
2. Crear el Proyecto Angular:
o Una vez que estés en el directorio deseado, ejecuta el siguiente comando
para crear un nuevo proyecto Angular:
ng new nombre-del-proyecto
o Reemplaza nombre-del-proyecto con el nombre que desees para tu
proyecto.
http://www.globalmentoring.com.mx 1
Ing. Ubaldo Acosta Universidad Angular
o Esto crea un nuevo proyecto de Angular con las últimas características
disponibles en la última versión.
o Si deseas crear un proyecto de Angular que utiliza la sintaxis clásica (Ej.
Manejo de Módulos en lugar componentes Standalone), y no las últimas
características por default, entonces debes crear tu proyecto usando el
siguiente comando:
ng new nombre-del-proyecto --standalone=false
o El parámetro standalone=false es para hacer compatible los proyectos que
crees con las versiones anteriores de Angular. Si deseas usar las últimas
características de Angular por default (como componentes standalone)
entonces puedes evitar el uso de este parámetro.
3. Configuración del Proyecto:
o Angular CLI te hará algunas preguntas para configurar tu proyecto:
▪ Would you like to share pseudonymous usage data about this
project with the Angular Team at Google under Google's Privacy
Policy at https://policies.google.com/privacy. For more details and
how to change this setting, see https://angular.dev/cli/analytics.
(y/N) Proporciona: N
▪ Estilo de hojas de estilo: Selecciona el formato de hojas de estilo
que prefieras (CSS, SCSS, SASS, etc.). Ej. Selecciona CSS (con las
flechas hacia arriba o hacia abajo) y da enter.
▪ Do you want to enable Server-Side Rendering (SSR) and Static Site
Generation (SSG/Prerendering)? (y/N). De momento no necesitamos
agregar esta característica, por lo tanto proporciona N.
▪ ¿Deseas agregar Angular routing?: Si te pregunta por esta opción,
esto permite agregar usar rutas en tu aplicación (navegación entre
diferentes páginas o componentes). De momento proporciona N.
Por default se agrega Angular routing a tus proyectos, así que puede
ser que en las últimas versiones ya no te pregunta por esta opción.
4. Angular CLI Genere el Proyecto:
o Angular CLI generará el proyecto y descargará las dependencias necesarias.
Esto puede tomar unos minutos.
5. Abrir el Proyecto en Visual Studio Code:
http://www.globalmentoring.com.mx 2
Ing. Ubaldo Acosta Universidad Angular
o Si no lo has hecho ya, abre Visual Studio Code y selecciona File > Open
Folder....
o Navega a la carpeta del proyecto que acabas de crear y ábrela.
Paso 3: Ejecutar el Proyecto Angular
1. Iniciar el Servidor de Desarrollo:
o Con el proyecto abierto en Visual Studio Code, abre la terminal integrada
(Ctrl+ o Cmd+ en macOS).
o Ejecuta el siguiente comando para iniciar el servidor de desarrollo:
ng serve
o Angular CLI compilará la aplicación y lanzará un servidor de desarrollo en
http://localhost:4200.
2. Ver la Aplicación en el Navegador:
o Una vez que el servidor de desarrollo esté ejecutándose, abre tu navegador
y visita http://localhost:4200.
o Deberías ver la aplicación Angular por defecto, con una pantalla de
bienvenida de Angular.
3. Monitoreo de Cambios:
o El servidor de desarrollo continuará ejecutándose y observará cualquier
cambio que realices en el código. Cualquier modificación se reflejará
automáticamente en el navegador sin necesidad de recargar la página.
Paso 4: Editar y Personalizar tu Proyecto Angular
1. Editar el Componente Principal:
o Abre src/app/app.component.html en el editor de Visual Studio Code.
o Modifica el contenido de este archivo para cambiar lo que se muestra en la
página principal de tu aplicación Angular.
o Guarda los cambios y observa cómo se actualiza automáticamente en el
navegador.
2. Agregar Nuevos Componentes (esto lo estudiaremos a detalle posteriormente en
el curso):
o Puedes agregar nuevos componentes a tu proyecto utilizando Angular CLI.
Por ejemplo, para crear un nuevo componente llamado mi-componente:
http://www.globalmentoring.com.mx 3
Ing. Ubaldo Acosta Universidad Angular
ng generate component mi-componente
o Esto creará un nuevo componente y lo registrará automáticamente en tu
aplicación.
3. Ejecutar Comandos desde la Terminal Integrada:
o Puedes seguir ejecutando otros comandos de Angular CLI desde la terminal
integrada en Visual Studio Code para agregar servicios, módulos, rutas, etc
(estos temas los estudiaremos a detalle posteriormente en el curso).
Nota: Si por alguna razón no puedes ejecutar estos comandos, recuerda iniciar Visual
Studio Code en modo administrador y asegurarte que tengas los permisos necesarios en
las carpetas donde deseas crear tu proyecto, ej. C:\Cursos\Angular
Conclusión
¡Felicidades! Has creado y ejecutado con éxito un proyecto Angular utilizando Visual
Studio Code. Visual Studio Code te proporciona todas las herramientas necesarias para
escribir, depurar y gestionar tu código de manera eficiente, así que estamos listos para
empezar a trabajar con Angular.
¡Saludos!
Ing. Ubaldo Acosta
Fundador de GlobalMentoring.com.mx
http://www.globalmentoring.com.mx 4
