En el ejercicio anterior,
hemos desarrollado nuestra primera aplicación angular básica.
Como mencioné, vamos a trabajar en esa aplicación Angular y desarrollarla
más a lo largo del resto de este curso.
Ahora, antes de empezar a trabajar en nuestra aplicación Angular,
vamos a configurar nuestra aplicación Angular para utilizar algunos módulos adicionales,
que nos permiten diseñar las plantillas para nuestra aplicación Angular.
Utilizaremos el módulo Material angular para diseñar los diseños de la interfaz de usuario.
El módulo de material angular nos proporciona una serie de interesantes componentes de diseño
que podemos hacer uso en el diseño de nuestras plantillas de componentes angulares.
Además, haremos uso del diseño flexible que se basa en el diseño flexible CSS,
que nos permite hacer un diseño responsive dentro de nuestra aplicación Angular.
Así que, en este ejercicio,
vamos a hacer estas configuraciones.
En el camino, aprenderemos nuestro primer conocimiento breve de los componentes,
incluso antes de pasar a examinar los componentes con más detalle en la siguiente lección.
Para empezar, comencemos nuestro viaje con una visita rápida al archivo app.component.ts.
Este es el archivo que abre
el componente raíz que forma parte de nuestra aplicación Angular.
Ahora, echando un vistazo a este componente raíz,
hay algunas cosas que serán muy claras para ustedes incluso sin mucha explicación.
Lo primero que me gustaría llamar su atención es esta declaración de importación.
Como puede ver, se trata de importar la clase de componente de la biblioteca de núcleo angular.
A continuación, estamos preparando nuestra clase AppComponent aquí,
y exportando esa clase.
Entonces, dentro de esta clase AppComponent que hemos declarado,
tenemos una variable que hemos declarado aquí llamada title,
que actualmente está asignada a ser una cadena.
Ahora, echando un vistazo rápido a esta variable,
inmediatamente comienza a preguntarse,
cómo está esto relacionado con lo que hemos visto en el navegador,
cuando vio nuestra aplicación Angular mostrándose en el navegador,
la aplicación Angular mostraba exactamente estas palabras en el navegador.
De hecho, esta variable juega un papel importante en
apareciendo con la vista que viste en nuestro navegador.
Ahora, además, también ve que
esta clase de componente se agrega con un decorador aquí.
Así que de nuevo, este es otro decorador que encontrarás en Angular.
Entonces, esto como vemos es un decorador de componentes.
El decorador de componentes internamente toma un objeto JavaScript como parámetro aquí,
y la primera propiedad que ve aquí llamada selector: app-root.
Ahora, si recuerdan cuando miramos el archivo index.html,
vimos que hemos incluido un elemento allí llamado app-root.
Ahora, comienzas a ver de dónde surge esa raíz de aplicación.
Por lo tanto, este es el selector para el componente que declaramos aquí,
que es lo que se usa dentro de nuestra clase de plantilla para especificar donde
la vista correspondiente a este componente debe mostrarse en el navegador.
La segunda propiedad que define aquí es TemplateURL.
Esto apunta a un archivo,
un archivo HTML como se puede ver,
que contiene la plantilla correspondiente a este componente en particular.
La plantilla que define la vista de este componente.
La tercera propiedad que define aquí como puede ver, dice, StyleURLs,
que como nota aquí está asignada al archivo app.component.scss.
Por lo tanto, este archivo debe contener todo el código scss que se puede utilizar
para el estilo CSS para nuestra plantilla de componentes.
Entonces, esta es una visita rápida al archivo app.component.ts.
Ahora, vamos al archivo App.component.html,
y echemos un vistazo rápido a la plantilla.
Vaya al archivo App.component.html,
verá que este archivo app.component,
el código HTML aquí contiene solo una etiqueta h1 con algo aquí con dos llaves.
Ahora, obviamente, esto no es algo a lo que estás acostumbrado por tu conocimiento de HTML,
o CSS o JavaScript que has visto antes.
Esta es la sintaxis angular.
Esto es lo que llamamos como interpolación.
Esto está utilizando el enlace de datos unidireccional de Angular.
Te estoy lanzando algunos términos en este momento.
Mantengan estos términos volveremos a ver esos términos en
más detalle en las lecciones restantes de este curso.
Lo primero que mencioné es la interpolación,
el segundo que mencioné es un enlace de datos unidireccional.
Además, inmediatamente verá que esta es la variable que vio en el compañero, archivo
TypeScript, que define el código TypeScript correspondiente al componente App.
Entonces, una vez que especifique algo como esto aquí,
la implicación es que cualquiera que sea el valor de este título será sustituido en su lugar
aquí y será utilizado como el código HTML interno para esta etiqueta h1 aquí.
Ese es el propósito de incluir esto aquí.
Ahora vamos a pasar a instalar algunos de
los otros módulos de relación angular que nos permitirán diseñar plantillas.
Luego volveremos a este archivo App.component.html.
A continuación, rediseñe esta plantilla un poco más adelante en este ejercicio.
Con el fin de ayudarnos a diseñar vistas receptivas dentro de nuestra aplicación Angular,
vamos a tomar la ayuda de un par de módulos
relacionados para Angular llamados como el módulo Material Angular.
El módulo de material angular nos proporciona una serie de componentes.
Componentes de diseño que podemos usar en el diseño
nuestras nuevas plantillas para nuestros componentes angulares.
El módulo de material angular si quieres comparar esto es algo parecido a lo que Bootstrap
nos proporcionó para diseñar nuestras páginas web que examinamos en el curso anterior.
Además, usaré otro módulo llamado como módulo de diseño flexible angular.
El módulo de diseño flexible proporciona soporte para usar el diseño flexible CSS
dentro de nuestras plantillas Angular para nuestros componentes Angular.
Ahora, estos dos módulos necesitan ser explícitamente
instalados y luego importados en nuestra aplicación Angular,
eso es lo que vamos a hacer en el siguiente paso.
Pero antes de seguir adelante,
una pregunta que podría estar preguntando es,
¿por qué no usar Bootstrap para hacer el diseño de las plantillas para nuestra aplicación Angular?
De hecho, también puede usar Bootstrap para diseñar las plantillas para nuestra aplicación Angular.
Pero solo puedes usar
los componentes CSS parte de Bootstrap dentro de tu aplicación Angular.
Los componentes basados en jQuery.
Los componentes de JavaScript no se pueden usar explícitamente, puede haber algunos conflictos
entre los componentes basados en jQuery de Bootstrap y el código Angular en sí.
Por lo tanto, es mejor evitar el uso de los componentes de JavaScript de Bootstrap
en caso de que elija usar Bootstrap como la forma de diseñar sus plantillas Angular.
Pero por otro lado,
también pensé que esto nos proporcionaría una buena oportunidad de aprender obtener
otro marco de diseño de interfaz de usuario que es el marco de material angular.
Entonces, esa es la razón por la que elegí usar el marco de material angular
y el diseño de flexión angular en este curso en particular.
Ahora, mientras pasamos por el resto de este curso,
no explicaré explícitamente cómo usar
los componentes de material angular o cómo usar el diseño flexible angular.
En su lugar, los aprenderemos mirando ejemplos.
Haremos uso de estos dos,
tanto los mejores componentes del material angular como el soporte angular Flex-Layout,
cuando diseñemos nuestras plantillas para nuestros componentes angulares en este curso particular.
Así, por el proceso de hacer uso de estos componentes,
también aprenderá a lo largo del camino,
cómo hacer uso tanto de Material Angular como
Angular Flex-Layout dentro de su aplicación Angular.
Pensé que al hacer los ejercicios,
aprenderías mucho más sobre Material Angular.
Ahora, para explicar los aspectos conceptuales de por qué los componentes de material angular
funcionan de la manera en que funcionan o cómo funciona Grid, por ejemplo,
o cómo funciona un diseño sensible,
ya hemos examinado algunos de ellos en el curso anterior sobre Bootstrap.
Por lo tanto, los mismos conceptos también vendrán en nuestra ayuda.
En su lugar, veremos la mecánica de usar tanto el material angular como el
el diseño flexible angular dentro de nuestra aplicación angular en este curso en particular.
Para empezar a usar un Material Angular,
, por supuesto, lo primero que debe hacer es instalar el módulo Material Angular.
Entonces, en el símbolo del sistema, escriba npm install —save @angular /material.
Así que, como puedes ver,
especificamos todos los módulos de relación angular con @angular,
para que veas también lo mismo para el Flex-Layout.
Estamos instalando la versión 6.4.7 del módulo de material angular.
Además, el módulo de material requiere la instalación de CDK.
Por lo tanto, también instalaremos eso haciendo
npm install @angular /cdk @6 .4.7 —save,
e instalaremos eso junto con Material Angular.
Así, Angular Material hace uso del Angular cdk para sus componentes.
Además, cuando está utilizando Material angular,
también necesita importar el módulo de animaciones angulares a su aplicación Angular.
Comenzando con la versión angular cuatro,
se extrajo el soporte de animación angular
fuera de los módulos centrales en su propio módulo separado.
Entonces, lo que significa que si necesita
hacer uso de animaciones dentro de su aplicación Angular,
necesita instalar explícitamente el módulo Angular Animations.
Entonces, sigamos adelante e instalemos eso también.
Entonces, dirás
npm install —save @angular /animations @6 .1.7.
Además, otro módulo que instalaré
juntos se llama HammerJS.
El módulo HammerJS es utilizado por Angular
para apoyar algunos gestos dentro de su aplicación Angular.
Entonces, esa es la razón por la que instalamos HammerJS también dentro de nuestra aplicación,
y la versión actual de HammerJS que estamos usando es 2.0.8.
Ahora, ya hemos instalado lo que necesitamos
para que el módulo de material angular sea utilizado dentro de nuestra aplicación Angular.
A continuación, voy a pasar a instalar
el Angular Flex-Layout dentro de mi aplicación Angular.
Entonces, para hacer eso, relleno el prompt
npm install —save @angular/flex-layout
e instalaremos la última versión de eso.
Así que, ahora que tenemos todas las piezas que necesitamos para nuestra aplicación Angular instalada,
vamos a seguir adelante y luego configurar nuestra aplicación Angular para hacer
uso de estos nuevos módulos que instalamos en nuestra aplicación Angular.
Lo primero que haremos es ir al archivo index.html,
y luego configuraremos el archivo index.html para usar los iconos de material angular.
Así que, para incluir los iconos de Material Angular para que puedan ser
utilizados dentro de las plantillas de su aplicación Angular, así que,
déjame ir justo allí en la cabeza de index.html,
y luego crear un nuevo enlace con
href=» https://fonts.googleapis.com/icon?family=Material+Icons "y este es un hoja de estilo.
Entonces, con esto, ahora puedo hacer uso de los iconos de Material angular dentro de
mi aplicación angular donde elijo hacerlo dentro de las plantillas.
El siguiente paso es ir a la aplicación module.ts y
luego importar los tres módulos que acabamos de instalar.
Entonces, el primero que voy a importar se llama como
el browserAnimationsModule que voy a importar desde
@angular /platform-browser/animations. Entonces, ahora el siguiente
que voy a importar es el MaterialToolbarModule.
Por lo tanto, esto importa el módulo @angular /material/toolbar
que se puede usar dentro de nuestras plantillas de aplicaciones angulares.
Entonces, Material angular, y también importa
el FlexLayoutModule de @angular /flex-layout.
Entonces, una vez que tengamos todos estos módulos importados, entonces un cambio adicional que necesito
hacer es- oh déjame también importar Hammer.js mientras estoy allí.
Entonces, déjame importar
Hammer.js en mi aplicación.
Y una vez que estoy en ello,
el otro cambio que necesito hacer es incluir también
esos módulos en las entradas del decorador del módulo NG aquí.
Entonces, voy a ir allí y decir módulo de navegador, módulo de animaciones de navegador
allí y luego después del módulo HTTP,
voy a importar el módulo de barra de herramientas de material y también el módulo de diseño flex
como parte de las entradas dentro del decorador del módulo NG para mi módulo de aplicación.
Entonces, con esto todas mis configuraciones para usar el módulo de barra de herramientas de material y
el módulo de diseño flexible angular y junto con
se completa el módulo de animaciones en angular.
Ahora vamos a entrar en la plantilla de componentes y hacer uso de
nuestro primer componente de material angular en el diseño
para nuestro componente de aplicación de aplicaciones.
Al ir al archivo de plantilla de componentes de la aplicación,
Voy a reemplazar esto ahora con
un componente de material angular
llamado como mat-toolbar.
Entonces, la barra de herramientas mate me permite diseñar
una barra de herramientas que puedo usar en mi aplicación angular.
Barra de herramientas normalmente mostrada en la parte superior de la página dentro de la aplicación.
Por lo tanto, para esta barra de herramientas especificaré el color como primario.
Veremos lo que esto significa en poco tiempo.
Y también cerraremos esta barra de herramientas MD aquí.
Ahora dentro de esto voy a usar un span con
el nombre de mi restaurante para el cual estoy diseñando este sitio web.
Entonces, Ristorante Con Fusion.
Ahora ves por qué nombré esta carpeta como Confusión.
Entonces, ¿cuál es la actualización que tenemos que hacer al archivo HTML del componente de la aplicación?
Mientras estamos en ello, también incluiremos algunas actualizaciones de SCSS a mi archivo Styles.scss.
Entonces, si entras en tu código aquí,
encontrarás este archivo Styles.scss aquí.
Por lo tanto, aquí es donde puede incluir todos los estilos globales en
este archivo y esto estará disponible para todos los componentes a hacer uso de.
Cada componente tiene sus propios archivos SCSS donde puede incluir el componente
personalización de nivel o código SCSS de nivel
de componente que se utilizará dentro de ese componente específico.
Utilizaremos ambos enfoques dentro de
esta aplicación angular que estamos desarrollando en este curso.
Pero ahora mismo voy a actualizar el archivo principal styles.scss
con algún código que será útil para toda mi aplicación angular.
Lo primero que voy a hacer,
es importar un tema preconstruido que está disponible a través de material angular.
Este tema preconstruido en material angular nos proporciona una manera de especificar
ciertos colores y la forma en que algunas cosas se presentan
dentro de mis componentes de material angular.
Los colores que estarán disponibles a través del marco preconstruido nuestro color principal,
el color de acento, y el color de advertencia.
Ahora el tema específico que usaré se llama Deep Purple.
Entonces, en este caso el color primario será púrpura profundo.
El color de acento será ámbar y el color de advertencia será rojo en este caso.
Ahora puedes construir tus propios temas de material angular que
puedes usar dentro de tu aplicación, pero lo dejaré
como un ejercicio para que explores por tu cuenta.
En este momento dentro de mi aplicación angular voy a usar una
de las cosas preconstruidas llamadas ámbar púrpura profundo.
Entonces, para hacer eso yendo al archivo Styles.scss,
importaré
material angular
temas preconstruidos púrpura profundo Amber.css.
Entonces, este tema preconstruido que haré uso dentro de mi aplicación angular.
Pronto verás cómo funciona este tema precompilado en
la aplicación angular en las plantillas que diseñamos para nuestra aplicación angular.
Además, voy a configurar algunas propiedades para
mi cuerpo de la página index.html, así que especificaré el relleno como cero,
margen como cero, y luego la familia de fuentes que usaré
es rubato o sans serif dentro de mi aplicación.
Puede elegir utilizar lo que desee dentro de sus aplicaciones angulares.
Seleccioné usar estos dos dentro de mi aplicación angular.
Guardemos los cambios,
y vamos a echar un vistazo rápido a nuestra aplicación angular en el navegador.
Antes de hacer eso,
asegúrese de que su servicio NG se esté ejecutando en
una de las ventanas de terminal de su computadora.
El servidor de desarrollo debe estar funcionando continuamente para que realice automáticamente la descompilación
y luego cargue
la versión actualizada de la aplicación angular en la ventana del navegador.
Ir al navegador,
ahora ves los cambios que hemos hecho a
la aplicación angular reflejada en la vista en
mi navegador para que puedas ver que ahora tenemos una barra de herramientas en la parte superior con
las palabras que incluimos en el archivo de plantilla de componentes de la aplicación allí.
Y se puede ver el color que se ha aplicado a la barra de herramientas.
Así que el color, color primario,
por lo que este es el color púrpura profundo que se aplica a la barra de herramientas.
Ahora la tematización que hemos definido agregará color púrpura oscuro o ámbar,
dependiendo de lo que sea utilizado por los componentes específicos del material angular
que usamos dentro de nuestras plantillas de aplicaciones angulares.
Con esto completamos este ejercicio.
En este ejercicio, configuramos nuestra aplicación angular para hacer
uso del material angular y el diseño flexible angular.
También utilizamos
nuestro primer componente de material angular en el archivo de plantilla de componentes de la aplicación.
Y usamos el tema incorporado de material angular para nuestra aplicación angular.
Guarde todos los cambios y luego este es un buen momento para que
haga un commit de git con el mensaje configurando angular.