Angular esencial

Inicialización y elementos de un proyecto Angular

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección aprenderemos a usar la línea de comandos de Angular para automatizar la creación de una aplicación. Aprenderemos también los comandos de la consola para crear diferentes elementos requeridos dentro de una aplicación.
06:31

Transcripción

Vamos a examinar los diferentes archivos y carpetas que conforman un proyecto de Angular 4. Acá yo estoy trabajando dentro de Visual Studio Code y tengo un proyecto que he creado previamente utilizando la línea de comandos de Angular. Este es un proyecto que se ha creado de forma automatizada y ya tiene una serie de patrones predefinidos. En el momento en que creas tu proyecto utilizando la línea de comando de Angular, vas a tener un proyecto muy similar a este. Ahora vamos a examinar los diferentes archivos que lo componen. Tenemos acá de partida una carpeta llamada'E2e'. Esta carpeta nos va a servir para realizar las pruebas de "end to end". Esto significa que nosotros vamos a utilizar'protractor'que se encuentra también un archivo donde define su configuración para poder realizar pruebas dentro del navegador y examinar funcionalidades completas dentro de nuestra aplicación. Esta es una excelente práctica y te recomiendo que siempre que hagas una aplicación incluyas este tipo de pruebas. Acá, por ejemplo, se incluye una prueba básica donde vemos, por ejemplo, que se evalúa la funcionalidad de un texto que se encuentre dentro de nuestra aplicación. Si ejecutadas, por ejemplo, el comando 'ng e2e', vas a ejecutar las pruebas que se encuentran dentro de esta carpeta. En este caso, como podemos ver, se está ejecutando dentro de un servidor local, se va a abrir una instancia del navegador y va a evaluar que se encuentren todos los diferentes elementos que está examinando esta prueba. Por ahora me va a funciona todo correctamente, porque estamos trabajando con elementos predefinidos. Vemos que mi aplicación está funcionando correctamente. Continuamos con otra carpeta llamada'Node_modules'. En esta carpeta nosotros tenemos todos los módulos relacionados con nuestro proyecto. Como podemos ver, son muchos y posiblemente esta carpeta tarde un tiempo en instalarse dentro de tu equipo, dependiendo de la velocidad de Internet, aunque tengas una Internet rápida esto va a tomar un tiempo. Ahora quiero que tomes en cuenta un detalle: aunque esta carpeta es particularmente grande, no significa que esta carpeta la vamos a incluir dentro de nuestros de proyectos, no significa que cuando tengas una aplicación va a medir lo que mide esta carpeta. Simplemente son unos archivos base que nos van a servir a nosotros para crear las aplicaciones, pero una vez que terminemos solo vamos a necesitar algunas partes de lo que está acá, específicamente para crear nuestra aplicación. Ahora, otro detalle importante con los "modules" es que muy posiblemente si descargas un proyecto desde un repositorio, no esté incluida esta carpeta. Esto, precisamente porque es una carpeta particularmente grande con archivos que ya se encuentran dentro de Internet y que puedes descargarlos. Así que quiero que revises dentro del archivo'package. jason' donde aparecen acá las diferentes instancias que nosotros vamos a necesitar para desarrollar nuestra aplicación. Conforme tu aplicación vaya evolucionando, va a ir agregando diferentes módulos y dependencias. Estos se van a ir instalando dentro de'Node_modules'. Cuando compartes un archivo o cuando descargas este proyecto de un repositorio, en caso de que no tenga esta carpeta'Node_modules', y eso sería lo común, que no la incluya, lo que debes hacer es únicamente localizar dónde se encuentra el archivo'package. jason' y ejecutar el comando'npm install'. Esto va a examinar los datos que se encuentran en'package. jason'y a partir de eso va a instalar todos los módulos que se encuentran acá y todas la dependencias relacionadas con ellos. Pasamos ahora a la carpeta con la que más vamos a trabajar, que es la carpeta'Src'. Acá está el "source" o código fuente de nuestra aplicación. Tenemos acá varias carpetas y archivos, primero localicemos uno de los archivos más importantes, que es'index. html', que es donde se encuentra la base de nuestra aplicación. También tenemos algunos archivos básicos como, por ejemplo, 'styles. css', que es donde se encuentran los estilos generales de la aplicación. Dentro de esta carpeta'Src' también tenemos una carpeta llamada'App'. Acá está el código fuente de nuestra aplicación, aquí es donde vamos a desarrollar nosotros los componentes que se encuentran dentro de la aplicación, también los módulos, los servicios y todos los elementos relacionados con TypeScript los vamos a incluir acá. Quiero que notes, por ejemplo, esta carpeta donde se encuentra un módulo de ejemplo. Dentro esta carpeta estamos viendo la estructura general de un módulo y quiero que notes que tenemos un archivo '. ts'que es donde vamos a desarrollar la parte lógica de un componente, pero también tenemos un archivo HTML y uno CSS donde se encuentra el contenido y también la parte visual de este componente. Ahora, después de la carpeta'App', tenemos una carpeta llamada'Assets'que es donde vamos a guardar las diferentes imágenes, archivos adicionales o incluso "scripts" relacionados con nuestra aplicación. Tenemos otra carpeta llamada'Environments' y específicamente un archivo llamado'environment. ts' que es donde nosotros definimos cuál va a ser el contexto en el que se va a ejecutar nuestra aplicación. Por defecto, va a tener la variable producción como'falso', porque vamos a estar trabajando en modo de desarrollo. Una vez que tu aplicación esté lista para producción, simplemente tienes que cambiar el valor de esta variable como'true'. También tenemos varios archivos acá que nos van a servir para manejar nuestra aplicación, pero principalmente nosotros vamos a trabajar dentro de la carpeta App. Finalmente, tenemos acá varios archivos de configuración, específicamente'package. json'es el que nos va a servir más para poder instalar los diferentes módulos, pero también tenemos, por ejemplo, el archivo de configuración para Git que va a ignorar algunas carpetas como, por ejemplo, las carpetas del sistema que no vamos a necesitar. Y también tenemos acá un archivo'Readme. md' donde aparecen los comandos básicos para poder trabajar nuestra aplicación. Estos son los elementos básicos con los que nosotros vamos a trabajar nuestra aplicación Angular. Y conociendo cada una de las diferentes partes es como vamos a poder administrar y manejarnos dentro de lo que va a ser nuestra aplicación en Angular 4.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.