Como crear un proyecto en Angular

Compartir en:
Como crear un proyecto en Angular

Crear un proyecto en angular es algo muy sencillo, debido a que solamente es necesario ejecutar una serie de comandos y seleccionar una serie de opciones de la que se quiere crear en el proyecto y finalmente el proyecto se creará automáticamente con todos los ficheros y archivos que necesita para su correcto funcionamiento, por lo cual te recomiendo que leas todo este tutorial para que no tengas ningún problema al crear un proyecto en angular.

Para crear un proyecto en angular obviamente es necesario tener previamente instalado Angular, para lo cual si no lo tienes instalado te recomiendo que visites en el siguiente enlace, donde se encuentra un tutorial completo de cómo instalar angular en tu computadora de manera muy sencilla.

Instalar Angular

👊 ¿QUIERES INCREMENTAR TUS CONOCIMIENTOS EL FRAMEWORK ANGULAR? 👊

Entonces te recomiendo tomar este curso de Angular donde aprenderás a programar desde cero hasta convertirte en un experto, realizando varios ejercicios prácticos para que puedas aprender de una mejor manera.

👇

Proceso para crear un proyecto en Angular

Antes de empezar el proceso para crear un proyecto en angular, es necesario crear una carpeta donde quieras guardar todos tus proyectos que quiera realizar, esta carpeta la puedes guardar el lugar donde tú prefieras, seguido de eso debes de abrir una terminal y colocarte en la carpeta donde quieres crear el proyecto. Si estás utilizando el sistema operativo macOS simplemente debes de dar clic derecho y ahí te va a dar la opción para abrir una nueva terminal en esa carpeta.

Abrir terminal en carpeta

Una vez en la terminal debemos de colocar un comando muy simple para crear un proyecto, el cual es el siguiente.

ng new New-Angular-Project

En esta ocasión el proyecto se llama New-Angular-Project pero ahí puede sustituir ese nombre por el que tu prefieras, seguido de eso te va a preguntar si quieres agregarle rutas al proyecto, en este caso cómo va a hacer un proyecto sencillo inicial, le vamos a colocar no.

Proceso de creación de proyecto Angular

A continuación nos va a preguntar qué tipo de archivo de estilos vamos a utilizar para nuestro proyecto. dentro de nuestras opciones tenemos CSS común, archivos de SASS y archivos de LESS. En esta ocasión cómo va a hacer un proyecto inicial vamos a dejar la opción principal que es CSS.

Seleccionar CSS en Angular

Una vez que hayamos seleccionado el fichero de estilos, vamos a proceder a continuar con la creación del proyecto, para lo cual se van a empezar a crear todos los ficheros necesarios para el funcionamiento, esto puede demorar algunos minutos.

Instalación del proyecto en Angular

Si se siguieron todos los pasos correctamente y también se tiene instalado angular correctamente, al final de crear un proyecto en angular se debe de ver una pantalla muy similar a la que se presenta continuación, donde nos indica que todos los paquetes se instalarón correctamente y también se inicializaron correctamente.

Creación de proyecto exitosa

También para comprobar que el proceso de crear un proyecto en Angular se realizó correctamente, debes de ir a tu carpeta que creaste, donde se iban a crear todos los proyectos de angular, dentro de esa carpeta debe de existir una carpeta nueva con el nombre del proyecto que creaste y dentro de esa carpeta debes encontrar una serie de archivos y carpetas se contienen todos los ficheros necesarios para utilizar angular.

Archivos de un proyecto en angular

👊 ¿NECESITAS UN HOSTING PARA TU PAGINA WEB O TIENDA ONLINE? 👊

Entonces te recomiendo usar Hostinger, que cuenta con una gran cantidad de ventajas y herramientas para crear tu Web de manera sencilla y profesional.

Estas son una de las características al contratar Hostinger:

💽 Hospedaje Profesional

💻 Sitio Web seguro con SSL

🔋 Velocidad de procesamiento

🖲 Interfaz fácil de usar

💰 Dominio Gratis

Entre muchas otras cosas mas…

Inicialización del servidor de Angular

Algo muy bueno que tiene angular es que se ejecuta a través de un servidor, el cual va mostrando los cambios en tiempo real, para lo cual es necesario inicializar ese servidor para poder observar tu proyecto nuevo creado en angular.

Para inicializar el servidor es necesario colocar el siguiente código dentro de nuestra terminal que está ubicada en el proyecto nuevo que creamos.

ng serve –open

Además cuando inicializamos el servidor por primera vez nos va a decir que si queremos permitir que Google use información de nuestro proyecto, para el cual nosotros nos vamos a poner que no.

Inicialización del servidor Angular

Este proceso de inicializar el servidor va a tomar algunos segundos, pero una vez que está inicializado se nos va a presentar una pantalla como la que se presenta a continuación, la cual nos va a dar una serie de información de lo que se está corriendo.

Servidor Corriendo

Mientras esté corriendo el servidor vamos a poder observar nuestra página creada en angular, pero en caso de que queramos terminar el servidor simplemente debemos de colocar las Ctrl+C y automáticamente se termina el servidor, y para poder iniciarlo de nuevo hay que volver a correr el comando anterior.

En la siguiente imagen se ve una pantalla de cómo es un proyecto nuevo en angular, que cuenta con información por defecto y estilos por defecto, lo cual significa que si tu pantalla se ve así seguiste el proceso de crear un proyecto en angular correctamente y ya lo siguiente es ir modificando cada uno de los archivos para realizar tu proyecto como tú lo desees.

Proyecto Angular