Ahora sí que estamos listos para comenzar.
Para crear nuestra aplicación con Angular desde cero, utilizando Angular Ziel.
Lo primero es ir a la página angular Punto y o por ejemplo nos vamos.
Hay que started y algo.
Vimos la clase anterior que podemos crear un proyecto con el comando en new y el nombre del proyecto.
Por ejemplo, en New Clientes APP, el comando en GI propio de la consola de Angular lo tenemos disponible
con la instalación de Angular.
Si ella la realizamos la clase anterior, ahora simplemente vamos al terminal de nuestro sistema operativo
y vamos a crear el proyecto.
Pero primero tenemos que crear un directorio en el cual vamos a guardar todos nuestros ejemplos y proyectos
del curso.
Todos los archivos relacional, cursos, por ejemplo, le podríamos llamar sprint o angula como queramos,
pero la idea es que sea un nombre simple, sin caracteres especiales, sin acento, sin eñes, sin espacio,
sin nada.
Sea lo más simple posible y así evitar cualquier dolor de cabeza que tengamos al ejecutar nuestras aplicaciones,
ya sea con sprint o con Angular.
Bien, en mi caso lo tengo en la raíz del disco Spring 5.
Ese es el nombre del directorio principal.
Acá lo tenemos.
Y dentro de este directorio voy a crear el de Angular.
Ahí tenemos nuestro directorio raíz de angula.
Entonces todos los proyectos relacionados con Spring 5 lo vamos a dejar en el directorio principal.
Spring 5 y todo lo relacionado con Angular.
Lo dejamos en este directorio.
Pero en realidad pueden usar como quieran.
Si quieren, pueden dejar 2 directorio en paralelo o uno dentro del otro como te acomode.
Entonces dentro de Angular vamos a crear con MJI New el proyecto.
Le vamos a llamar clientes guión a Pepe y.
Lo primero que pregunta es si queremos agregar en nuestra aplicación con Angular el componente routing.
Le colocamos que no porque eso después lo vamos a agregar de forma manual.
La idea es aprender cómo se configura, así que lo dejamos para después.
Por ahora simplemente no.
La segunda pregunta es qué tipo de estilos?
Qué formato de estilos vamos a querer utilizar?
Por defecto vamos a usar CSS es más que suficiente y aceptamos simplemente con un ENTER seleccionamos
CSS.
De hecho está marcado por defecto y ENTER ahí crea el proyecto, va a descargar toda la dependencia.
Por lo tanto, se puede demorar un buen rato acá realiza todas las carga de todas las librerías dependencias
de Angular Angular Core para desarrollar el lenguaje de script ambiento el API Reactive Stations de
JavaScript para trabajar con flujos con strings reactivos.
En fin, un montón de cosas.
Perfecto.
Una vez que haya finalizado en Windows pueden aparecer un par de warnings.
Acá tenemos lo mismo que cuando escalamos Angular.
Si el hoy se debe a que Windows no tiene soporte a esta librería, pero si en Mackintosh en Obsequie
llega, tenemos otro warning también típico de Windows que no hay que dar ninguna importancia.
Es algo propio de Windows.
De hecho, en otro sistema operativo como el Linux o Imaging Touch, esto no ocurre, no aparecen.
Pero bien, una vez que se haya creado con éxito, el siguiente paso es abrir con Atom, como ya lo
tenemos instalado con todos los plugins.
Ahora simplemente vamos a abrir nuestro proyecto.
Hacemos clic en Open Project.
Vamos a buscar nuestro proyecto en la ubicación que le dimos.
Spring 5 Angular Seleccionamos Cliente App y seleccionar carpeta y acá lo tenemos.
Vamos a cerrar la ventana de Wacom.
También la guía y listo.
En la pestaña izquierda tenemos el proyecto con todos sus archivos.
Si se fijan, aparece un icono distinto por cada tipo de archivo.
Eso es porque instalamos el Plains, el Field.
Si nos vamos a la carpeta SRC es el más importante.
Acá tenemos nuestra aplicación.
Todo nuestro código dentro de APP.
Acá tenemos nuestro componente principal.
Ahora vamos a ejecutar nuestra aplicación utilizando el comando en jefe CER.
Nos vamos a la consola y dentro del directorio de Angular, donde tenemos creado nuestro proyecto,
nos vamos a clientes app y levantamos con el comando en sí.
Ser menos, menos open, menos menos open es para abrir en el navegador o pueden utilizar el atajo menos
o cualquiera de los dos menos o menos menos open.
Muy parecido a Spring Boot, que incluye embebido un servidor para desplegar nuestra aplicación acá
también angular.
También incluye su propio servidor para levantar nuestra aplicación.
Vamos a levantar entonces con un enter.
Y acá lo tenemos y acá tenemos nuestra página de bienvenida.
Un prototipo por defecto que prácticamente podemos quitar, eliminar todo lo que aparece y reemplazarlo
por nuestro propio contenido.
Ahora este servidor en Disher.
Por supuesto que es para desarrollar.
No es para un ambiente de producción.
Cuando llevamos nuestra aplicación a producción, lo que hacemos es transpirar, convertir todo nuestro
script en JavaScript en código estático HTML y JavaScript puro que es interpretado y lo entienden los
navegadores.
Y eso lo podemos llevar, lo podemos subir a cualquier servidor que pueda publicar este contenido estático,
como por ejemplo Google Storage.
O también tenemos Amazon S3.
En fin, hay varias alternativas.
De todas formas, el curso más adelante vamos a ver cómo llevar a producción y publicar nuestra aplicación.
Incluso lo podríamos hacer con почти con el servidor que trae no 10, con Apache, con cualquiera,
con cualquiera que pueda servir contenido estático.
Básicamente llevas creep, HTML y hoja de estilos, ya que levantamos nuestra aplicación.
El siguiente paso es modificar el contenido que tenemos.
Lo que está cargando es el componente principal.
El app component.
Acá tenemos la clase componente y acá tenemos varias cosas.
Pero antes de entrar en detalle, lo primero que observamos es que está asociada a un template a una
vista HTML.
Después vamos a analizar el decorador componen y todo lo demás, pero primero vámonos a la vista.
Acá tenemos la vista a component.
HTML y todo lo que se visualiza en el navegador.
Acá es justamente el código HTML que tenemos en esta plantilla.
Por lo tanto, vamos a quitar todo.
Por ahora vamos a dejar solamente el H1, nada más.
Todo lo demás lo vamos a quitar el world con también vamos a guardar con control S y volvemos al navegador.
Observamos que aparece solamente clientes app el nombre de nuestra aplicación.
Perfecto.
Vamos a abrir nuevamente el app component con doble clic y como paréntesis aparte, cualquier sugerencia
o pregunta para instalar algún tipo de plugins le colocan que sí, que instale todos los plugins necesarios,
como por ejemplo lo más probable que te va a pedir instalar el Inter, que es necesario para detectar
errores de sintaxis en nuestro código en tiempo de desarrollo.
A medida que estás escribiendo nuestro código contain script, el LITER se encarga de evaluar los errores,
detectarlos y mostrar cualquier mensaje de estos errores en el editor.
Entonces, si nos pide instalar el Inter, lo tenemos que instalar de todas maneras.
El Liter y todas sus dependencias y también John's o cualquier dependencia que necesite, simplemente
le colocan que si bien, pero ahora analicemos el componente es un decorador, una anotación con cierta
configuración metadata muy parecido a las anotaciones en Spring es para lo mismo para configurar.
Por ejemplo, acá tenemos una clase a component que está marcada con el decorador.
Compen es una clase componente de angular tiene un selector.
El selector corresponde a una etiqueta HTML.
Esta etiqueta HTML la podemos incluir en otros componentes.
En este caso, como es el componente root o principal, la tenemos que incluir en el index html, que
es la página principal en la puerta de entrada a nuestra aplicación.
Si se fijan en el body, la estamos incluyendo simplemente una etiqueta HTML que contiene el nombre
del selector app root.
Por lo tanto, si colocamos cualquier cosa, cualquier nombre que queramos acá tenemos que reflejar
ese mismo nombre y acá se incluye.
Estamos viviendo todo el contenido de este componente, todo el HTML que tiene y toda la programación
dinámica dentro de la clase, con toda la lógica que le queramos dar.
Lo segundo es el temple o RL en la vista contenido HTML que está asociado a esta clase component.
Luego tenemos estilos o RL serían nuestras hoja de estilos.
Podríamos tener una o más.
Por eso el corchete se separa por comas por defecto una sola que es la que tenemos acá ab component
puntos es acá.
Podemos tener solamente los estilos de este componente sin afectar a los demás componentes que tengamos
en nuestra aplicación.
Solo hacen efecto en el propio componente y no en los demás.
Después vamos a ver cómo aplicar estilos de forma global a todos nuestros componentes, por ejemplo,
agregándose estilos en Styles, CSS.
Acá en Stills cualquier estilo que coloquemos se va a aplicar a toda nuestra aplicación, a toda nuestra
página y a todo el componente.
Para resumir a component sería nuestro componente principal o por defecto raíz se tiene que dejar tal
cual y a partir de este componente podemos incluir agregar otro componente y empezamos a crear y armar
nuestra aplicación.
Un componente de Angular son piezas de código que van a componer nuestra aplicación.
Un componente se pueden idear dentro de otro como un componente hijo o bien un componente padre.
Podría estar formado por varios componentes hijos.
Se le conoce como el patrón de diseño composites o compositor por debajo implementa este patrón de diseño.
Eso es lo que lo hace bastante modular, escalable y también fácil de mantener.
Por ahora vamos a modificar un poco más nuestra clase.
Acá vamos a colocar Bienvenido Angular
y también podríamos tener más atributos de la clase componente, por ejemplo, curso.
Podemos usar comillas simple para hacer referencia a un string.
Como recomendación, aunque no es obligación el punto y coma final.
Ahora, como buena práctica se recomienda colocar entonces el curso sería.
Con Angular 7.
Como había mencionado, también una de las características que maneja este script es el tipado.
Si bien es opcional.
Por ejemplo, acá asume que es un string porque le estamos asignando un valor del tipo string.
Pero también lo podríamos dejar de forma estática.
Por ejemplo, 2 punto 2 punto es string es opcional.
Pero también es buena práctica definir los tipos.
Lo hacemos un poco más robusto
en los strings.
También podemos usar comilla doble o comillas simple.
Bueno, en realidad a gusto de cada uno se ve más limpio utilizar comillas simple.
Así que durante el curso vamos a tratar los strings con comillas simples, pero no es tan relevante.
Perfecto.
Vamos a guardar con control s.
Vamos a ir a la vista a component.
Acá tenemos el título.
Vamos a tener una lista u alhelí
en el primer lím.
Vamos a colocar el nombre del curso siempre usando doble llaves para interpolar las variables.
Interpolar es para que se imprima.
Se imprima la variable en la salida.
En la respuesta en el navegador simplemente hacemos referencia al nombre del atributo.
En este caso curso después.
Pro-fesor.
Vamos a copiaré li.
Y guardamos entonces siempre las variables que vamos a imprimir es con doble llave.
Una vez que guardamos, volvemos al navegador y vemos el cambio.
Bienvenido Angular.
Curso Spring 5 con Angular 7.
Profesor Andres Guzman por ahora nada mas.
Y en la próxima clase vamos a estudiar, analizar la estructura de directorio y explicar un poco en
qué consiste cada componente, cada tipo de archivo, cada directorio.
Por ejemplo, en módulos la carpeta es RCE, la carpeta app, los asset y también cada tipo de archivo,
todos los archivos importante de nuestra aplicación.
Y antes que me olvide, un pequeño detalle es opcional.
Si nos vamos a la clase a component se me fue justamente el punto y coma como no lo marca como un error,
porque en realidad no es un error, simplemente es opcional.
Es recomendable como buena práctica para mantener un orden y nuestro código sea un poco más estricto.
Entonces agregamos el punto y coma en el profesor, pero insisto, es opcional y nuestra aplicación
va a funcionar exactamente igual.
Y volvemos a guardar.
Hemos llegado a su fin.
Hasta la próxima.