Bienvenido a aprender TypeScript para el curso de desarrollo Angular impulsado por Packt

Publishing. Mi nombre es Bartlomeij Potaczek. Soy un ingeniero de software con más de

cuatro años de experiencia en programación, principalmente en JavaScript. Soy un gran fondo
sobre todo lo relacionado con React wort, programación funcional y visualización de
datos. Soy cofundador de initlearn y actualmente estoy trabajando en la reescritura de front-
end 40 bit near, una guía de televisión sueca más completa para otros canales. Comenzaremos
con una introducción a TypeScript y al marco Angular donde instalará el compilador de
TypeScript y aprenderá los secretos más importantes del lenguaje de TypeScript, como los
tipos, funciones, clases, interfaces y comenzará a trabajar en el entorno Angular. La siguiente
sección describe la introducción a los componentes en Angular utilizando TypeScript y
utilizando Angular CLI. Creará su primer componente, aprenderá a componer componentes,
aprenderá métodos de ciclo de vida en Angular y responderá a las acciones de los usuarios
con eventos. La siguiente sección describe los servicios en el marco Angular, donde aprenderá
sobre la inyección de dependencias y los servicios en Angular. Creará su primer servicio
Angular que inyectará en el componente y en otro servicio. La siguiente sección describe
módulos, directivas, canalizaciones y enlace de datos bidireccional donde aprenderá acerca de
los módulos en el marco Angular, descubra qué son las directivas y cómo usarlas, cree sus
propias directivas personalizadas y directivas externas. También transformará los datos con
tuberías y creará un enlace de datos bidireccional de dos maneras. En la siguiente sección,
aprenderá cómo crear un formulario reactivo, cómo manejar el formulario y validar los
datos. La sexta sección describe las estructuras de enrutamiento en las que creará una
configuración de enrutamiento de ejemplo, agregue enlaces gracias a cada uno de ellos, podrá
navegar sin recargar en la página y, por supuesto, cómo se enrutará. La última sección es una
introducción a las pruebas y depuración donde aprenderá sobre las pruebas, los tipos de
pruebas, cómo depurar el código usando las herramientas de desarrollo de Chrome y crear
pruebas de componentes. Cuando se trata de las pruebas preliminares, debe estar
familiarizado con los eventos de HTML, CSS, JavaScript y las funciones de JavaScript y el
manejo de errores. Los conceptos básicos del controlador de vista de módulo (MVC) y el
modelo de objeto de documento (DOM). En este curso usaré PhpStorm como IDE. La nota en
la versión 8, la pantalla táctil en la versión 2, y Angular en la versión 5, pero es compatible con
la versión 2 y 4, y por supuesto Angular CLI. Ahora que sabemos lo que nos espera, saltemos al
curso.

Bienvenido a aprender sobre la sección 1 del curso de desarrollo de TypeScript para Angular,
para comenzar con TypeScript y Angular. En esta sección, al principio, le presentamos el
lenguaje TypeScript. Luego lo instalaremos y correremos a través del compilador de
TypeScript. W aprenderá los tipos básicos, variables y algunas características. Luego,
trabajaremos con funciones. Yendo más allá, nos sumergiremos en clases e interfaces. Luego,
escribiremos código reutilizable con genéricos y, al final de esta sección, configuraremos
Angular y TypeScript. Entonces, en este video, les contaré más sobre el script de tabulación,
qué es y cuáles son los beneficios de aprender y usar ese lenguaje, pero antes de hacerlo,
explicaré cuál es la diferencia entre los tipos dinámicos y los tipos estáticos. . Dinámico versus
estático. JavaScript es un lenguaje de tipo dinámico que puede declarar una variable que
contiene, por ejemplo, un número y podemos cambiar ese tipo de variable en cualquier
momento. Cuando se trata de un tipo estático, que está en uso en lenguaje como C, C ++ o Java,
los tipos se envían una vez que declaramos la variable y no podemos cambiar de nuevo y
hemos guardado en mi padre. JavaScript es un lenguaje interpretado , lo que significa que
JavaScript captura los errores y el tiempo de ajuste, lo que dificulta la depuración, pero existe
un TypeScript. TypeScript es un superconjunto de JavaScript que se compila a un JavaScript
simple desarrollado por Microsoft. Es un JavaScript fuertemente tipado como un beneficio
sintético para el lenguaje y al mismo tiempo nos permite utilizar el JavaScript normal. Un
título se compila de forma sencilla como 5 códigos JavaScript compatibles. Proporcionar un
estilo de programación más declarativo a través de elementos como interfaces y escritura
estática. Ofrece módulos y clases y más. Lo más importante es que se integra relativamente
bien con las bibliotecas y el código populares de JavaScript. Podemos considerarlo como una
capa estática más fuerte. Hace que la depuración sea más fácil y el equipo de Angular eligió
TypeScript como idioma principal, por lo que es totalmente compatible con Angular 2, 4 y la
versión 5 lanzada. Entonces, lo que ofrece TypeScript. Ofrece una verificación de tipos
estática, futuros ES6, objetos basados en clases y, por supuesto, modularidad y, cuando se
trata de los beneficios, y TypeScript es compatible con todos los editores más populares,
incluidos Sublime Text, Atom, Eclipse, Emacs WebStorm, y, por supuesto, la familia Microsoft
Visual Studio. Entonces, podemos ir a la lengua o comunidad de TypeScript y, en un amigo de
la sección de TypeScript, Podemos encontrar que se usa en varios proyectos del mundo real
también. Por lo tanto, puede confiar en que es lo suficientemente robusto para manejar casi
cualquier cosa en la que esté trabajando. Por ejemplo, la pantalla en negro que es un emulador
de terminal OS X e IDE, el servicio de Microsoft que alimenta parte de Visual Studio y también
utiliza TypeScript y, por supuesto, Angular. En el siguiente video, instalaremos y ejecutaremos
el compilador de TypeScript. Así que estad atentos.

Anteriormente, te he introducido en TypeScript. Ahora, sabemos qué es y cuáles son los

beneficios de aprender y usar dicho lenguaje. En este video, instalaremos TypeScript y, luego,
compilaremos un código TypeScript de muestra. Entonces, lo primero que vamos a hacer es
instalar Node y npm. Podemos ir al sitio nodjs.org y ¿qué es Node? Node.js es un runtime de
JavaScript creado en el motor de JavaScript de Chrome v8 y, cuando se trata de npm, es un
administrador de paquetes para el lenguaje de programación de transcripciones y es el
administrador de paquetes predeterminado para el entorno de ejecución de JavaScript
Node.js. Por lo tanto, si visita el sitio web oficial de Node.js, podemos encontrar la forma de
instalar el nodo en función de un sistema operativo. Entonces, en mi caso, será en Mac
OS. Entonces, puede descargar e instalar y, una vez que lo haga, podemos ir a un IDE. En mi
caso, es IntelliJ PhpStorm. Entonces, podemos crear primero un archivo llamado ejemplo dot
TS. Ahora, en el terminal, una vez que instale Node, instalemos un npm. Entonces, escriba npm
install y npm - gee, que significa globalmente y presenter y ahora, utilizando npm, podemos
instalar TypeScript. Entonces, escriba npm install - JEE TypeScript y presentador. En nuestro
archivo, podemos crear una muestra de código TypeScript. Por ejemplo, crearé una variable
llamada PI, que es un número y es igual a 3.14. Además, crearé una función, y nuestra función,
llamada obtener nombre que es igual a nuestra función que devuelve una cadena
secundaria. En el terminal, para compilar TypeScript en un archivo JS, a la derecha, TSC,
punto, punto TS. Después del espacio, podemos proporcionar el nombre de un archivo
compilado, dejaré el que compilará, por ejemplo, las lágrimas en rjs examinados. Entonces,
presiona enter y, como puedes ver, ejemplo, el jazz que compila un código de TypeScript en un
JavaScript plano. Guay. Entonces, en este video, hemos aprendido cómo instalar y compilar un
código TypeScript. En el siguiente video, veremos los tipos básicos en TypeScript.

Typescript
Recientemente, hemos aprendido lo que es un TypeScript. Hemos instalado TypeScript y
compilado un código TypeScript de muestra. En este video, comenzaremos a trabajar con las
características de TypeScript y nos centraremos en los tipos, variables y matrices. Los
tipos Para que los programas sean útiles, necesitamos poder trabajar con algunas de las
unidades simples de datos. En TypeScript, podemos usar la cadena de número booleano
átomo en cualquier nulo nulo y tipo indefinido. Entonces, podemos ir al sitio web de opciones
de script de prueba, que es www.typescriptlang.org, y podemos ir a la sección de juegos en el
lado izquierdo. Podemos escribir un código de TypeScript, como se puede ver en la pantalla, y
en el lado derecho verá las variables geniales del código de JavaScript simple, que es como se
ve la definición de la variable en el TypeScript. Primero, tenemos una palabra clave let. La
diferencia entre var latino es que var es un ámbito de función y let es un ámbito de
bloque. Luego, tenemos un nombre de la variable, luego dos puntos y un espacio y tenemos
que proporcionar un tipo. En ese caso, es una cadena que es igual a un valor y está
borracho. Entonces, podemos ir al patio de recreo y podemos hacer algún ejemplo con otros
tipos. Por ejemplo, podemos crear una variable llamada age que es un número y es igual a 25
y, por supuesto, podemos cambiar esa edad a 34. Podemos crear una variable llamada my
name, que es una cadena y es igual a John y, si desea cambiar ese nombre a entero, se
producirá un error. Debe ser una cadena. Bien, entonces, podemos crear otra variable llamada
programador, que es un toro y podemos escribir verdad. Guay. Arrays. Para definir una matriz
tenemos que proporcionar un nombre, dos puntos y luego un tipo. Por ejemplo, una
cadena, un corchete Ahora, en el TypeScript sabrás que es una matriz de cadenas, por ejemplo,
John y Jack. Entonces, podemos ir al patio de recreo y crear una variable llamada jugadores
que es igual a ... que es una serie de cadenas y es igual a Jack y John, y podemos empujar a los
jugadores a otro valor, por ejemplo, Tom. Hagamos lo mismo pero, en lugar de una cadena,
podemos presionar un número y, como puede ver, también se produce un
error. Guay. Entonces, en el siguiente video, trabajaremos con funciones. En lugar de cadena,
podemos presionar un número y, como puede ver, también se produce un
error. Guay. Entonces, en el siguiente video, trabajaremos con funciones. En lugar de cadena,
podemos presionar un número y, como puede ver, también se produce un
error. Guay. Entonces, en el siguiente video, trabajaremos con funciones.
Tipos de variables

Anteriormente, hemos aprendido algunos conceptos básicos de TypeScript. En este video,

aprenderemos y haremos un montón de ejemplos en profundidad con funciones y nos
centraremos en las declaraciones y expresiones de funciones, tipos de funciones, parámetros
opcionales, parámetros predeterminados y parámetros de descanso. Entonces, comencemos
con una declaración de función y expresión. Debe estar familiarizado con la declaración y la
expresión de una función mientras trabaja con JavaScript puro, pero si no, será para usted un
recordatorio muy rápido. Primero, te mostraré estas dos funciones. Por lo tanto, declararé una
declaración de función. Entonces, obviamente, una función de palabra clave luego un nombre
de función, por ejemplo, obtener nombre y, en un cuerpo de función, podemos devolver un
trabajo de cadena. Ahora, crearé una expresión de función. Entonces, para hacer eso, Crearé
una variable llamada obtener el apellido y es igual a una función que obviamente convertirá
una cadena de caracteres Tom. Estas dos funciones son realmente similares, pero se
comportarán de manera diferente. El intérprete puede evaluar una declaración de función a
medida que se analiza. Por otro lado, la expresión de función es un puerto de una asignación y
no se evaluará hasta que la asignación se haya completado. Entonces, por ejemplo, si invoco la
función de obtener nombre antes de su declaración, así funcionará. Si invoco una expresión de
función antes de que la asignación obtenga el apellido, se generará un error. Usted puede
pensar por qué. Es un proceso conocido como una elevación variable. Como ya sabrá, la
elevación es un mecanismo de JavaScript donde las variables y las declaraciones de funciones
se mueven a la parte superior de su alcance antes de la ejecución del código. Asi que, Estamos
llamando expresión indefinida y funcional. Tipos de funciones. En el video anterior, hemos
aprendido que podemos crear una variable escrita agregando una adaptación de decoración
opcional. Por ejemplo, dejar que la edad con un número de tipo sea igual a 26. También
podemos usar tipos en nuestra función. Entonces, primero, echemos un vistazo a una
diapositiva, donde verá un ejemplo de definición de función básica. Como puede ver, podemos
proporcionar tipos en los parámetros de una función y, también, antes del cuerpo de una
función, podemos poner un tipo de retorno de función. Digamos que queremos crear una
función para agregar nombre, que toma un parámetro, nombre, que es una cadena. En el
cuerpo de la función, podemos presionar dos nombres con ese nombre. Por lo tanto, tenemos
que crear una variable llamada nombres que es una matriz de cadenas y también podemos
devolver nombres. Entonces, agreguemos un tipo de retorno antes del cuerpo de una
función. Asi que, añada dos puntos, luego una cadena y corchetes, así. Genial, podemos
consolar el punto de cierre de sesión en el nombre y agregar un nombre Jeong para que
podamos ejecutarlo. Tenemos que quitar el apellido. Lanzará un error y se ejecutará de nuevo
y, como puede ver en la consola, hay una matriz con un trabajo de valor. Así que, genial,
funciona. Función de parámetro opcional. A diferencia de JavaScript, el compilador de
TypeScript arrojará un error si intentamos invocar una función sin proporcionar el número
exacto y el tipo de parámetros que su firma declara. Por ejemplo, si invocamos en el nombre
sin proporcionar una cadena como un argumento, se producirá un error, pero hay escenarios
en los que podríamos querer llamar a una función sin proporcionar todos sus
argumentos. Entonces, si queremos que el parámetro de la función sea opcional, simplemente
agregue un carácter de signo de interrogación a su nombre, así, y todavía funcionará. Si
elimino el signo de interrogación, arrojará un error. Función por defecto del
parámetro. Cuando una función tiene algunos parámetros opcionales, debemos verificar si se
ha pasado un argumento a la función. Hay algunos escenarios en los que será más útil
proporcionar un valor predeterminado para un parámetro cuando no se suministre, y luego
hacer un parámetro opcional. Por ejemplo, si no pasamos un valor a la función, el nombre
contendrá un valor de Java. Entonces, eliminemos un signo de interrogación y podemos
agregar un valor, por ejemplo, John, así. Por lo tanto, el valor predeterminado se realizará si
no proporcionamos ningún valor. Función de parámetro de reposo. Como puede ver,
aumentamos el número de formas en que podemos invocar una función. La sintaxis del
parámetro resto permite que se represente un número indefinido de argumentos como una
matriz. Por ejemplo, podemos factorizar nuestra función de administración, por lo que, en
lugar de crear otro y otros parámetros, podemos reemplazar un parámetro de nombre con
tres puntos. Por ejemplo, una cadena con nombre que es una matriz de cadenas y para cada
cadena de cadenas con nombre, queremos incluir nombres en los nombres. Los nombres
empujan los nombres, así como podemos invocar una función. Podemos refactorizar esa
función para agregar nombres, así como así, y podemos, para, por ejemplo, John
Tom. Entonces, ejecutemos este código y, como puede ver, tenemos una matriz de dos valores,
John y Tom. Guay. Y el parámetro andres predeterminado está disponible en ES6. En el
siguiente video, nos sumergiremos en clases e interfaces. Cadena con nombre que es una
matriz de cadenas y para cada matriz de cadena con nombre, queremos insertar el nombre en
los nombres. Los nombres empujan los nombres, así como podemos invocar una
función. Podemos refactorizar esa función para agregar nombres, así como así, y podemos,
para, por ejemplo, John Tom. Entonces, ejecutemos este código y, como puede ver, tenemos
una matriz de dos valores, John y Tom. Guay. Y el parámetro andres predeterminado está
disponible en ES6. En el siguiente video, nos sumergiremos en clases e interfaces. Cadena con
nombre que es una matriz de cadenas y para cada matriz de cadena con nombre, queremos
insertar el nombre en los nombres. Los nombres empujan los nombres, así como podemos
invocar una función. Podemos refactorizar esa función para agregar nombres, así como así, y
podemos, para, por ejemplo, John Tom. Entonces, ejecutemos este código y, como puede ver,
tenemos una matriz de dos valores, John y Tom. Guay. Y el parámetro andres predeterminado
está disponible en ES6. En el siguiente video, nos sumergiremos en clases e interfaces.

Funciones

En el último video, hemos aprendido algunas funciones en TypeScript. En este video, vamos a
centrarnos en las clases y las interfaces. Entonces, primero, les diré brevemente por qué es
importante tener una clase en TypeScript. Luego, veremos la definición de la clase y
crearemos nuestra primera clase y herencia y, también, haremos lo mismo con las
interfaces. Clase. Podemos usar clases para representar el tipo de un objeto o entidad. Una
clase se compone de nombres, atributos y métodos. ¿Por qué clases? Las clases ofrecen una
abstracción de estructura útil. Proporciona una forma consistente para que los
desarrolladores utilicen clases en lugar de cada framework, miembro, jayx, s reacts, etc., que
crean su propia versión. Un desarrollador orientado a objetos ya entiende las clases. La
definición de clase usa la palabra clave de clase para declarar una clase en el TypeScript. La
definición de clase puede incluir campos. Un campo es cualquier declaración de variable en un
constructor de clase que es responsable de asignar memoria para los objetos de los métodos
de una clase y otras funciones para representar acciones que un objeto puede realizar y
métodos estáticos. Entonces, por ejemplo, podemos crear una clase llamada person. En un
cuerpo de clase, podemos crear el primer campo, pasatiempo público, que es una
cadena. También podemos crear un método estático llamado nom de personas, que es un
número y es igual a cero. Constructor, tenemos un nombre privado que es una cadena y H, que
es un número, H privado y, si se come el cloruro con un nombre privado, es igual a este
nombre es igual a nombre, pero puede eliminarlo porque TypeScript está funcionando Es para
nosotros automáticamente. En un cuerpo de constructor, podemos llamar persona dot num de
personas más más más. Podemos incremento de personas. Ahora, podemos crear un método
de información que no devuelve nada, por lo que puede escribir void y el cuerpo de la función
que podemos consolar para verlo. Este nombre más el espacio más este H. Bien, genial, así
podemos crear nuestro primer objeto. Lo llamaré John, que es igual a una persona nueva y
podemos proporcionar un nombre John y H, por ejemplo, 30 y, usando ese objeto, podemos
llamar el método de entrada para ese objeto y lo vamos a ejecutar y, como Puedes verlo en la
consola, imprime el nombre de John y los 30 años. De acuerdo, genial. La herencia de una de
las características principales más importantes es su capacidad para extender las clases
existentes y se conoce en sus decenas y valores más bajos para crear una nueva clase, una
clase secundaria, que hereda todas las propiedades y métodos de una clase de puntos
existente. Entonces, por ejemplo, podemos crear una clase llamada jugador que se extiende
desde una persona de clase. En el cuerpo de la función, tenemos que llamar al constructor un
nombre de pase, que es una cadena, y la edad, que es un número, y usted construye su cuerpo
al que debemos llamar súper método y pasar el nombre y la edad. Genial. Entonces, vamos a
crear otro objeto. Podemos nombrarlo, por ejemplo, Hank, que es igual a un nuevo jugador y
podemos proporcionar un nombre de Hank y 32 años y, para ese objeto, invocamos
información y también podemos consultar el objeto de vigilancia John y el tráfico de Hancock,
como eso, y podemos ejecutarlo e imprimir a John con un Hank de 30 años con 32 y dos
objetos, persona y jugador que hereda a una persona. Interfaz. Una interfaz se utiliza a
menudo para definir un tipo abstracto que no contiene datos o código, pero define
comportamientos como firmas de métodos que pueden entenderse como la firma de un
contrato. Cuando firmamos, significa implementado. Debemos seguir sus reglas. Las reglas de
la interfaz son firmas de los métodos y propiedades y deben implementarse. Las interfaces
contienen únicamente la declaración de los miembros. A menudo ayuda a proporcionar una
estructura estándar que seguiría la clase impulsada. Entonces, vamos a hacer un
ejemplo. Podemos crear una interfaz llamada persona comentario. Por lo tanto, se puede
utilizar una interfaz para describir tipos complejos. Por lo tanto, crearé un objeto llamado
John que utiliza la interfaz de persona. Podemos definir un nombre, que es John, y age, por
ejemplo, 30. Las interfaces definen nuestro contrato en el cual, si una clase lo implementa,
debe crear todas las funciones definidas en la interfaz. Así, por ejemplo, crearé una interfaz de
persona, una persona de interfaz, con un nombre que es una cadena y una edad, que es un
número, y para esa interfaz, podemos crear un objeto, por ejemplo, charm, que implementa
interfaz de persona. Ahora, declaremos un nombre, que es un John, y H, que es un número
como el pavo. Guay. Vamos a crear otro ejemplo. Por ejemplo, podemos crear una interfaz
muy buena con un método de unidad, que devolverá cualquier tipo. Bien, entonces, ahora
podemos crear un auto de clase que implementa un vehículo. Por lo tanto, tenemos que
definir un método de manejo que devolverá, por ejemplo, void, por lo tanto, nada, y puede
hacer que la consola cierre la sesión de un automóvil y puede crear otra clase, por ejemplo
una bicicleta, que implemente también un vehículo y, en lugar de conducir un coche, podemos
cambiar eso por conducir una bicicleta. Podemos crear dos objetos. Primero, el coche, que es
igual a un nuevo núcleo, y el segundo una bicicleta, que es igual a una nueva bicicleta,
analizando el método de manejo de VOC para un objeto de coche y lo mismo para un objeto
negro y podemos correrlo y, como Se puede ver, imprime conduciendo un coche y
conduciendo una bicicleta. En el siguiente video, trabajaremos con genéricos. Así que estad
atentos.

Clases e interfaces

En el video anterior, hicimos una inmersión profunda en las clases e interfaces. En este video,
echaremos un vistazo a los genéricos. Le explicaré rápidamente qué es y cómo podemos
resolver un problema de cola utilizando los genéricos. Genéricos Andy Hunt y Dave Thomas
formularon el principio de no repetirse en el libro El programador pragmático. El objetivo
principal es reducir la repetición de una información de todo tipo. En primer lugar, observe
cómo se ve la definición funcional genérica básica. Como puede ver, tenemos que especificar
una cosa adicional cuando estamos comparando con la función básica y es un ángulo entre
paréntesis, que se usa para referirse a un tipo y también se denomina marcadores de
tipo. Este tipo se puede utilizar en parámetros o como un tipo de retorno de función. Ahora,
vamos a crear un ejemplo. Si desea llamar al método de cadena para cada tipo primitivo,
podemos escribir el número para reducir la cadena a la cadena tirar a la cadena y así
sucesivamente. La misma operación, pero estamos usando diferentes tipos. Entonces,
podemos usar los genéricos para evitar este tipo de repetición. Puede crear una función
llamada primitiva a cadena y proporcionar un marcador de tipo y, como parámetro, tomará
un tipo con el tipo de marcador y la cadena de retorno. El cuerpo de la función tiene que
devolver el tipo de cadena. Ahora, podemos crear una matriz de números, booleanos y
cadenas y, para cada tipo, podemos llamar a nuestro método. Vamos a llamar a la consola para
mirar hacia fuera, primitiva a la cadena y al tipo de paso, así. Entonces, vamos a ejecutarlo y,
como puedes ver, funciona. Si escribo el número para reducir, obtendré el
mismo. Increíble. Imagina que queremos implementar una clase que describa una cola simple,
por ejemplo, una cola de números, que contiene el campo de datos y dos métodos, push y
pop. Por lo tanto, se verá como el número de cola de la clase. En el cuerpo de la clase, puede
crear un dato privado, que es igual a una matriz vacía, un método de inserción, que toma un
elemento que es un número y ... y el cuerpo de la función que tenemos para estos datos
empuja un elemento, solo así, y el método pop, en el que queremos hacer este cambio de datos
para eliminar. Muy bien, podemos crear una cola que es igual a un nuevo número de
referencia y puedes ingresar a esa cola, por ejemplo, el número 10. Vamos. Pero, por supuesto,
esto puede convertirse rápidamente en doloroso. Por ejemplo, si desea crear una cola de
cadenas, tenemos que pasar por todo eso una vez más. Lo que realmente queremos es una
manera de decir que, sea cual sea el tipo de personal del personal que se esté presionando,
debería ser el mismo para cualquier cosa que se haga estallar. Esto se hace fácilmente con un
parámetro genérico, en este caso, a nivel de clase. Entonces, vamos a hacer un código de
refactorización. Entonces, vamos a hacer un código de refactorización. Podemos definir una
clase que toma cualquier tipo proporcionado, por ejemplo, números, bebida, etc. Además,
definamos el campo y el método según ese tipo. Entonces, al lado del nombre del número de
referencia, tenemos que crear un marcador de té, luego, en lugar de un número, tenemos que
cambiarlo al color del té, y eso es todo. Ahora, tenemos que proporcionar un tipo al número de
referencia. Podemos cambiar el número de cue a cue y usted puede crear una cola con un
número de tipo y lo mismo con el número de cola, una cadena de cola, que es igual a nu Q con
la cadena de tipo y, para indicar la cadena, podemos presionar una cadena, por ejemplo, 10.
En el siguiente video, comenzaremos a trabajar con Angular. s hacer un código de
refactorización. Entonces, vamos a hacer un código de refactorización. Podemos definir una
clase que toma cualquier tipo proporcionado, por ejemplo, números, bebida, etc. Además,
definamos el campo y el método según ese tipo. Entonces, al lado del nombre del número de
referencia, tenemos que crear un marcador de té, luego, en lugar de un número, tenemos que
cambiarlo al color del té, y eso es todo. Ahora, tenemos que proporcionar un tipo al número de
referencia. Podemos cambiar el número de cue a cue y usted puede crear una cola con un
número de tipo y lo mismo con el número de cola, una cadena de cola, que es igual a nu Q con
la cadena de tipo y, para indicar la cadena, podemos presionar una cadena, por ejemplo, 10.
En el siguiente video, comenzaremos a trabajar con Angular. s hacer un código de
refactorización. Entonces, vamos a hacer un código de refactorización. Podemos definir una
clase que toma cualquier tipo proporcionado, por ejemplo, números, bebida, etc. Además,
definamos el campo y el método según ese tipo. Entonces, al lado del nombre del número de
referencia, tenemos que crear un marcador de té, luego, en lugar de un número, tenemos que
cambiarlo al color del té, y eso es todo. Ahora, tenemos que proporcionar un tipo al número de
referencia. Podemos cambiar el número de cue a cue y usted puede crear una cola con un
número de tipo y lo mismo con el número de cola, una cadena de cola, que es igual a nu Q con
la cadena de tipo y, para indicar la cadena, podemos presionar una cadena, por ejemplo, 10.
En el siguiente video, comenzaremos a trabajar con Angular. vamos a definir el campo y el
método basado en ese tipo. Entonces, al lado del nombre del número de referencia, tenemos
que crear un marcador de té, luego, en lugar de un número, tenemos que cambiarlo al color
del té, y eso es todo. Ahora, tenemos que proporcionar un tipo al número de
referencia. Podemos cambiar el número de cue a cue y usted puede crear una cola con un
número de tipo y lo mismo con el número de cola, una cadena de cola, que es igual a nu Q con
la cadena de tipo y, para indicar la cadena, podemos presionar una cadena, por ejemplo, 10.
En el siguiente video, comenzaremos a trabajar con Angular. vamos a definir el campo y el
método basado en ese tipo. Entonces, al lado del nombre del número de referencia, tenemos
que crear un marcador de té, luego, en lugar de un número, tenemos que cambiarlo al color
del té, y eso es todo. Ahora, tenemos que proporcionar un tipo al número de
referencia. Podemos cambiar el número de cue a cue y usted puede crear una cola con un
número de tipo y lo mismo con el número de cola, una cadena de cola, que es igual a nu Q con
la cadena de tipo y, para indicar la cadena, podemos presionar una cadena, por ejemplo, 10.
En el siguiente video, comenzaremos a trabajar con Angular.

Angular
Recientemente, has aprendido algunos tipos de características del lenguaje. En este video, al
principio, te presentaré en un marco de JavaScript angular. Luego, conoceremos qué es una
CLI angular. Lo instalaremos y, utilizando Angular CLI, crearemos nuestro primer proyecto
Angular. Angular es un marco de front-end de JavaScript del lado del cliente, creado y
mantenido por Google, utilizado para crear potentes aplicaciones de página única
(SPA). También es parte de una pila MEAN muy poderosa, escrita en TypeScript y viene con
todas las capacidades que ofrece TypeScript. Utilizado en el marco de desarrollo móvil
multiplataforma denominado iónico. Las características angulares contienen ES6 y
TypeScript, velocidad y rendimiento, es modular y admite modelos móviles, tabletas, etc. y, si
comparamos Angular con jQuery, jQuery que no contiene el enrutamiento api reparador 22
enlace y validación de formularios. Entonces, Angular es muy bueno y es un marco
completo. CLI angular. Angular CLI es una interfaz de línea de comandos en un
Angular. Entonces, podemos ir a su CLI punto Angular que IO y, con Angular CLI, podemos
ejecutar el ingeniero de servicio de comandos para crear una aplicación que ya funciona de
forma inmediata y que sigue las mejores prácticas, y usted genera qué componentes generan
rutas. Servicios y tuberías. El CLI también creará un shell de prueba simple para todos estos y
solo servirá para probar fácilmente una aplicación localmente mientras se
desarrolla. También hay una pelusa de prueba y un formato> Entonces, ahora, podemos ir a la
línea de comandos e instalar Angular CLI con npm. Por lo tanto, escriba npm instalar. Por lo
tanto, puede escribir I - G, que significa globalmente en el presentador principal de CLI de
barra angular. Después de unos segundos, Podemos usar Angular CLI para crear un nuevo
proyecto. Entonces, en el directorio actual, podemos escribir ng nuevo un nombre de
proyecto, así que llamaré a ese proyecto Reproducción angular, y presionar Entrar y podemos
ir a ese directorio. Entonces, escribe CD Angular play y lo que ese comando genera, genera
muchas carpetas y archivos. Entonces, les contaré brevemente algunos de estos. Por ejemplo,
Angular CLI dot JSON es una configuración general para este proyecto. Edit o config es una
configuración para nuestro IDE. El karma es una configuración para la prueba del karma. El
paquete de archivos adyacentes contiene scripts y nuestras dependencias de nuestra
asignación. El transportador es un archivo de configuración para una prueba del
transportador y los resultados de la configuración de TSC para la configuración de TypeScript
y se inclinó hacia la configuración de pelusas. En la carpeta de origen, podemos encontrar el
índice principal HTML de nuestra aplicación, el archivo principal de TypeScript, y polyfill dot
TS, donde puede administrar paquetes para el estilo de navegador más antiguo CSS, dónde
puede encontrar, dónde puede agregar algunos estilos globales, etc. Bien, para ejecutar
nuestra aplicación, podemos usar y reservar comando, subtipo y reserva , y ejecutará nuestra
aplicación en el puerto cuatro mil doscientos y, como puede ver, en la línea de
comandos. Entonces, puede ir al navegador y, como puede ver, funciona. Para resumir: en esta
sección, hemos aprendido un montón de cosas como los fundamentos, las funciones, las
clases, las interfaces, los genéricos de TypeScript y ahora sabe cómo inicializar el proyecto
Angular con CLI angular. En la siguiente sección, continuaremos nuestro trabajo y nos
concentraremos en los componentes y eventos. para ejecutar nuestra aplicación, podemos
usar y reservar comando, subtipo y reserva, y ejecutará nuestra aplicación en el puerto cuatro
mil doscientos y, como puede ver, en la línea de comando. Entonces, puede ir al navegador y,
como puede ver, funciona. Para resumir: en esta sección, hemos aprendido un montón de
cosas como los fundamentos, las funciones, las clases, las interfaces, los genéricos de
TypeScript y ahora sabe cómo inicializar el proyecto Angular con CLI angular. En la siguiente
sección, continuaremos nuestro trabajo y nos concentraremos en los componentes y
eventos. para ejecutar nuestra aplicación, podemos usar y reservar comando, subtipo y
reserva, y ejecutará nuestra aplicación en el puerto cuatro mil doscientos y, como puede ver,
en la línea de comando. Entonces, puede ir al navegador y, como puede ver, funciona. Para
resumir: en esta sección, hemos aprendido un montón de cosas como los fundamentos, las
funciones, las clases, las interfaces, los genéricos de TypeScript y ahora sabe cómo inicializar
el proyecto Angular con CLI angular. En la siguiente sección, continuaremos nuestro trabajo y
nos concentraremos en los componentes y eventos. Hemos aprendido un montón de cosas
como los fundamentos de TypeScript, funciones, clases, interfaces, genéricos y ahora sabe
cómo inicializar el proyecto Angular con Angular CLI. En la siguiente sección, continuaremos
nuestro trabajo y nos concentraremos en los componentes y eventos. Hemos aprendido un
montón de cosas como los fundamentos de TypeScript, funciones, clases, interfaces, genéricos
y ahora sabe cómo inicializar el proyecto Angular con Angular CLI. En la siguiente sección,
continuaremos nuestro trabajo y nos concentraremos en los componentes y eventos.

CREANDO COMPONENTE

Bienvenido a aprender TypeScript para el desarrollo angular, sección dos: componentes

personalizados con TypeScript. En la sección anterior, aprendimos los fundamentos del
lenguaje TypeScript y comenzamos a trabajar con el marco angular. En esta sección,
trabajaremos con componentes y, al principio, crearemos nuestro primer componente
Angular. Luego, veremos la composición de los componentes, descubriremos enganches del
ciclo de vida y, al final, trabajaremos con los eventos. Entonces, en este video vamos a
enfocarnos en el componente angular. Creará el componente Angular a través de Angular CLI
y exploraremos las plantillas. Componente angular. Componentes angulares o simplemente
clases diseñadas como componentes con la esperanza de un decorador de componentes. Cada
componente ha definido una plantilla y estilos que pueden comunicarse con el código en una
clase de componente. Asi que, Vamos a ver más de cerca cómo se define nuestro componente
principal de la aplicación. En la sección anterior, hemos creado nuestra primera aplicación
Angular utilizando Angular CLI. Entonces, lo que hace. Crea el componente básico de la
aplicación en la carpeta de origen, como puede ver, hay un componente de la aplicación que
sí. En la parte superior de este archivo, veremos que, para crear un componente, debemos
importar un miembro del componente desde un núcleo Angular. Entonces, como puedes ver,
es un decorador componente. Para hacer un decorador de componentes, jazz y eso simple
como agregar componentes. Ese componente es una referencia a la declaración de
importación anterior y esta clase crea un componente. Es realmente importante que, dentro
de un decorador de componentes, tenga un par de propiedades de configuración para definir
un componente. Por lo tanto, hay un selector con el nombre aprobado. Por lo tanto, si vamos
al índice de puntos HTML, ' Encontraremos nuestro trabajo en el cuerpo. Por lo tanto, hay
nuestro componente de inicio de aplicación. También hay una URL de plantilla, que apunta al
archivo externo, el archivo HTML. También hay URL de estilos, que también apuntan a los
estilos, al archivo CSS externo y también hay un montón de propiedades que puede definir
según sus necesidades de componentes y todas ... todas esas cosas que puede encontrar en los
componentes de la API de Angular io . Debajo del decorador de componentes, tenemos una
clase de componentes en la que podemos definir propiedades y métodos, y lo que es
realmente importante es que lo que usted define en una clase puede ser accesible en
plantillas, como eventos, técnicas de enlace de datos, etc.

Bien, entonces, sabemos cómo se ven los componentes de nuestra aplicación básica, pero
¿dónde se exporta y se coloca este componente? En la carpeta de origen, también podemos
encontrar el módulo de aplicación TS, aquí mismo. Entonces, hagamos un acercamiento a este
archivo. Cada aplicación Angular tiene al menos un módulo, el módulo raíz y, como puede ver,
en el módulo de la aplicación el componente de la aplicación se importa y se agrega al
decorador del módulo ng en las declaraciones. En declaraciones, ponemos todos los
componentes de la directiva de tuberías e importaciones. Colocamos todos los módulos, como
navegar por un módulo nuevo o algunos módulos o bibliotecas de party gratis. En los
proveedores, colocamos todos los servicios y, en Bootstrap, los componentes principales que
deben ser Bootstrapped. En el archivo principal de TS normalmente uno solo. Entonces,
nuestro módulo raíz se importa en maine toh TS. Entonces, vamos allá. Como puede ver,
importamos un módulo, pero si desea comprender a fondo todo el proceso de cómo se crean
instancias de los componentes y cómo funciona bajo el capó, realmente le recomiendo que
consulte los documentos de IO angular. Ahora, vamos a la línea de comandos para crear
nuestro primer componente angular.

Por supuesto, podemos usar ng Angular CLI. Asi que, escriba ng G, que es una abreviatura para
generar, componente y, por ejemplo, encabezado. Presiona enter y genera un par de
archivos. Entonces, volvamos al código más adelante y, como podemos ver, crea un nuevo
directorio, el directorio hether, en el que podemos encontrar otro componente,
especificaciones para probar otro componente HTML de puntos, que es una plantilla, y CSS
para estilos. Además, Angular CLI hizo cosas adicionales para nosotros, como agregar nuestro
componente a los puntos del módulo de la aplicación. Entonces, podemos ir allí y, como puede
ver, se importó nuestro componente de encabezado y se agregó a las declaraciones. Entonces,
como se agregó a la Declaración, podemos usar nuestro componente en nuestra
aplicación. Por lo tanto, podemos ir al decorador de la clase del componente del encabezado,
podemos copiar el selector y pegar un componente de la aplicación en HTML en la parte
inferior y crear un encabezado de tachuela. Puede guardar eso y ejecutar ng servicio, el cual
pondremos nuestra solicitud y serviremos en puerto cuatro mil doscientos. Por lo tanto,
puede actualizar y, como puede ver, en la parte inferior hay un encabezado de etiquetas que
funciona. Guay. Entonces, creamos nuestro primer componente angular. Ahora conocemos los
conceptos básicos de los componentes de Angular, así que echemos un vistazo a las plantillas
de Angular. Ya te mencioné cómo podemos apuntar al archivo HTML externo, pero también
existe la posibilidad de crear una luz iluminada. Por lo tanto, podemos ir al componente
superior que sí, a menos que, eliminar la URL de la plantilla y crear una propiedad de plantilla
con la etiqueta y el título de la bebida, por ejemplo, el encabezado en línea, y guardar eso. Vaya
al navegador y, como puede ver, hay un encabezado en línea de ataques pero, para limpiar
nuestra aplicación, le recomiendo que coloque todas sus plantillas en el archivo
externo. Entonces, vamos a cambiar eso. Bueno entonces, ¿Cómo podemos mostrar datos
dinámicos en nuestra plantilla? Mostrar datos dinámicos se llama interpolación y los datos
generalmente se definen en la clase de componente. Entonces, podemos ir al componente de
la aplicación sí y, como puede ver, hay un título de campo que tenemos una aplicación de
cadena y, si vamos al componente de la aplicación en HTML, veremos que se usa en la parte
superior y Está envuelto pero por dobles tirantes. Entonces, podemos ir al componente del
encabezado sí y vamos a crear un campo llamado título del encabezado, que es igual al título
del encabezado, y, si vamos a nuestro componente del encabezado en HTML, podemos ajustar
con el título del encabezado y el presentador. Dilo. Ir a nuestro navegador y hay un título de
cabecera. También lo es la belleza. ¿Qué sucede si desea crear un botón y queremos
desactivarlo para su interpretación de nuestra clase? Utilizamos la interpolación para definir
el valor, siempre y cuando el valor que estamos definiendo es una cadena. Entonces, en ese
caso no funcionará, pero podemos usar un enlace de propiedad que nos permite definir los
valores de los atributos de los elementos de la clase de componente. Para ello, podemos
utilizar un corchetes. Primero, crearé un campo de clase llamado botón deshabilitado, que es
igual a falso. En nuestro componente de encabezado de HTML, creemos un botón, botón
deshabilitado, y podemos establecer nuestro atributo deshabilitado en cuadrado y es igual al
botón deshabilitado. Salva eso. No funciona porque tenemos que ajustar nuestro campo de
botón de desactivación. Salva eso. Vaya al navegador y, como puede ver, funciona y, si
cambiamos el patrón de desactivación a verdadero, todavía no funciona. ¿Por
qué? Repetir. Primero decimos que creamos un botón con el botón de título deshabilitado y
luego creamos deshabilitado, que es igual al botón deshabilitado, y guardamos eso. Vaya al
navegador y, si cambiamos un campo deshabilitado a verdadero, y funciona. Además, lo que
debe saber sobre el enlace de propiedades es que está funcionando de una manera. Por lo
tanto, el flujo proviene de nuestra clase en plantilla, no en Reversa y no en ace. A continuación,
aprenderemos cómo agregar y reutilizar nuestro componente en la aplicación. Así que estad
atentos.

Composición de componentes

En el último video, hemos creado nuestro primer componente angular y también hemos
echado un vistazo a las plantillas. En este video, vamos a ver cómo se puede insertar el
componente dentro de otro componente. Primero, vamos a crear otro componente. Nombraré
ese componente del menú. Por lo tanto, vaya a la línea de comando y escriba el menú del
componente ng G. Presione enter. Como aprendió en el video anterior, Angular CLI hizo un par
de cosas para nosotros, como componente agregado a las declaraciones de la aplicación, como
aquí, lo que significa que podemos usar ese componente en nuestra aplicación. Bien,
básicamente, lo que realmente queremos hacer es insertar un componente principal dentro de
un componente más saludable. Entonces, vamos al componente del menú, a la plantilla y a ese
menú del párrafo. Ahora, podemos ir al componente del menú en es y copiar el selector. Ir al
componente del encabezado, plantilla, y quitar el título y el botón. Escriba el encabezado y
pegue el selector y cree un ataque de administrador. Entonces, puede guardar eso y, en
nuestra terminal alrededor de ng serve, que construirá y ejecutará nuestra aplicación en el
puerto cuatro mil doscientos. Voy a ir al navegador. Refrescar. Como puede ver, hay un
encabezado y un menú y podemos verificar los elementos. Entonces, hay un encabezado hacia
arriba y, dentro de él, hay un PTAC con un encabezado y también hay una etiqueta de menú
hacia arriba dentro del encabezado hacia arriba. Así que, genial, funciona. En el siguiente
video, trabajaremos con ganchos de ciclo de vida. hay un encabezado hacia arriba y, dentro de
él, hay un PTAC con un encabezado y también hay una etiqueta de menú hacia arriba dentro
del encabezado hacia arriba. Así que, genial, funciona. En el siguiente video, trabajaremos con
ganchos de ciclo de vida. hay un encabezado hacia arriba y, dentro de él, hay un PTAC con un
encabezado y también hay una etiqueta de menú hacia arriba dentro del encabezado hacia
arriba. Así que, genial, funciona. En el siguiente video, trabajaremos con ganchos de ciclo de
vida.

Hooks Lifecycle

Anteriormente, ha aprendido la composición de componentes en Angular. En este video,

analizaremos los ganchos del ciclo de vida y nos centraremos en el orden de cada fase de los
componentes, y ubicaremos nuestro código en algunos métodos del ciclo de vida. Ganchos de
ciclo de vida. Un componente en Angular tiene un ciclo de vida, una serie de fases diferentes
que atraviesa desde el nacimiento hasta la muerte. Puede conectarse a esas diferentes fases
para obtener un control de grano bastante fino de nuestra aplicación. Para hacer esto,
agregaremos algunos métodos específicos a nuestra clase de componentes, a los que se les
llama durante cada una de estas fases del ciclo de vida. A esos métodos los llamamos
ganchos. Los ganchos se ejecutan en este orden: constructor, cambios de motor y geminate, y
usted hace tecnología, destruye el motor, etc. Entonces, por ejemplo, se invoca al constructor
cuando un Angular crea un componente o una directiva llamando a un nuevo en la clase. Por
ejemplo, podemos ir al componente de saludo de TS y al cuerpo del constructor, permite a la
consola cerrar sesión del componente o del constructor. Guarde eso, vaya al navegador y en la
consola verá la llamada del constructor de mensajes. Los cambios del motor se invocan cada
vez que hay un cambio en el orden de las propiedades de entrada del componente. El motor
en él se invoca cuando el componente dado se ha inicializado. Por lo tanto, podemos ir a ese
componente, el componente del encabezado y, como puede ver, se implementa en él, que se
importa desde el núcleo angular y crea ng en un método de red. Por lo tanto, podemos
consultar en cerrar sesión dentro de ese método. Este título de cabecera. Guarde eso, vaya al
navegador y, primero, verá el mensaje de llamada del constructor y, luego, el título del
encabezado. ng do check se invoca cuando cambian el detector del componente dado se
invoca y nos permite implementar nuestro propio componente de algoritmo de detección de
cambios. Entonces, podemos ir al componente de saludo y, primero, importemos para
verificar, luego implementamos do check y creamos ng do check y, dentro de eso, pensé que
podemos solucionar el error en una comprobación de mensajes. Salva eso. Vaya al navegador
y, como puede ver, va dos veces. También podemos usar enganches para los componentes
secundarios, como ng después del contenido en él, y usted tiene que hacer el contenido
shacked, y debe ver en él, y ver la vista exterior. Además, existe un método muy poderoso
llamado ng ondestroy que es un método que se invoca justo antes de que un Angular destruya
el componente. En el siguiente video, veremos los eventos. importemos para verificar, luego
implementamos do check y creamos ng do check método y, dentro de eso, pensé que podemos
solucionar el error en una comprobación de mensajes. Salva eso. Vaya al navegador y, como
puede ver, va dos veces. También podemos usar enganches para los componentes
secundarios, como ng después del contenido en él, y usted tiene que hacer el contenido
shacked, y debe ver en él, y ver la vista exterior. Además, existe un método muy poderoso
llamado ng ondestroy que es un método que se invoca justo antes de que un Angular destruya
el componente. En el siguiente video, veremos los eventos. importemos para verificar, luego
implementamos do check y creamos ng do check método y, dentro de eso, pensé que podemos
solucionar el error en una comprobación de mensajes. Salva eso. Vaya al navegador y, como
puede ver, va dos veces. También podemos usar enganches para los componentes
secundarios, como ng después del contenido en él, y usted tiene que hacer el contenido
shacked, y debe ver en él, y ver la vista exterior. Además, existe un método muy poderoso
llamado ng ondestroy que es un método que se invoca justo antes de que un Angular destruya
el componente. En el siguiente video, veremos los eventos. Me gusta ng después de contenido
en él, y tienes que tener contenido shacked, y tienes que ver en él, y ng vista externa
verificada. Además, existe un método muy poderoso llamado ng ondestroy que es un método
que se invoca justo antes de que un Angular destruya el componente. En el siguiente video,
veremos los eventos. Me gusta ng después de contenido en él, y tienes que tener contenido
shacked, y tienes que ver en él, y ng vista externa verificada. Además, existe un método muy
poderoso llamado ng ondestroy que es un método que se invoca justo antes de que un Angular
destruya el componente. En el siguiente video, veremos los eventos.

DI Inyeccion de dependecia

Bienvenido a aprender la sección gratuita sobre desarrollo de TypeScript para Angular, que
separa las preocupaciones con los servicios escritos. En la sección anterior, te presenté en un
componente Angular, cómo generar fácilmente un componente Angular simple donde se
define cómo cambiar la plantilla y usar eventos del mouse como clic. Le he mostrado cómo
podemos usar los eventos para responder a las acciones del usuario. En esta sección, al
principio, lo presentaré en un servicio y DI, que es una inyección de dependencia. Luego,
creará un servicio muy simple e inyectará ese servicio en nuestra clase de componentes y, al
final, inyectaremos un servicio en otro servicio. Entonces, en este video, nos centraremos en la
inyección de dependencia y, luego, lo introduciré en un servicio. Inyección de
dependencia. (DI). La inyección de dependencia es un patrón de diseño de software que
permite la eliminación de dependencias codificadas y permite cambiarlas. Primero, echemos
un vistazo al problema que tenemos cuando no usamos la inyección de dependencia. En un
constructor de clase de automóviles, estamos creando una nueva instancia de motor y
puertas. Entonces, la clase de autos crea todo lo que necesita dentro del constructor, lo que
significa que no es flexible y es difícil de probar. Entonces, ¿qué pasa si queremos crear un
auto nuevo, pero con otro motor o si queremos crear un auto con más o menos
puertas? Solución. Como puede ver en la diapositiva, se crea una instancia de motor y una
instancia de puertas fuera del automóvil. Un constructor de automóviles contiene solo una
definición de puertas y motor. Entonces, ¿por qué es una gran victoria? Podemos pasar
cualquier tipo de motor, por ejemplo v8 o Spyder. Lo mismo ocurre con las puertas. Por lo
que' s realmente fácil de probar una clase de coche. Servicios. Cuando se trata de Angular,
proporciona su propio marco de inyección de dependencia. Al desarrollar una aplicación web
para reutilizar el mismo código en múltiples componentes o compartir datos entre estos
componentes o recuperar datos y luego reutilizarlos. Es por eso que los servicios angulares
son responsables de hacer. Como puede ver en la diapositiva, por ejemplo, el servicio a es
responsable de obtener algunos datos de algún punto final y podemos inyectar el servicio en
el componente, ay B. El servicio B podría ser responsable de la autorización. Por lo tanto,
podemos inyectar el servicio en un componente a y C y así sucesivamente. En palabras
simples, el servicio Angular es solo una función que nos permite acceder a las propiedades y
métodos que se definen en la función. Asi que, Podemos crear una tonelada de servicios que
hacen algo realmente genial y simple utilizando Angular. En el siguiente video, crearemos
nuestro primer servicio Angular y usaremos ese servicio en el componente.

Servicios

En el video anterior, hemos aprendido sobre la inyección de dependencias y los servicios

angulares. En este video, estaremos creando nuestro primer servicio Angular. Entonces, lo
haremos usando Angular CLI. Luego, implementaremos una lógica de servicio, al final
inyectaremos ese servicio en un componente. Entonces, lo primero que vamos a hacer es
generar un servicio en nuestro terminal utilizando CLI angular. Por lo tanto, vaya a la terminal
y use Angular CLI type ng G, que es una abreviatura para generar, luego un servicio y el
nombre del servicio. Así, por ejemplo, datos de fútbol y presentador. Como podemos ver,
genera un servicio con un service pack. Una vez que creamos un servicio, tenemos que ir a la
aplicación football como servicio y copiar el nombre del servicio. Por lo tanto, es un servicio
completo de botella. Entonces, vaya al punto abdominal, sí, y tenemos que importar un
servicio de datos de fútbol desde esta ubicación, así. Una vez que hagamos eso, tenemos que
agregar ese servicio a los proveedores. Entonces, copiemos eso y peguemos en la matriz de
proveedores. Al registrar el servicio como proveedor, lo pone a disposición en cualquier parte
de la aplicación. Entonces, implementemos algo ilógico en el servicio de datos de fútbol. Vaya
allí y, si se acerca a ese servicio, verá que es bastante similar a un componente, pero, en
servicios, estamos importando y utilizando decorador inyectable y, básicamente, el decorador
inyectable simplemente proporciona una inyección de dependencia para nuestros servicios.
. Entonces, lo que nuestro servicio hará, básicamente, queremos usar el servicio para
recuperar algunos datos de fútbol ya que, por el momento, no queremos obtener los datos de
la API remota o algo así. Nosotros' Lo haré más tarde en el curso. Entonces, por ahora,
podemos codificar algunos datos. Entonces, lo primero que vamos a hacer es crear una
propiedad llamada lista de jugadores, que es una matriz de objetos de jugadores. Por lo tanto,
el tipo de lista de jugadores tipo jugador es igual a una matriz, una matriz vacía, por lo que
tenemos que crear una interfaz de jugador. Entonces, vamos a crear una interfaz de jugador
con un nombre de propiedad que sea una cadena y H, que sea un número. Genial, ahora
podemos crear nuestro primer objeto de jugador. Por supuesto, llamemos a ese objeto John de
tipo player, que es igual a un objeto con un nombre John and H sucio, y así podemos agregar
ese objeto a la lista de jugadores y agregar una matriz después del tipo. Bien, entonces
agreguemos otra red de llamadas a objetos del tipo player es igual a un objeto con un nombre
Matt y age por ejemplo 20, así y podemos agregar ese objeto a la lista de jugadores. Genial, así
que también puedes crear un método llamado obtener lista de jugadores y ese método
devolverá una lista de jugadores. Por lo tanto, escriba esta lista de jugadores. Genial, así se
hace la lógica básica de nuestro servicio. Para usar ese servicio, primero vamos a crear un
componente. Podemos llamar a ese componente ng generar lista de reproductores de
componentes. Bien, ahora agreguemos esa lista de jugadores a la plantilla del componente de
la aplicación. Por lo tanto, será una lista de jugadores. Vaya al componente de la lista de
jugadores y, para utilizar nuestro servicio, primero tenemos que importar ese servicio. Ok, así
que importe el servicio de datos de fútbol desde el servicio de datos de fútbol y, en el
constructor que utiliza la inyección de dependencia, podemos proporcionar una definición de
un servicio, por ejemplo, datos privados de fútbol. El fútbol hace un servicio de tipo de fútbol
como servicio. Asi que, Tenemos acceso a este servicio de datos de fútbol y ng en un método
de red. Podemos intentar eso. Por lo tanto, el servicio de datos de datos de fútbol de tipo costo
es igual a estos datos de fútbol y puede llamar a la lista de jugadores. Por lo tanto, puede
cambiar eso a la lista de jugadores y veremos la lista de jugadores de la consola de salir de
puntos. Entonces, abra su terminal y escriba ng para compilar nuestra aplicación y ejecútelo
en el puerto cuatro mil doscientos. Bien, entonces podemos revisar nuestra consola y, como
puedes ver, hay una serie de dos objetos en John y Matt. En el siguiente video, agregaremos un
servicio a otro servicio. abra su terminal y escriba ng serve para compilar nuestra aplicación y
ejecútelo en el puerto cuatro mil doscientos. Bien, entonces podemos revisar nuestra consola
y, como puedes ver, hay una serie de dos objetos en John y Matt. En el siguiente video,
agregaremos un servicio a otro servicio. abra su terminal y escriba ng serve para compilar
nuestra aplicación y ejecútelo en el puerto cuatro mil doscientos. Bien, entonces podemos
revisar nuestra consola y, como puedes ver, hay una serie de dos objetos en John y Matt. En el
siguiente video, agregaremos un servicio a otro servicio.

Recientemente, usted ha aprendido acerca de la inyección de dependencia y los

servicios. Hemos creado un servicio con Angular CLI, implementamos una lógica básica para
ese servicio e inyectamos en el componente de fútbol. En este video, nos centraremos en crear
un servicio e inyectar ese servicio a otro servicio. Entonces, primero vamos a la terminal y
creamos otro servicio. Llamaremos a ese servicio ng g autorización de servicio. Por lo tanto,
simplemente escriba off presentador. Ahora, como lo hicimos antes, vaya a los módulos de
aplicaciones TS e importe otro servicio desde nuestra superficie de TS y se llame servicio y
agregue ese servicio a los proveedores, así. Así, en este servicio, se creará un método
denominado autorizado. Por lo tanto, vaya al punto de servicio de Alf, sí, y cree que se autoriza
un método que volverá a cuatro patas. Entonces, volvamos, por ejemplo, en verdad y podemos
inyectar el servicio al servicio de datos de fútbol. Entonces, vamos al servicio de datos de
fútbol y, primero, importemos ese servicio. Entonces, importemos el servicio desde el
directorio actual y, como hicimos antes, en el constructor, escribamos privado de servicio de
tipo de servicio. Por lo tanto, tenemos acceso al servicio de aplicaciones y, al utilizar nuestro
servicio de estación completa, podemos, por ejemplo, regresar y vaciar mal cuando el usuario
no es un jugador de papas fritas. Por lo tanto, podemos usar esa lista de jugadores y podemos
usar nuestro servicio como autorizado y, cuando lo está, podemos devolver la lista de
jugadores y, si no, podemos devolver una matriz vacía, así, y ahora, puede ir a nuestro
navegador pero, primero, ejecutemos y reservemos para regenerar nuestra aplicación y
ejecutemos en los puertos 4000 y 200. Actualicemos y, como puede ver, Todavía tenemos una
matriz de dos objetos, porque está autorizado devolver un verdadero pero, si cambiamos eso
a falso, veremos una matriz vacía. Guay. Entonces, en esta sección, hemos aprendido acerca de
la inyección de dependencias, servicios Angulares. Hemos creado un servicio Angular a través
de Angular CLI. Inyectamos un servicio en un componente y al final insertamos un servicio en
un servicio. En la siguiente sección, comenzaremos a trabajar con módulos, directivas,
canalizaciones con TypeScript. Así que estad atentos. Empezaré a trabajar con módulos,
directivas, tuberías con TypeScript. Así que estad atentos. Empezaré a trabajar con módulos,
directivas, tuberías con TypeScript. Así que estad atentos.

Bienvenido a aprender TypeScript para el desarrollo angular, sección para escribir módulos,
directivas y canalizaciones con TypeScript. En la sección anterior, hemos estado trabajando
con servicios en Angular. Hemos aprendido lo que es una inyección de dependencia, hemos
creado nuestro propio servicio y hemos inyectado ese componente completo del servicio en
otro servicio. En esta sección, del principio, veremos los módulos angulares. Luego,
escribiremos algunas directivas poderosas. A continuación, transformaremos los datos con
tuberías y, al final, crearemos un enlace de datos bidireccional de dos maneras. Entonces, en
este video, nos centraremos en NgModule, cuándo importar un NgModule y cuándo importar
los módulos principales de Angular. ngModule. NgModule es la primera estructura básica que
conociste al codificar una aplicación con Angular, pero es También es el más sutil y complejo
debido a los diferentes ámbitos. Cuando vamos al editor de código, al archivo SRC main dot ES,
se realiza automáticamente con Angular CLI, pero lo primero que debe hacer en Angular es
cargar nuestra ruta NgModule, que está aquí y, si vamos al módulo de la aplicación. ,
encontraremos un NgModule. El propósito de NgModule es declarar cada cosa que creas en
Angular. Estos dos tipos de declaraciones de estructuras principales, principalmente para
componentes y proveedores de servicios. ¿Por qué necesitamos registrar todo? Permite, antes
de tiempo, la compilación IOT, que es asombrosa para el rendimiento y puede parecer pesada
al principio, pero en realidad le ahorra líneas de importación manuales. La confusión
comienza con las declaraciones y los proveedores que no tienen la misma visibilidad de
alcance para las declaraciones. Los componentes están en ámbito local, visibilidad
privada. Los servicios de proveedores están en alcance global, visibilidad pública. Significa
que los componentes que declara solo se pueden utilizar en el módulo actual. Si necesita
utilizar un módulo externo y otro, deberá exportarlos. Por ejemplo, yo diría que queremos
exportar el componente del menú, así. Por el contrario, los servicios que proporcionó estarán
disponibles, inyectables, en cualquier parte de su aplicación en todos los módulos. Entonces,
cuando importar un NgModule. Las cosas se complican porque, por supuesto, como cualquier
marco y aplicación, no tendrá solo un módulo, no muchos de ellos. Angular en sí está
subdividido en diferentes módulos: núcleo, HTTP común, etc. Entonces, otra cosa principal
que haces en un módulo Angular es importar otro NgModule que necesites. Por ejemplo,
nuestro principal módulo de navegador NgModule importa. Debe saber por qué importa estos
otros módulos, cuándo importar módulos principales Angular. Por lo tanto, se requiere un
buen conocimiento de los módulos angulares para saber cuántas veces necesita
importarlos. Por ejemplo, los módulos que se importan cada vez que los necesita o, por
ejemplo, el módulo común. Todos estos elementos básicos de las plantillas angulares, como
los enlaces y vísperas y d4, y así sucesivamente, el módulo de formas, el módulo de formas
reactivas, el módulo enrutador, cualquier otro módulo que le proporcione componentes,
directores o canalizaciones, y también los módulos que se importan solo una vez, por ejemplo.
, El módulo cliente HTTP, el módulo de animación del navegador o cualquier otro módulo que
le proporcione servicios únicamente. Bien, bien, entonces, en el siguiente video, haremos
algunas cosas prácticas con directivas. Todos estos elementos básicos de las plantillas
angulares, como los enlaces y vísperas y d4, y así sucesivamente, el módulo de formas, el
módulo de formas reactivas, el módulo enrutador, cualquier otro módulo que le proporcione
componentes, directores o canalizaciones, y también los módulos que se importan solo una
vez, por ejemplo. , El módulo cliente HTTP, el módulo de animación del navegador o cualquier
otro módulo que le proporcione servicios únicamente. Bien, bien, entonces, en el siguiente
video, haremos algunas cosas prácticas con directivas. Todos estos elementos básicos de las
plantillas angulares, como los enlaces y vísperas y d4, y así sucesivamente, el módulo de
formas, el módulo de formas reactivas, el módulo enrutador, cualquier otro módulo que le
proporcione componentes, directores o canalizaciones, y también los módulos que se
importan solo una vez, por ejemplo. , El módulo cliente HTTP, el módulo de animación del
navegador o cualquier otro módulo que le proporcione servicios únicamente. Bien, bien,
entonces, en el siguiente video, haremos algunas cosas prácticas con directivas.

Directivas

En el video anterior, hemos aprendido más sobre los módulos angulares. En este video,
aprenderemos las directivas angulares, los tipos de directivas angulares, debe ser directivas
como ngClass, estructura o directivas como ngFor, crearemos una directiva personalizada y
veremos ngIf, ngSwitch, ngSwitchCase, ngSwitchDefault y, al final, ngBootstrap. Directivas
angulares. Una directiva en Angular es solo una clase simple de JavaScript que está decorada
con el decorador directivo pero no me dice nada. Las directivas son básicamente instrucciones
que le dicen a Angular que haga algo y depende de las directivas que nos gustaría usar. Por
ejemplo, podemos crear una directiva que cambiará el texto o establecerá el color de fondo de
un elemento y tenemos tres tipos diferentes de directivas. Componentes Los componentes son
simplemente directivas con sus propias plantillas. Directivas estructurales. Cambiemos el
diseño del dormitorio agregando y eliminando elementos Dom, por ejemplo, ngIf. Directivas
absolutas que cambian la apariencia o el comportamiento de un elemento, componente u otra
directiva, por ejemplo, ngClass. ngClass. Antes de hacer un ejemplo usando ngClass, le
mostraré por qué necesitamos usar esta directiva. Vamos a añadir algunos estilos a nuestro
componente de aplicación. Por lo tanto, podemos ir al componente de la aplicación de puntos
CSS y crear una clase roja con un color rojo y luego ir al componente de la aplicación de la
plantilla HTML, a la etiqueta h1. Crea una clase con color rojo. Guarde eso, recuerde compilar
con y reservar y, como puede ver, tenemos una bienvenida al título de la aplicación en color
rojo, genial. Pero, ¿qué pasa si quieres cambiar el color del título
dinámicamente? Primero, Tenemos que crear otro campo de clase llamado color de título. Lo
hice antes. Entonces, es una cadena, por ejemplo, roja. Luego, cree un color de título para
alternar y, si este color de título es rojo, cambie el color del título de un campo a azul. De lo
contrario, cambiar a rojo. Ahora, podemos ir al componente HTML de la aplicación y, primero,
eliminar esa clase. Podemos agregar un evento de clic con un controlador de método de color
de título de alternar y, para cambiar la clase de color, podemos usar la directiva ngClass. Al
usar el enlace de propiedades, ponga ngClass entre corchetes, así, ngClass y es igual al color
del título. Guarde eso, vaya al navegador, y tenemos que agregar otra clase llamada azul con
un color azul. Guarde eso y, ahora, haga clic para cambiar de rojo a azul y de azul a
rojo. Genial, entonces, funciona. ngFor es una directiva estructural. Muchas veces en nuestras
aplicaciones cuando recibimos algunos datos que son, por ejemplo, una matriz que queremos
iterar y mostrar. En Angular, hay una forma muy sencilla de hacerlo utilizando la directiva
ngFor. Entonces, en la sección anterior, hemos creado un componente de lista de
jugadores. Entonces, vamos allá y tenemos una lista de jugadores. Podemos asignar la lista de
jugadores a esta lista de jugadores y podemos crear una lista de jugadores de campo, que es
igual a una matriz vacía, así. Ahora, podemos ir a la plantilla de componentes de la lista de
jugadores y podemos cambiar la etiqueta P en tu caso. Las directivas de estructura son fáciles
de reconocer. Cuando escribes, bien, escribes asterisco, luego ngFor y luego ese jugador, que
es, por supuesto, una variable de la lista de jugadores. La lista de jugadores es una matriz y,
dentro de ul, podemos crear un Li y poner un jugador que es un objeto y escribir el nombre
del punto del jugador. Salva eso, vaya al navegador, cambie autorizado a verdadero y, como
puede ver, mostramos un John y Matt.

Por lo tanto, recuerde que cambiar es un método autorizado en el servicio a true. Genial,
entonces, como puedes ver, la directiva ngFor es muy fácil de usar. Directiva
personalizada. Digamos que queremos crear una directiva que cambiará en el tamaño de
fuente del elemento. Lo primero que vamos a hacer es generar una directiva utilizando CLI
angular. Por lo tanto, podemos ir al terminal y escribir ng generar o el tamaño de fuente de la
directiva G y presionar Entrar. Genera una directiva de tamaño de fuente, tortillas y
especificaciones con prueba para esa directiva. El comando agregó automáticamente esa
directiva para agregar módulos es, como puede ver, y a las declaraciones junto al componente
de lista de reproducción. Asi que, ahora podemos ir al punto de la fuente del tamaño de la
fuente sí y lo primero que vamos a hacer es importar una entrada y una referencia de
elemento desde el núcleo angular. ¿Por qué necesitamos esas clases? La directiva proporciona
la funcionalidad del decorador de directivas, element ref inyecta en el constructor de
directivas para que podamos tener acceso al elemento Dom. Entonces, primero, crea un búho
privado de tipo elemento ref. Usando entrada, pasará como un argumento el teléfono firma
con la directiva, lo que significa que la entrada permite que los datos fluyan desde la expresión
de enlace a la directiva. Entonces, el constructor que usa la inyección de dependencia pasamos
un borrador de elemento a la propiedad out. Queremos tener un acceso al elemento. Ahora,
usando la entrada, estableceremos un campo de tamaño de fuente en la clase. Entonces,
escriba en el tamaño de fuente de la aplicación de entrada y nombre ese tamaño de fuente
flotante que es una cadena. Entonces, usando la entrada, establecerá un tamaño de fuente
flotante en la clase. Por lo tanto, pasamos el nombre de la directiva como un argumento y el
tipo de ese campo será una cadena. Bien, ya casi hemos terminado, pero ¿dónde y cómo
estableceremos el tamaño de fuente del elemento actual? Podemos usar un componente de
ciclo de vida gancho. Por ejemplo, cuando se crea un componente, se llama a la energía en un
método de red. Entonces, vamos a crear una energía en un método de red y, dentro de ese
gancho, podemos escribir que el estilo de cada elemento nativo en el tamaño sea igual a este
tamaño de fuente. Entonces, como mencioné anteriormente, usando la referencia del
elemento en el constructor, con el campo del elemento establecido en nuestra clase y, usando
ese campo, tenemos un acceso directo al elemento. Para establecer el tamaño de fuente,
escribimos esto en un tamaño de fuente de estilo de elemento nativo igual a este tamaño de
fuente. Creamos nuestra primera directiva personalizada Angular, así que vamos a usarla. Ir al
componente de la aplicación, HTML, y puede ser nuestro h1 en una etiqueta y podemos
escribir, entre corchetes, el tamaño de la fuente es igual a 13 píxeles como una cadena, así
como guardarla. Escriba ng serve y la línea de comando y vaya al navegador y, como puede
ver, la bienvenida a la aplicación es más pequeña. Podemos cambiar a los 20 píxeles. Salva
eso. Es más grande de nuevo. Así, podemos cambiar a los 33 píxeles. Sí, genial, entonces,
funciona. Nuestra primera directiva personalizada.

ngIf. ngIf es una directiva estructurada muy fácil. Toma una expresión booleana y este lugar
no es el elemento completo. Entonces, vamos al componente de la aplicación y creamos otro
campo llamado con título, que es booleano y es igual a falso. Ahora, podemos ir a la plantilla
del componente de la aplicación y podemos usar ng Asterix ngIf que es igual a con el título y
sabemos que es falso. Asi que, Si guardamos eso, no veremos el título porque con el título es
falso, pero si cambiamos al verdadero ese campo, guárdalo, veremos nuevamente el título,
sí. Entonces, es muy fácil. ngSwitch. Entonces, revisemos el ngSwitch consigo mismo, no es
una directiva estructural. Es una directiva absoluta que controla el comportamiento de las dos
directivas, ngSwitchCase y ngSwitchDefault, que son directivas estructurales. Entonces,
ngSwitch recibió el valor y el término si se muestra alguno de los casos de
cambio. ngSwitchCase desplazó el elemento si el valor coincide con el valor del interruptor. Si
no hay coincidencias para cada ngSwitchCase, ngSwitchDefault es un elemento
pagado. Entonces, vamos a crear un ejemplo. Justo debajo de la etiqueta h1, crearé un div con
una directiva ngSwitch que es igual a, por ejemplo, una página y, dentro del div, vamos a ' s
crear tres párrafos con ngSwitchCase, que es igual a, por ejemplo, una cadena de información
con valor de información y copiaré eso y pegaré y contactaré con qué se trata y
contactaré. Ahora, vamos a crear otro párrafo y, en lugar de la directiva ngSwitchCase, cambie
a ngSwitchDefault sin ningún valor y cambie el nombre de ese párrafo a inicio. Bien, entonces,
no sabemos qué es una página. Entonces, vamos a crear un ID de componente de aplicación en
otro campo llamado página que es una cadena y es igual a, por ejemplo, contacto. Guarda eso y
ve al navegador y verás el párrafo de contacto. Si cambiamos a, por ejemplo, información, verá
el gráfico de la barra de información. Ahora, podemos cambiar eso a la lista de
jugadores. Guarda eso y su casa, porque no tenemos un caso de cambio de lista de jugadores,
genial. ngBootstrap. Cuando estamos creando una aplicación, a veces, quiere usar
componentes listos para usar, estilos de voluntad y existe una directiva ngBootstrap y Angular
específica para Bootstrap 4. Por lo tanto, podemos ir al repositorio de github de ngBootstrap
y, como podemos ver, requiere dos dependencias, una Angular y una Bootstrap. Entonces,
instalemos porque ya tenemos un Angular en la versión 5, así que tenemos que instalar
Bootstrap 4. Entonces, vamos a la página de Bootstrap e instalemos np by npm install
Bootstrap command. Entonces, abre el terminal y escribe npm e instala Bootstrap. Como
puede ver, instalamos Bootstrap en la versión 4. Genial, entonces sí. Vamos a instalar npm
instalar ngBootstrap. Copie ese comando, vaya a la línea de comandos y pegue en el
terminal. Esta bien Entonces, una vez que instalemos, necesitamos importar nuestro módulo
principal. Entonces, vamos a SRC a la pantalla principal de la aplicación, no a mediados de los
80, a la aplicación, app modulo TS e importemos un módulo llamado NgbMobule de @ng
Bootstrap y tenemos que agregar ese módulo a las importaciones. Por lo tanto, diríjase a las
importaciones junto al módulo de navegador que incluye el punto NgbModule para la
ruta. Por lo tanto, tenemos que llamar a ese método hacia adelante. Entonces, lo último que
tenemos que hacer es ir a Angular CLI dot JSON y agregar otros módulos de nodo de estilo,
Bootstrap slash taste / CSS / Bootstrap dot mint mint dot CSS. Salva eso. Podemos verificarlo
yendo a la documentación de Bootstrap, a los ejemplos, a la documentación, a los
componentes, copiemos la primera alerta y vayamos a nuestro componente de aplicación
HTML de puntos y, debajo de la etiqueta h1, pegemos un componente de alerta
Bootstrap. Guarde eso y escriba ngServe que construirá y ejecutará nuestra aplicación. Ir a la
actualización del navegador y como puedes ver funciona nuestro componente. Guay. En el
siguiente video, transformaremos los datos con tuberías.

Pipes

Anteriormente, hemos aprendido acerca de las directivas angulares, que son realmente
poderosas. En este video, nos centraremos en las tuberías, en la construcción de tuberías y en
promover la subida de una tubería. Tubería. Cada aplicación comienza con lo que parece una
tarea simple: obtener datos, transformarlos y mostrarlos a los usuarios. En una sección
anterior, en la que tenemos datos de un servicio, transforme los datos antes de mostrarlos en
la vista. Podemos usar tuberías y Angular viene con un stock de tuberías, como tubería de
fecha, tubería superior, almohadilla inferior, tubería de moneda y% de tubería. Todos ellos
están disponibles para usar cualquier plantilla. Por lo tanto, podemos ir a que nuestra lista de
reproducción y el plato. Vaya a la carpeta de la capa de aplicación y el reproductor es un
componente del HTML y allí tenemos ul y Ally y, dentro de la expresión de interpolación, pasa
el valor del nombre del jugador de los componentes a través del operador de tuberías y el tipo
de mayúsculas. Salva eso. Vaya al navegador y, como puede ver, escribimos mayúsculas y
mate. Entonces, también podemos usar encadenamiento. Entonces, podemos agregar otra
tubería y podemos revisar una minúscula. Guarde eso, vaya al navegador y, como puede ver,
hay un John y Matt en minúscula. Increíble. Por lo tanto, es muy simple. Podemos probar otra
pipa, por ejemplo, fecha. Por lo tanto, puede crear un campo. Entonces, puede ir al
componente de la aplicación 30 y crear la fecha actual, que es una fecha y es igual a una fecha,
y podemos ir al componente de la aplicación del HTML y, debajo de la etiqueta h1 con una
etiqueta h2, y podemos , usando interpolación, pase la fecha actual y podemos usar una fecha
de tubería y una tubería puede aceptar cualquier número de parámetros opcionales para
ajustar su salida. Otros parámetros que canalizan siguen el nombre de la tubería con dos
puntos y, luego, el valor del parámetro. Por ejemplo, el formato de fecha, que puede ser
mes, días y años. Guarda eso, ve al navegador y, como puedes ver, funciona. Guay. Si la tubería
acepta varios parámetros, separe los valores con colores como, por ejemplo, el segmento de
tubería de uno a cinco. Guarda eso, el navegador, y funciona. En el siguiente video, vamos a
crear un enlace de datos bidireccional muy simple de dos maneras. Así que estad atentos.

Two-Way data binding

En el video anterior, hemos aprendido impresionantes características angulares como

directivas, tuberías. En este video, crearemos un enlace de datos bidireccional de dos
maneras, primero creando y cambiando el estado del componente y el segundo usando la
directiva ngModel. Entonces, primero vamos al editor de código para el componente de la
aplicación y creamos un método llamado set name que toma un evento como un argumento y
cambiará una propiedad de nombre a un valor objetivo del evento. Ahora, vamos a crear un
campo de nombre que es una cadena y es igual a una cadena vacía. Ahora, podemos ir al
componente HTML de la aplicación y crearemos un campo de entrada y crearemos un evento
de entrada, que tomará un controlador de nombre de conjunto y pasará un evento. Debajo de
eso, crearemos otra etiqueta h2 y, mediante la interpolación, podemos pasar un
nombre. Guarde eso, vaya al navegador y, si escribo una entrada, por ejemplo mi
nombre, Verás a continuación los cambios inmediatos. Guay. ngModel. La segunda solución es
muy simple. Primero, importa un módulo de formulario. Por lo tanto, podemos ir al módulo de
adición de ODS e importar el módulo de fuerza de las formas angulares. Agregue ese módulo a
las importaciones junto al módulo NGB. Luego, vaya al componente de la aplicación, sí, cree
una entrada para que podamos eliminar estas líneas de códigos. Ahora, vaya al componente
de la aplicación de TS y, primero comente un nombre de conjunto. Vaya a la plantilla HTML
del componente de la aplicación y, dentro de la entrada, escriba corchetes y luego
llaves. Dentro de llaves, escriba ngModel y esta directiva es igual a nombre. Por lo tanto, la
directiva ngModel vincula el valor del área de texto de selección de entrada de controles
HTML a los datos de la aplicación. Guardé eso. Ve al navegador y escribe mi nombre. Como
puede ver, funciona sin crear la lógica del método completo. Entonces, en esta sección, Hemos
aprendido acerca de los módulos angulares. Hemos aprendido sobre directivas angulares,
directivas estructuradas, directivas de atributos. Creamos una directiva
personalizada. También hemos transformado los datos utilizando tuberías y hemos creado un
enlace de datos bidireccional de dos maneras. En la siguiente sección, comenzaremos a
trabajar con la creación de formas poderosas reactivas con TypeScript.

Form
Bienvenido a aprender TypeScript para la sección de desarrollo Angular 5, poderosas formas
reactivas con TypeScript. En una sección anterior, hemos aprendido sobre módulos,
impresionantes directivas angulares y tuberías, y hemos creado un enlace 282. En esta
sección, al principio, compararé dos enfoques de formas en Angular. Crearemos nuestro
componente de formulario, luego le mostraré cómo manejar un formulario en Angular y, al
final, aprenderemos sobre la validación de formularios. Entonces, en este video, nos
enfocaremos en las formas angulares. Crearemos un nuevo componente de formulario y
agregaremos un marcado HTML con estilos de Bootstrap. Formas angulares. Básicamente, hay
dos formas de crear formas en Angular: enfoque reactivo y plantilla impulsada. Entonces, en
reactivo, hay datos inmutables, más fáciles de realizar una acción cuando cambia el valor, más
fáciles de agregar elementos de entrada dinámicamente, y por supuesto, es más flexible y la
plantilla es fácil de usar. Los resultados 282 se unen en el seguimiento externo del estado de
un elemento de entrada. Entonces, en este curso, crearemos una forma en enfoque
reactivo. Empápate de la cultura y en el terminal escribe ng genera o G component, llamaré a
ese componente para iniciar sesión y presionar Entrar. Ok perfecto Por lo tanto, hemos creado
un componente de formulario. Por lo tanto, tenemos que agregar un marcado HTML a nuestro
para el registro del componente. Justo aquí, tenemos que copiar un código HTML y podemos
usar, por supuesto, la inversión Bootstrap para la documentación. Por lo tanto, vaya a Get
Bootstrap calm, a la documentación, al componente, dos formularios. Desde aquí, podemos
copiar este. Entonces, copiemos eso, vaya a nuestro Kalitta, y pegue eso y podemos ir al inicio
de sesión desde el componente de tes, copie el selector, vaya al componente de la aplicación y
deje ' s eliminar todo sin h1. Vamos a añadir carga conforme. Está bien, guarda eso. Ahora
podemos compilar y ejecutar nuestra aplicación, así que escriba ng serve. Ahora, podemos ir a
nuestro navegador, al localhost, 4,000 y 200 y, como puede ver, tenemos nuestro componente
de formulario. Guay. Entonces, lo último que vamos a hacer es inyectar un módulo de
formulario de reacción que usaremos en nuestro componente de formulario. Entonces, vamos
al módulo de aplicación OTS e importamos reactivo para macho desde formas angulares y
tenemos que agregar este módulo a las importaciones, así. Esta bien El siguiente video será
manejo de formularios. Lo último que vamos a hacer es inyectar un módulo de formulario de
reacción que usaremos en nuestro componente de formulario. Entonces, vamos al módulo de
aplicación OTS e importamos reactivo para macho desde formas angulares y tenemos que
agregar este módulo a las importaciones, así. Esta bien El siguiente video será manejo de
formularios. Lo último que vamos a hacer es inyectar un módulo de formulario de reacción
que usaremos en nuestro componente de formulario. Entonces, vamos al módulo de
aplicación OTS e importamos reactivo para macho desde formas angulares y tenemos que
agregar este módulo a las importaciones, así. Esta bien El siguiente video será manejo de
formularios.

Validación de formularios

Recientemente, hemos creado un formulario reactivo y hemos implementado un manejo de

formularios. En el último video de esta sección, agregaremos características adicionales como
la validación de formularios. ¿Por qué necesitamos una validación? Antes de enviar los datos,
por ejemplo, al servidor, es muy bueno validarlos para que no los soliciten con datos no
válidos y esperar la respuesta. Nos ahorra tiempo. En los 4 componentes, primero, tenemos
que importar otro módulo llamado validadores. Anteriormente, solo agregábamos un nulo
como primer argumento a la matriz en cada campo, correo electrónico, contraseña y política
de privacidad, como primer argumento, lo que obviamente significa que el correo electrónico
y la contraseña no contendrán ningún valor predeterminado y la política de privacidad tendrá
fallas. valor. En el segundo argumento, podemos pasar evitadores. Por ejemplo, los
validadores requieren un punto, lo que significa que este campo es obligatorio. ¿Qué pasa si
queremos tener dos o más validadores para cada campo? Podemos usar ambos daters
compuestos. Por lo tanto, a los validadores de tipo de contraseña se les escribe y tenemos que
pasar una serie de validadores. Así, por ejemplo, el punto de daters requerido y el segundo
para daters puntean la longitud media y pasan cinco. Algunos personajes malvados del
numero cinco. Esta bien Para mostrar un mensaje en la plantilla del formulario de inicio de
sesión, podemos utilizar, o podemos crear un intervalo, con una clase Bootstrap. Por ejemplo,
al correo electrónico, vamos a crear un intervalo con un peligro de alerta de alerta de clase y
proporcionar un mensaje requerido y queremos mostrar esa alerta cuando un campo
específico no es válido. Entonces, ¿cómo podemos hacer eso? Al utilizar el campo de
componente reactivo de nuestra clase, que es un objeto, tenemos acceso a controles como
correo electrónico, contraseña, etc. Por lo tanto, puede escribir, por ejemplo, si el formulario
reactivo controla qué es un objeto, que un correo electrónico porque queremos revisar el
correo electrónico que también se almacena como un objeto y contiene una propiedad
válida. Entonces, para hacer eso, podemos usar ngIf es igual y escribir el recuento de puntos
de correo electrónico en forma reactiva, usualmente ese punto que Val coma. Entonces, si no
es válido, mostrará ese lapso. Por lo tanto, podemos guardar eso, ir a nuestro navegador y,
como puede ver, es necesario. Cambiaré eso a la diferencia, está bien, y si escribo el símbolo
del dibujo, verás que está cambiando todo el tiempo. Guay. Asi que. hagamos lo mismo con la
contraseña. Ahí tenemos la contraseña y cambiamos el nombre de control a
contraseña. Guarde eso, vaya a nuestro navegador, y hay una diferencia porque, en
contraseña, proporcionamos un valor de longitud media. Por lo tanto, podemos usar otra
característica en lugar de válida. Podemos usar errores, que es, por supuesto, un objeto de
tipos de errores. Ahí, Podemos proporcionar requeridos. Dígalo, vaya a nuestro navegador,
actualice y cambie la bandera. Salva eso. Entonces, agreguemos otra forma de div en
caracteres de longitud, pero tenemos que agregar sentencias adicionales. Por lo tanto, si
existen controles de formulario reactivo de errores de contraseña y controles de formulario
reactivo la contraseña de errores sin sentido es verdadera, entonces tenemos que mostrar el
mensaje de cinco caracteres como mínimo. Guarda eso, ve a nuestro navegador. Ahora, allí,
hemos requerido de la ley. Por lo tanto, tenemos que hacer lo mismo por
requerido. Bueno. Guarda eso, ve al navegador y cambia Aflac al continente, así. Está bien y,
como puede ver, los hombres tienen cinco tractores y, si escribo aa cinco veces, sí. Así que, sí,
genial, funciona. Además, al usar la forma reactiva, tenemos la posibilidad de suscribirnos si
un valor cambia de un campo específico. Primero, tenemos que usar una entrada en el método
de gancho que, obviamente, se dispara cuando el componente se inicializa. En el cuerpo,
podemos tipificar esta forma reactiva del punto gato. Queremos obtener un campo específico,
por ejemplo, contraseña, luego escriba el campo de cambios de valor de punto y cause el
método de suscripción, que recupera una llamada con valores y podemos hacer que la consola
salga de un valor. Esta bien Guarda eso, ve a nuestro navegador e intenta escribir algo. Como
puede ver, estamos desconectando cada carácter que escribimos. Por lo tanto, estamos
suscribiendo un campo de contraseña. Por lo tanto, es muy fácil de usar. Entonces, en esta
sección, hemos aprendido acerca de las formas reactivas angulares. Hemos creado nuestro
primer componente de forma reactiva. Luego, hemos implementado desde el manejo y, al
final, hemos agregado la validación de formularios. En la siguiente sección, comenzaremos a
trabajar con estrategias de enrutamiento. Queremos obtener un campo específico, por
ejemplo, contraseña, luego escriba el campo de cambios de valor de punto y cause el método
de suscripción, que recupera una llamada con valores y podemos hacer que la consola salga de
un valor. Esta bien Guarda eso, ve a nuestro navegador e intenta escribir algo. Como puede
ver, estamos desconectando cada carácter que escribimos. Por lo tanto, estamos suscribiendo
un campo de contraseña. Por lo tanto, es muy fácil de usar. Entonces, en esta sección, hemos
aprendido acerca de las formas reactivas angulares. Hemos creado nuestro primer
componente de forma reactiva. Luego, hemos implementado desde el manejo y, al final, hemos
agregado la validación de formularios. En la siguiente sección, comenzaremos a trabajar con
estrategias de enrutamiento. Queremos obtener un campo específico, por ejemplo,
contraseña, luego escriba el campo de cambios de valor de punto y cause el método de
suscripción, que recupera una llamada con valores y podemos hacer que la consola salga de
un valor. Esta bien Guarda eso, ve a nuestro navegador e intenta escribir algo. Como puede
ver, estamos desconectando cada carácter que escribimos. Por lo tanto, estamos suscribiendo
un campo de contraseña. Por lo tanto, es muy fácil de usar. Entonces, en esta sección, hemos
aprendido acerca de las formas reactivas angulares. Hemos creado nuestro primer
componente de forma reactiva. Luego, hemos implementado desde el manejo y, al final, hemos
agregado la validación de formularios. En la siguiente sección, comenzaremos a trabajar con
estrategias de enrutamiento. Ve a nuestro navegador e intenta escribir algo. Como puede ver,
estamos desconectando cada carácter que escribimos. Por lo tanto, estamos suscribiendo un
campo de contraseña. Por lo tanto, es muy fácil de usar. Entonces, en esta sección, hemos
aprendido acerca de las formas reactivas angulares. Hemos creado nuestro primer
componente de forma reactiva. Luego, hemos implementado desde el manejo y, al final, hemos
agregado la validación de formularios. En la siguiente sección, comenzaremos a trabajar con
estrategias de enrutamiento. Ve a nuestro navegador e intenta escribir algo. Como puede ver,
estamos desconectando cada carácter que escribimos. Por lo tanto, estamos suscribiendo un
campo de contraseña. Por lo tanto, es muy fácil de usar. Entonces, en esta sección, hemos
aprendido acerca de las formas reactivas angulares. Hemos creado nuestro primer
componente de forma reactiva. Luego, hemos implementado desde el manejo y, al final, hemos
agregado la validación de formularios. En la siguiente sección, comenzaremos a trabajar con
estrategias de enrutamiento.

Routing

Bienvenido a aprender TypeScript para la sección 6 de desarrollo angular, estrategias de

enrutamiento: enrutamiento del lado del cliente para aplicaciones de una sola página
(SPA). Anteriormente, hemos creado una poderosa forma reactiva. Hemos aprendido cómo
manejar ese formulario y hemos agregado una validación de formulario. En esta sección, al
principio, aprenderemos sobre la aplicación de una sola página (SPA) y el enrutamiento
angular, cómo cambiar los enlaces HTML predeterminados a los enlaces de navegación
angular y, al final, manejaremos esas rutas. Entonces, en este video, nos enfocaremos en
aplicaciones de una sola página, una introducción al enrutamiento angular, y crearemos un
enrutamiento. La aplicación de una sola página (SPA) es una aplicación web en la que la
mayoría de la interacción o Hamlet en el revestimiento sin la necesidad de llegar a un servidor
con el objetivo de proporcionar una experiencia de usuario más fluida. Por ejemplo, Un
enfoque tradicional cuando hacemos clic en el enlace de la barra de navegación, por ejemplo,
sobre nosotros, irá a la página sobre nosotros. La solicitud se enviará al servidor y el servidor
responderá con el HTML y la recarga del navegador. En un enfoque de aplicación de una sola
página, cuando hacemos clic en un enlace, se manejará, en nuestro caso, mediante un enlace
angular y podemos hacer una solicitud que se enviará al servidor y el servidor responderá con
un JSON con algunos datos y cree que los datos solo podemos recargar de usted, ya que el
navegador no se recargará. Es solo un ejemplo y hay muchas más ventajas al usar el enfoque
de aplicación de una sola página. Al igual que, no es necesario escribir código para representar
páginas en el servidor, un tiempo de carga podemos dividir el script o CSS en trozos más
pequeños, y luego el primero de estos troncales es fácil de depurar, el almacenamiento en
caché efectivo de los datos almacena y luego los utiliza, funciona incluso fuera de línea, pero,
por supuesto, requiere un JavaScript habilitado en el navegador, es lento para descargar
debido al pesado marco del cliente y problemas con la optimización del CEO. Enrutamiento
angular. El enrutamiento angular es una característica muy poderosa que podemos usar en
nuestras aplicaciones. Usando el enrutamiento angular, podemos dividir nuestra aplicación en
múltiples tipos de páginas. Por ejemplo, podemos crear una ruta para una página de inicio,
una página de usuario, una página de programación, etc. Luego, si navegamos por la ruta
específica, por ejemplo, el usuario, se cargará instantáneamente la página de usuario sin
volver a cargar el navegador. Entonces, vamos al teatro de códigos y, en primer lugar, tenemos
que establecer una ruta base. Entonces, podemos ir al índice de puntos de SSC HTML y, allí,
puedes encontrar una etiqueta base con href, sí con una barra. Asi que, Si está creando una
aplicación en Angular CLI, agregará automáticamente una etiqueta base que contiene el
receptor de RF / enrutamiento de ruta. Si no, tienes que agregar la pila de pesas. Luego, vaya
al módulo de aplicación OTS. En ese archivo, tenemos que importar dos módulos: importar un
módulo enrutador o un módulo enrutador y rutas y, básicamente, lo que queremos hacer es
crear una configuración para una ruta de aplicación. Entonces, en ese caso, tenemos que crear
una variable llamada rutas. Por lo tanto, podemos crear antes de ngModule Const up rutas de
tipo route y es igual a una matriz de objetos. Por lo tanto, todas las rutas de aplicaciones que
tenemos que almacenar en una matriz de objetos. Por lo tanto, cada objeto es la definición de
la ruta específica. Por lo tanto, podemos definir la primera ruta, proporcionar un objeto con
una ruta de acceso clave, por ejemplo, el inicio de sesión y el segundo componente de
propiedad. Por lo tanto, tenemos que proporcionar un componente para ese camino. Asi
que, Puede importar, por ejemplo, el componente del menú. Reemplazaremos ese
componente y en el siguiente video y podremos crear otra ruta, por ejemplo, sobre
nosotros. Está bien. Entonces, esta es nuestra configuración básica que vamos a gestionar en
el próximo video. En el siguiente video, trabajaremos con enlaces de navegación.
En el video anterior, hemos aprendido acerca de las aplicaciones de una sola página por
enrutamiento angular y hemos creado un enrutamiento angular básico. En este video, nos
centraremos en los enlaces de navegación. Entonces, primero, vamos a la terminal y creamos
dos componentes de página. Entonces, escriba ng genere componente y, primero, componente
de la página de inicio y sobre nosotros componente de la página. Esta bien Entonces, ahora,
vaya al módulo de aplicación punto TS y, como puede ver, hay un componente de la página de
inicio. Por lo tanto, puede cambiar la ruta a la página de inicio, por ejemplo, y proporcionar un
componente de la página de inicio y sobre nosotros para el componente de la página de
Nosotros. Además, podemos usar un componente de formulario de bloqueo para otra ruta con
un inicio de sesión de ruta y el registro de componentes de un componente. Lo segundo que
tenemos que hacer en este video es crear enlaces de navegación. Entonces, ve al componente
de la aplicación de la plantilla HTML y crea un ataque. Puede eliminar el formulario de carga y
crear una etiqueta pero, en lugar del atributo href, tenemos que crear un atributo de enlace de
enrutador. Escriba el enlace del enrutador y es igual a, por ejemplo, inicio y también cree
sobre nosotros e inicie sesión. Configura el enlace para iniciar sesión y sobre
nosotros. Entonces, ahora podemos, en la terminal, escribir ngspice. Si actualizamos nuestro
navegador, verá que, si hago clic, no sucedió nada porque no agregamos nuestra configuración
de rutas a nuestras importaciones de aplicaciones. Entonces, en este video, hemos creado dos
páginas de componentes y hemos agregado enlaces de navegación que tendremos en el
próximo video. escriba ngspice. Si actualizamos nuestro navegador, verá que, si hago clic, no
sucedió nada porque no agregamos nuestra configuración de rutas a nuestras importaciones
de aplicaciones. Entonces, en este video, hemos creado dos páginas de componentes y hemos
agregado enlaces de navegación que tendremos en el próximo video. escriba ngspice. Si
actualizamos nuestro navegador, verá que, si hago clic, no sucedió nada porque no agregamos
nuestra configuración de rutas a nuestras importaciones de aplicaciones. Entonces, en este
video, hemos creado dos páginas de componentes y hemos agregado enlaces de navegación
que tendremos en el próximo video.

Recientemente, hemos creado rutas, configuración y enlaces de navegación. En este video, nos
centraremos en agregar rutas y agregar marcadores de posición. Entonces, lo primero que
vamos a hacer es importar el módulo del enrutador. Como puedes ver, lo hicimos en el primer
video. Por lo tanto, tenemos que agregar un módulo de enrutador a las
importaciones. Entonces, hagamos eso. Ahí tenemos nuestro método de importación y
enrutamiento, módulo de reenvío de llamadas y paso a la configuración de rutas. Por lo tanto,
tenemos una variable de rutas up. Por lo tanto, podemos Pasteur. Guay. Entonces, si vamos al
navegador, ahora tenemos la posibilidad de hacer clic en él pero no ha pasado nada y ¿por
qué? Tenemos que agregar una salida de enrutador. Un enrutador nuestra salida actúa como
un marcador de posición que Angular siente dinámicamente en función del estado actual del
enrutador, lo que significa que contendrá un componente de estado actual del enrutador y eso
es todo. Así, debajo de las rutas, tipo enrutador de salida. Dígalo, vaya al navegador y, si hago
clic en nosotros, verá que un elemento cambia de nuevo para iniciar sesión. Por lo tanto, se
puede observar que cambia automáticamente el componente. Guay. Entonces, en esta sección,
hemos aprendido sobre aplicaciones de una sola página, pero te he introducido en un
enrutamiento angular. Luego, creamos rutas, agregamos enlaces de navegación y, al final,
aprendimos cómo manejar las rutas. En la siguiente sección, probaremos y depuraremos una
envoltura. hemos creado rutas y agregado enlaces de navegación y, al final, hemos aprendido
cómo manejar las rutas. En la siguiente sección, probaremos y depuraremos una
envoltura. hemos creado rutas y agregado enlaces de navegación y, al final, hemos aprendido
cómo manejar las rutas. En la siguiente sección, probaremos y depuraremos una envoltura.

Bienvenido a aprender TypeScript para la sección 7 de desarrollo angular, pruebas y

depuración. Anteriormente, hemos descubierto el enrutamiento en Angular. Hemos creado la
configuración de enrutamiento, agregado enlaces de navegación y hemos aprendido cómo
manejar las otras rutas. En esta sección, al principio, te presentaré en las pruebas. Luego,
volveremos a utilizar el código del núcleo utilizando herramientas de desarrollo y, al final,
realizaremos algunas pruebas con CLI angular. Entonces, en este video, nos centraremos en la
prueba, las pruebas unitarias, la prueba de extremo a extremo. Pruebas Durante el desarrollo
de la aplicación, existe una práctica común para realizar pruebas de todos los tiempos y allí
tenemos una prueba de unidad. Una prueba unitaria debe probar el comportamiento de una
unidad de trabajo. Para una entrada dada, se espera un resultado final que puede ser
cualquiera de los anteriores. Las pruebas unitarias son aisladas e independientes unas de
otras. Cualquier comportamiento dado debe especificarse en una, y solo una, prueba. El orden
de ejecución de ejecución uno de prueba no puede afectar a los demás. El código está decidido
a respaldar esta prueba de independencia y unidad o pruebas de mundo ligero: repetible,
rápido, consistente, fácil de escribir y leer y, con Angular, podemos usar el karma y el
jazmín. Pruebas de extremo a extremo. A medida que las aplicaciones crecen en tamaño y
complejidad, se vuelve poco realista confiar en las pruebas manuales para verificar los
contrastes de las nuevas funciones, recortes y regresiones de notificación. Los medidores son
la primera línea de defensa para detectar errores, pero a veces surgen problemas con la
integración entre componentes que no se pueden capturar en una prueba de unidad. Se hacen
pruebas de extremo a extremo para encontrar estos problemas. Entonces, básicamente, la
prueba de extremo a extremo ejecuta la aplicación real en el navegador y simula el
comportamiento del usuario, por ejemplo, haciendo clic en navegar por las páginas y así
sucesivamente y, con Angular, podemos usar el transportador y Jasmine. En el siguiente video,
depuraremos nuestro código con las herramientas chrome dev.

Recientemente, te he introducido en las pruebas. En este video, nos centraremos en la

depuración utilizando herramientas de desarrollo. A veces, desea verificar, por ejemplo,
cuando hace clic en un botón, queremos ver todos los objetos de datos sin escribir todo el
tiempo un registro constante o cuando, por ejemplo, escribimos algo en una contraseña,
también queremos Mira los datos que almacena y así sucesivamente. Entonces, en ese caso,
podemos usar una herramienta dev. En mi caso estoy usando una herramienta chrome
dev. Entonces, vamos a nuestro código, por ejemplo, al componente de formulario de bloqueo
y al propietario que lo posee. Ahí tenemos una línea de código a la que estamos suscribiendo
una contraseña y estamos desconectando el valor. Entonces, vamos a agregar un
depurador. Salva eso. Recuerda escribir y reservar para construir y ejecutar nuestra
aplicación. Vaya al navegador y, ahora, si escribo algo, Verá que está publicado aquí para que
podamos verificar qué valor tiene. Entonces, está bien, ahí tenemos un valor. Almacena P, así
que puedo ejecutar y escribir otro carácter y, como puede ver, hay un valor o. Entonces,
puedes ver cuál es el valor y qué almacena y así sucesivamente. También podemos ver
nuestro archivo componente. Hay un archivo componente real. Eso porque nuestra aplicación
contiene un mapa de origen. Un mapa de origen proporciona una manera de asignar el código
dentro de un archivo comprimido a su posición original en un archivo de origen. Las
herramientas para desarrolladores de Chrome y Firefox se entregan con un soporte de
construcción para los mapas de origen. Además, asegúrese de que está ejecutando una
aplicación en un modo de desarrollo. Si desea agregar puntos de interrupción dentro de la
herramienta dev, puede ir al creador de fuentes y hacer clic en la línea, por ejemplo, aquí
mismo. Por lo tanto, si hago clic en un envío, Queremos en un punto de ruptura cuando
estamos en el punto de la consola para cerrar el valor. Entonces, vamos a ver que. Presione un
botón de envío y, como puede ver, hacemos una pausa en la línea 21. Por lo tanto, podemos
eliminar un depurador de nuestro código, así. Si está utilizando Mac OS, en el lado izquierdo
verá los directorios y archivos. Por ejemplo, si hago clic en ng, encontraré un módulo con
todos los módulos. Si hago clic en el paquete web, este, encontraré un servidor de desarrollo y
allí tendré mis archivos locales, la aplicación SRC y todos mis componentes. Por ejemplo,
muchos componentes que puedo verificar si hago clic aquí y también hay un acceso directo
para esto y, si está utilizando Mac OS, puede hacer clic en el comando + o y escribir, por
ejemplo, iniciar sesión para el componente de HTML. Por supuesto, hay muchas
características de herramientas de desarrollo muy útiles que puedes usar, así que realmente
te recomiendo que te sumerjas en las herramientas de desarrollo. En el último video de este
curso, realizaremos algunas pruebas utilizando Angular CLI. Así que estad atentos.

En el video anterior, hemos aprendido cómo podemos depurar fácilmente nuestro código
usando herramientas dev. En el último video de este curso, nos centraremos en las pruebas de
unidad con Angular CLI. El CLI angular proporciona las primeras pruebas básicas de
configuración y listas para usar. Si va al tipo de terminal, ng test, que ejecutará las
pruebas. Entonces, como puede ver, se ejecuta en la casa de Walker en el puerto 9000 877.
Entonces, como puede ver, todas las pruebas pasaron. Es porque ya he hecho muchos
cambios, muchas correcciones. Por ejemplo, si va al componente de la aplicación que Specter
TS, verá que importé componentes, módulos y servicios. También hice un Prout para el
enrutamiento e inyecté todas esas cosas a la configuración del banco de pruebas. Por lo tanto,
debemos asegurarnos de que está importando todos los módulos de servicios de
componentes, etc., y así sucesivamente. Lo mismo para todos los servicios y directivas de
componentes. Por ejemplo, si va al paquete de la lista de jugadores, verá en la parte superior
que estamos importando el servicio de autorización del servicio de la fecha de fútbol y lo
estamos poniendo en el módulo de configuración aquí. OK, entonces, vamos a agregar otra
prueba. Tal vez podría estar en ese archivo en la lista de jugadores. Por ejemplo, queremos
probar si este componente lo contiene si el jugador es igual a dos. Por lo tanto, esperamos que
la longitud del punto de la lista de reproductores de puntos componentes sea igual a
dos. Guarde eso, vaya al navegador y, sí, como puede verlo pasado. Entonces, eso está en
otro. Por ejemplo, este componente debe contener un para gráfico con texto, por ejemplo,
prueba. Entonces, en primer lugar, eso está en el párrafo con prueba o no. Primero, vamos a
crear una prueba. Entonces, esperamos, queremos crear ese componente componente y,
luego, los cambios de detección de puntos de tipo fixture y el tipo Const compila y es igual al
elemento nativo dot debug del elemento fixture dot. A partir de ese compilado, quiero
recuperar un elemento. Por lo tanto, el tipo de consulta, selector, párrafo, texto interno del
punto es igual a la prueba. Salva eso. Como puedes ver falla. No hay ningún elemento de
etiqueta P. Entonces, vamos a crear ese. Tenemos una prueba de texto. Guarda eso, ve al
navegador y, como puedes ver, funciona. Guay. Entonces, en esta sección, hemos aprendido
acerca de las pruebas de unidad y para finalizar la prueba. También tenemos la parte
posterior de nuestro código de la herramienta de desarrollo de cromo y hemos escrito algunas
pruebas en Angular. [Silencio] No hay ningún elemento de etiqueta P. Entonces, vamos a crear
ese. Tenemos una prueba de texto. Guarda eso, ve al navegador y, como puedes ver,
funciona. Guay. Entonces, en esta sección, hemos aprendido acerca de las pruebas de unidad y
para finalizar la prueba. También tenemos la parte posterior de nuestro código de la
herramienta de desarrollo de cromo y hemos escrito algunas pruebas en
Angular. [Silencio] No hay ningún elemento de etiqueta P. Entonces, vamos a crear
ese. Tenemos una prueba de texto. Guarda eso, ve al navegador y, como puedes ver,
funciona. Guay. Entonces, en esta sección, hemos aprendido acerca de las pruebas de unidad y
para finalizar la prueba. También tenemos la parte posterior de nuestro código de la
herramienta de desarrollo de cromo y hemos escrito algunas pruebas en Angular. [Silencio]

>>>>>>>>>>>>>

Configuración IDE y
entorno de desarrollo.
Bienvenido en el tercer video de nuestra primera sección de TypeScript. En este video,
estaremos configurados en IDE y en el entorno de desarrollo para crear una tarea bastante
simple utilizando nuestra pila TypeScript. Así que veremos cómo compilar el programa
TypeScript en nuestro IDE, y también cómo usar el archivo JavaScript resultante en la página
HTML. Así que cada aplicación web es un archivo JavaScript que se inyecta en una página
HTML. En este video, intentaremos escribir un programa TypeScript simple, compilarlo en un
archivo JavaScript, crear una página HTML que tenga referencia a ese archivo JavaScript que
cambiará algo en la página HTML. Así que vamos a empezar a programar. Este es nuestro
archivo de TypeScript. Esta es una tarea simple. Necesitamos obtener un documento que sea
una variable global en JavaScript y obtener el elemento por ID. ID será uno. Esto sería un
elemento div, debería ser, que estará en el sitio HTML. A continuación, en el campo de texto
interno div, podemos asignar y el texto que queremos a ese campo. Así que estamos asignando
que este es un nuevo texto de TypeScript. Y podemos ver propiedad muy interesante de
IDE. En las pruebas que hacemos compilamos nuestro código de la siguiente
manera. Escribimos el compilador de TypeScript, luego escribimos un archivo de TypeScript y
lo compilamos. Así que fue bueno, pero tenemos un IDE e integración de TypeScript. Entonces,
cuando cambiemos algo aquí, como por ejemplo un elemento, nuestra ID volverá a compilar
ese archivo. Podemos ver que el JavaScript resultante es exactamente el mismo. Así que esta
es una propiedad muy interesante, y acelera mucho el desarrollo. Pero eliminemos ese
elemento en este momento, y sigamos con esto. Así que echemos un vistazo al índice de
puntos HTML. Así que estamos creando una página HTML simple que tiene un lenguaje HTML
de tipo de documento estándar. Estamos configurando un conjunto de caracteres a utf-8 y
título a título. A continuación, agregaremos un nuevo ID de div con ID 1. Y este es el ID de div
al que hacemos referencia en el archivo JavaScript. La siguiente es la línea muy
importante. Estamos haciendo referencia aquí al archivo de JavaScript de add div dot. Y es
importante tener en cuenta que estamos haciendo referencia al archivo JavaScript, no al
archivo TypeScript, porque nuestro navegador necesita tener un archivo JavaScript en las
fuentes. No es capaz de operar cuando vamos a pasar TypeScript. Es por eso que necesitamos
el compilador de TypeScript que compilará nuestra página al JavaScript. Y ese JavaScript es
realmente usado. Entonces, TypeScript es solo una abstracción para escribir código mejor,
más potente y robusto en JavaScript. Al final usaremos JavaScript no TypeScript. Así que
vamos a abrir nuestro archivo HTML de punto índice. Lo estamos abriendo en el Chrome, y
podemos ver que en el contenido de esta página hay un nuevo texto de TypeScript. Por lo
tanto, nuestro retiro estricto se compiló correctamente a JavaScript y se hizo referencia en el
HTML. A continuación, el navegador HTML renderizó nuestra página usando JavaScript. En el
siguiente video, ese sería el último en esta sección, daremos sentido a los errores de
TypeScript. Así que nos estaremos desarrollando más profundamente en ellos.

Hola y bienvenido a la sección tres, sumérjase en Angular 7. Creación de un proyecto y

jerarquía de productos. En este video, usaremos Angular CLI para crear proyectos en
Angular. Puede llevar tiempo crear un proyecto usando CLI debido a la gran cantidad de
archivos, necesitamos entender la jerarquía antes de seguir adelante. Este punto es realmente
importante porque es real, principalmente nos quedamos atascados porque puede haber
muchos puntos que debemos entender antes de entrar al proyecto Angular. Vería muchos
archivos, por lo que necesita comprender cómo funcionan. Para crear un proyecto en Angular,
necesitamos ir a la terminal, así que aquí voy a la primera terminal. Allí puedo ver la terminal
y ahora voy a hacer el proyecto. Usamos el comando prefijo ng, ng es el comando para
Angular, por lo que al instalar Angular CLI ahora el ng realmente funcionará. Un espacio
nuevo, ahora nuevo significa que voy a crear algo nuevo, absolutamente cualquier proyecto
por ahora y luego solo necesito escribir el nombre del proyecto. El nombre del proyecto puede
ser la aplicación Angular en el salto de línea. Bien, ahora está funcionando, puede tomar un
poco de tiempo, así que tenga paciencia y espere un momento. Va a descargar la versión
completa de Angular e implementar ese proyecto de Angular en la carpeta de la aplicación
Angular. Veremos la carpeta aquí. Absolutamente tomará tiempo. Sí, ahora la primera
pregunta es, ¿te gustaría agregar el enrutamiento angular? No olvides lo que está preguntando
porque va a ser muy importante en capítulos posteriores. Encaminamiento angular, solo digo
que sí, es para hacer el proyecto, por qué creo que sí, ahora sí. El enrutamiento angular es para
realizar un proyecto de varias páginas o una aplicación de varias páginas donde desea
navegar de una página a otra. Ahora está preguntando acerca de esta hoja de estilo, ¿quieres
usar menos, estos estilos, el descargo, el SCSS o el CSS? Ya voy a usar el CSS, puedes usar el
tuyo si tienes algunos, salto de línea. Y ahora está creando el proyecto, puede ver que la
carpeta se creó la aplicación Angular, pero sigue creando los otros archivos, por lo que
debemos esperar un poco más para hacerlo. Ahora, una vez que puedes ver que está hecho y
tienes la opción de crear otro comando, eso significa que está absolutamente listo. Puede ver
que se agregaron 1 1 4 3 paquetes de uno a ocho contribuyentes y se auditaron cuatro cero
uno y cinco, es Puede ser un valor diferente que sepa que podemos instalar y descargar en
diferentes momentos. Entonces, de todos modos, está la aplicación Angular que he instalado,
tiene algunas carpetas, necesitamos entender esas carpetas. En primer lugar, este es el
archivo JSON del paquete de puntos. El archivo JSON del punto del paquete aclara el Angular
completo, la información de la aplicación base, ya que necesitamos el nombre de la aplicación,
la versión de la aplicación. Ejecutaríamos la aplicación utilizando el servidor ng y
compilaríamos la aplicación. Hay una pequeña diferencia entre ejecutar y construir, construir
significa que en realidad está construyendo el proyecto porque puede decir que el modo de
desarrollo y el modo de producción. Así que hacer un proyecto en el modo de producción
llamado construir el proyecto. Para iniciar o ejecutar el proyecto de desarrollo, usamos ng
service porque esto es lo que mencionamos aquí, y si quieres una prueba podemos usar la
prueba ng y ng Lint y ng e2e. Hay algunos elementos más como las cosas que necesitamos
para este proyecto, las dependencias, la animación, el compilador, el núcleo, los formularios, el
navegador de la plataforma y cosas por el estilo. Puedes ver las cosas diferentes, RxJS y las
dependencias de desarrollo, y puedes ver que el karma, el TypeScript que estamos usando el
3.2.2 por ahora. Bien, ahora los paquetes que necesitamos para el proyecto y este es el archivo
de configuración, significa que la configuración que tendríamos como objetivo, puede ver el
formato de ES6 JavaScript y la biblioteca que puede ver. Aquí está la biblioteca que estamos
usando como 2-0 1880, veré, iré a este AngularJS y aquí, si observa que la configuración básica
del proyecto, como la fuente del proyecto, está en el SRC, el tipo es la aplicación, el prefijo
nosotros re usar es app, por lo que este es un prefijo por ahora. La versión es una información
adicional como la que puede ver, los scripts y los activos, los scripts, esta es la configuración
angular del proyecto. Bien, ahora no vamos a hacer nada con esta carpeta e2e, ni siquiera es
necesario. Luego vamos a los módulos de nodo, esta es la carpeta que ni siquiera tocamos
porque esta es el área donde todo el NPM se ha estancado y descargado. Así que puedes ver
que dentro de Angular, Babel, NG Tools, los tipos y muchas carpetas encontrarás. Esto no es
necesario ni importante para nosotros, así que solo hágalo colapsar así, no es necesario solo la
carpeta NPM. Así que hacemos todo en esta carpeta, el SRC. Ahora en esta carpeta, hay una
carpeta llamada app, el favicon.ico, que conoce el favicon para el sitio web, el índice de puntos
HTML, el estilo de puntos CSS y la prueba o TS el punto principal TS. Ahora les voy a decir
algunas cosas, la especificación. Jason no es importante, los archivos de especificaciones son
solo para fines de prueba, por lo que no vamos a hacer nada con ellos. La configuración básica
del proyecto se realizará aquí, tampoco es importante de todos modos. Voy aquí, el punto
principal es que este es un archivo importante, sabes que cada proyecto tiene un archivo JS de
script cuando estamos trabajando en el JavaScript. Así que este es el archivo principal de TS, al
igual que el archivo de script del proyecto, puede ver que ya se han hecho algunas cosas
básicas en este proyecto. Entonces, el archivo styles.css, es el archivo global donde se puede
importar y agregar diferentes estilos a nivel global. El archivo HTML de punto índice significa
la vista principal del sitio web o la aplicación, Puedes ver que es bastante simple, debes estar
familiarizado con esta salida. Pero hay una cosa que sabes, que no tiene nada que ver con el
cuerpo y el cuerpo y que tiene la raíz de la aplicación, cuál es la raíz de la aplicación que aún
no sabemos sobre el enfoque, así que vamos a hablar de eso. Cuando ejecuta el proyecto,
ahora en HTML adicional tiene una cosa bien, pero esta raíz de la aplicación realmente tiene
todo del proyecto, significa que es la vista principal y estamos importando la raíz de la
aplicación o el contenido del proyecto en el índice de puntos HTML utilizando la raíz de la
aplicación. Así que esta es la raíz de la aplicación y esta es la carpeta de la aplicación, dentro
de la carpeta de la aplicación se encuentra todo de la carpeta de la aplicación y se muestra en
el navegador junto a la raíz de la aplicación. Entonces, este es el componente, ahora cuál es el
componente. Todo en Angular es un componente, cada encabezado de contenido navega por
las páginas en la barra lateral de la carpeta, Todo es el componente en Angular. Así que esta es
la aplicación y si solo la miras, tiene el archivo HTML, el archivo CSS y el archivo del
componente TS, y un archivo de módulo y el archivo de raíz de la aplicación. Voy al
componente HTML de la aplicación dot dot, por lo que este archivo puede ver que
necesitamos recordar los nombres, el componente app point dot HTML el nombre del
componente es importante, necesitamos agregar eso pero en la extensión xik HTML. Así que
aquí, puedes ver que en realidad hay algo de contenido, este es el archivo CSS que este
contenido no tiene CSS por ahora. Entonces, si quieres escribir algo para esto, el componente
principal de la aplicación que escribimos aquí y para este estilo, vamos allí y hacemos Estilos
en la aplicación que vienen detrás de nuestro CSS. Y para hacerlos realmente conectados, aquí
en HTML nazi de af-dot company no agregamos ningún tipo de enlace con este archivo
CSS, Entonces, cómo este archivo CSS lo va a conectar con este, y también puedes ver que no
hay una etiqueta de cuerpo, no hay una etiqueta de cabecera ni nada de eso. Todo está en el
correo electrónico del texto adicional, se puede ver que la etiqueta del cuerpo, la etiqueta de la
cabeza de diferentes elementos y dentro del cuerpo la raíz de la aplicación. Entonces, en
última instancia, todo el contenido de este archivo se está cargando aquí usando la raíz de la
aplicación. Bien, aquí está de nuevo, el componente, ¿cuál es el componente que T archiva? DT
s es igual en el archivo JS de todos modos. Entonces, este archivo realmente se está
conectando, en primer lugar está declarando un selector, este no es necesariamente el
permiso para escribir nada. Si cambia el nombre de este selector, finalmente tendrá que
cambiar el nuevo valor allí también. Entonces, si desea seleccionar este componente de la
aplicación o pegar en cualquier parte del componente de la aplicación, por lo tanto, debe usar
este selector y esta URL de la plantilla de componentes significa que la ización de HTML de
este componente está en la aplicación punto punto componente HTML. El CSS de este
componente es el componente de applets o CSS significa estos dos archivos, hemos conectado
ambos y hemos hecho el selector. Así que aquí hay un decimal adicional al que llamamos
selector y al final tenemos las tres cosas. Ahora aquí, usted conoce la clase en el componente
de la aplicación, el título de la aplicación Angular, la clase es en realidad, usted sabe que el
elemento ya entiende el capítulo de TypeScript. Así que estamos exportando, sabes que
estamos usando el elemento exportar e importar, así que si recuerdas que hablamos sobre los
módulos, exportamos el elemento de clase y exportamos el título con la aplicación
Angular. También podemos usar la cadena donde usted conoce los tipos que les gustan,
podemos mencionar que debe ser la cadena, De todos modos, así porque esta es una forma de
TypeScript. En última instancia, de todos modos, los módulos son una lógica de negocios de la
aplicación, esto conecta todo entre sí, se puede ver eso. En primer lugar, estamos importando
algunas funciones para el módulo y, en realidad, usted sabe que estoy viendo una vista que
dice que lo que se debe importar, el módulo de rooting de la aplicación, el módulo del
navegador, el componente de la aplicación Bootstrap, cada vez que agregamos una nueva
compañía. ese componente se agregará a ellos de cualquier manera que notemos y cuando
hagamos un componente. Luego está exportando el componente del módulo de la aplicación,
lo que significa que en realidad estamos exportando este archivo, por lo que en realidad esto
conecta todo. Así es como funciona la jerarquía de los angulares. Ahora, la aplicación de
enrutamiento de punto punto dor archivo TS, ¿qué es este archivo. Sabes que hablamos, te dije
que no No olvide seleccionar el área de navegación allí enrutando el capítulo. Así que aquí, en
realidad hacemos las rutas, aprenderemos sobre este archivo más adelante, pero solo le
informaremos. De todos modos, esta es la jerarquía angular y así es como funciona
Angular. En el siguiente video, hablaremos sobre la creación de componentes personalizados.

Creando componente personalizado. Así que aquí, ahora estamos creando un nuevo
componente. En primer lugar, debe ir a esta carpeta específica en el terminal porque estamos
en la aplicación Angular CD Angular de TypeScript. Ok, dentro de eso, en realidad crearé el
componente, así que primero debo escribir el ng porque este es el comando Angular, luego
estoy escribiendo para generar porque aquí estamos generando el espacio del componente
del espacio del componente del componente. Ya estoy creando un encabezado, es solo un
ejemplo, no es necesariamente el encabezado. Está bien, está creando, lo que hará editará
algunos archivos, editará el módulo punto TS, agregará un nuevo componente aquí. Así que
este módulo DS no estará en el nuevo componente porque es un módulo principal, cada
componente se enumerará como componente de esta aplicación principal y se conectará
automáticamente a este archivo dot ts de módulo único. Un nuevo componente consistirá en
el archivo TS, HTML y el archivo CSS. Está bien, tengo el archivo de encabezado, puedes ver
que entra y puedes ver que tiene el archivo de especificaciones que no es importante, sabes. Si
observa este archivo de especificaciones que en realidad no es importante, el archivo CSS, el
archivo HTML y el archivo ts, este archivo de módulo se aplicará automáticamente para eso
también y el archivo de carga. Entonces, qué hago ahora, necesito ver esta aplicación, el
módulo del applet puede ver que el componente del encabezado se agrega automáticamente
aquí. Bueno, en los módulos ng está declarado ahora, el componente del encabezado, nada
más que eso, solo el componente del encabezado con el componente de la aplicación
aquí. Entonces, ¿cuál es el significado de este texto si solo voy al punto ts ts del componente
del encabezado, puede ver que el nombre de esta clase es encabezado y se convirtió en el
componente del encabezado? Y puedes ver eso exportado, así que ahora dónde está el
módulo, aquí está. Ok, almacenó el archivo en caché y aquí puede ver que ahora está en el
sistema. De todos modos, este archivo de componente de encabezado no es visible en ninguna
parte, por lo que necesitamos ver si lo creamos perfectamente. Así que aquí puede ver que, al
igual que el encabezado de la aplicación, es un selector, por lo que, donde quiera que coloque
este componente, debe seleccionar el encabezado de la aplicación. La URL de la plantilla y la
URL del estilo, ya las conocemos y el HTML de este archivo funciona el encabezado y el CSS,
que debería estar vacío como está. Así es como funciona. En el siguiente video, hablaremos
sobre las plantillas y el estilo de los componentes.

<<<<<<<<

Componente de plantillas y estilismo. Podemos editar el archivo HTML del componente para
diseñar su plantilla de componente, podemos editar el componente CSS, SASS o un CSS o
cualquier valor de estilo que se use para diseñar el componente. Ambos archivos deben estar
vinculados al componente TS de punto para que realmente puedan funcionar. Si no está
utilizando o aplicando ningún estilo, esto no es necesario para agregar el archivo CSS con el
componente TS, pero si solo desea agregarlos, puede crear un archivo vacío o también puede
conectar un archivo vacío. Para las plantillas de componentes, debemos ir al archivo HTML del
componente aquí. Primero, vamos a volver a verificar lo que hemos hecho, ya voy allí, y el
terminal y aquí se está cargando. Bien, primero que todo necesito ir dentro del Angular, ah
bien, estoy dentro de eso. Ahora ng servicio, ahora tenemos que ir al navegador, por lo que
aquí el servidor se está ejecutando, necesitamos verificar dos veces en un navegador. Aquí
está, puedes ver que son bienvenidos a la aplicación Angular y aquí hay algunas cosas en él
edc, que significa que el servidor ahora está ejecutándose. Ahora, si elimino el texto o algo así,
estoy cambiando esta bienvenida a, en realidad estoy eliminando todo por ahora solo
haciendo una plantilla simple y lo pondré al estilo. No estoy eliminando esta salida del
enrutador porque es importante, así que lo dejaremos y eliminaré todo el resto del contenido,
está bien, lo he eliminado. Bien, ahora estoy haciendo un nuevo div bien y dentro de ese div,
estoy agregando una clase porque solo quiero comprobar el estilo. También quiero un
estilo. Entonces, cualquier clase estamos agregando una nueva clase y aquí estoy escribiendo
las plantillas y el estilo del componente, guárdalo. Ahora yo' Voy al componente de la
aplicación y al archivo css, se está abriendo bien, lo tengo. Aquí, estoy haciendo algo
relacionado con esa nueva clase de puntos y dentro de esa nueva clase puedo agregar muchas
cosas como el color de fondo, el azul, el siguiente tamaño de fuente, la altura de 20 PX, nos doy
200 píxeles y lo guardo. Ahora voy a la aplicación punto punto componente html. Bien, ahora
necesito ver el archivo ts del componente, en realidad está conectado, puedes ver que la raíz
de la aplicación y la raíz de Apple ya están conectadas y aquí está la URL de la plantilla. Está
bien, está funcionando bien, la URL de la plantilla y la aplicación dot dot componente CSS,
todos los archivos de plantillas están conectados. Así que voy al navegador para ver si está
funcionando bien. En el navegador, solo podemos ver las plantillas de componentes y el estilo,
pero no podemos ver, este es un texto, es todo la plantilla. Podemos' No veo el color azul y
otras cosas, así que creo que tenemos que verificarlo. Y ahí está, este es el componente o capa
de archivo HTML que escribimos CL y L es pequeño y aquí L es mayúscula, bueno, ahora es
perfecto. Creo que deberíamos cambiar el color a blanco, está bien guardarlo y ahora puedo
verificarlo en un navegador. Y allí se puede ver que el componente está modelando cualquier
estilo que esté allí y se vea bien ahora. Si quieres ver el encabezado, voy al encabezado uno y
estoy comprobando cuál era el nombre de este elector, es el encabezado de la aplicación. Así
que voy al archivo de componentes de la aplicación y en la parte superior estoy agregando
este encabezado F. Está bien, si la ortografía debe ser clara, compruebe que el encabezado de
la aplicación está bien, está bien. Ahora podemos ir al navegador y verificar, ahora aquí
puedes ver que el encabezado funciona, en realidad está funcionando, puedes ver eso. Eso
significa que este encabezado funciona desde el componente del encabezado y, de hecho,
asignamos ese componente del encabezado al componente principal de la aplicación aquí,
puede ver el encabezado de la aplicación. Este encabezado de aplicación en realidad provino
del selector y este selector tiene la URL de la plantilla como componente de punto de
encabezado y componente de punto de encabezado punto CSS. Estos archivos, no tiene CSS,
así que en última instancia no tenemos CSS. En el archivo HTML de puntos del índice principal
solo mencionamos el selector de la aplicación principal, si queremos también podemos
agregar estos encabezados anidados o componentes anidados aquí también. De todos modos,
así es como funcionan las plantillas y el estilo. En el siguiente video, hablaremos sobre la
comprensión de la jerarquía de nuevos componentes. Este encabezado de aplicación en
realidad provino del selector y este selector tiene la URL de la plantilla como componente de
punto de encabezado y componente de punto de encabezado punto CSS. Estos archivos, no
tiene CSS, así que en última instancia no tenemos CSS. En el archivo HTML de puntos del
índice principal solo mencionamos el selector de la aplicación principal, si queremos también
podemos agregar estos encabezados anidados o componentes anidados aquí también. De
todos modos, así es como funcionan las plantillas y el estilo. En el siguiente video, hablaremos
sobre la comprensión de la jerarquía de nuevos componentes. Este encabezado de aplicación
en realidad provino del selector y este selector tiene la URL de la plantilla como componente
de punto de encabezado y componente de punto de encabezado punto CSS. Estos archivos, no
tiene CSS, así que en última instancia no tenemos CSS. En el archivo HTML de puntos del
índice principal solo mencionamos el selector de la aplicación principal, si queremos también
podemos agregar estos encabezados anidados o componentes anidados aquí también. De
todos modos, así es como funcionan las plantillas y el estilo. En el siguiente video, hablaremos
sobre la comprensión de la jerarquía de nuevos componentes.
Entendiendo la jerarquía de nuevos componentes. En este video, solo quería mostrarle la
cantidad de cosas que son válidas en nuestro grupo, solo haciendo componentes simples
como hice el encabezado, agregué el elemento, agregué el componente de contacto, agregué el
componente de inicio. Así que ahora el encabezado tiene estos datos, HTML simple y CSS nada
muy grande, difícil, lo hice muy simple. Así que la navegación básica, simplemente puede
hacer eso utilizando el HTML y CSS y hay el CSS muy simple de la navegación. Bien, y si vamos
al contacto aquí, al componente de contacto, y al css del componente de contacto, puede ver
eso, el formulario, el área de texto, la entrada del formulario, el EDC, cosas muy básicas y
iniciales. De la misma manera, tenemos algo para la página acerca de, por lo que aquí se trata
de la página lorem ipsum, el texto de fama mundial que he agregado aquí y la clase para. Y
aquí están los CSs, Puedes ver que el párrafo que acabo de agregar este simple texto de
18px. De todos modos, disminuiremos o aumentaremos el tamaño o D, lo gestionaremos más
adelante cuando lo hagamos en vivo y editemos en vivo. Por ahora, solo quería mostrarte que
estas cosas se han agregado, así que debes hacer las tuyas. De todos modos, voy al navegador
para mostraros algo. Están los datos que hemos agregado, el hogar, el contacto o el tema y
este es el trabajo anterior que hemos hecho. Entonces, ¿podemos acceder al contacto o al
combate? No puedo acceder a ellos porque aquí, si vamos al encabezado, hay un encabezado y,
dentro del HTML del encabezado, unas referencias muy simples. Básicamente, he elegido
algunas actualizaciones de HTML ya hechas para este proyecto porque solo quería mostrarte
que también puedes aprender sobre Angular. De todas formas, cuando hay una referencia
hiper, quería mostrarte que la referencia no funciona, pero tenemos que usar algo diferente, el
enlace del enrutador. No hablamos sobre el enlace del enrutador, es por eso que mencioné la
hiper referencia para que sepa que incluso si tenemos la hiper referencia no funcionará. En el
siguiente video, hablaremos acerca de agregar Bootstrap al proyecto Angular.

<<<<<<<
Hola y bienvenidos a la sección cuatro, interactividad del usuario y elementos
dinámicos. Enrutamiento y navegación. Como sabemos que en realidad no podemos usar la
hiperreferencia, entonces, lo que vamos a hacer, vamos a eliminarla y en su lugar vamos a
escribir el enlace del enrutador. Y aquí, antes que nada, si este componente será el
componente de origen, me refiero al componente principal, así que solo pondré la barra No
pondré ningún valor como el valor de inicio o EDC. Y como sé que este no es el enlace de
contacto simple, pero en realidad no se conoce el enlace de contacto de referencia, este es el
enlace del enrutador y primero necesito poner la barra y luego debo poner el valor aquí. ¿Y
qué valor debo poner aquí, Simplemente necesito poner el valor o, en realidad, el nombre de
los componentes como este es el de una pequeña a y el contacto es pequeño C en un contacto
de CT, y voy a ir allí. Y tengo que hacer lo mismo y allí lo estoy cambiando, enlace del
enrutador, guardarlo. Bien, bien, he hecho los enlaces reales de acuerdo con el Angular, pero
hay algunas cosas que debo hacer. Si recuerdas que te lo hemos pedido, crea el módulo de
enrutamiento 2 y lo hicimos, así que ahí está el módulo de enrutamiento, así que en este
momento ya harás muchas cosas. Ahora, primero que todo, tenemos que importar los
archivos, así que voy a importar así, a casa, espera un momento, necesito mostrarte lo que
estoy poniendo allí. Aquí, estoy exportando esta cosa, el componente de casa está bien. Esta
clase se está exportando y usted sabe que esta clase tiene el selector de inicio de la aplicación
y el valor del material de la pestaña y esta es nuestra URL. Así que simplemente estamos
exportando este componente de inicio, aquí estamos llamando a ese componente de
inicio. Ahora espacio de esa manera y de vir Importe este componente de inicio, lo importo de
la que sabes así. La aplicación es la carpeta principal y dentro de Apple estoy escribiendo el
componente de punto de inicio. Está bien, hay un cambio menor que debo hacer porque ya
estoy en la aplicación, así que no necesito llamar a la aplicación que necesito para llamar al
hogar y ahorrar ahora. Ahora estoy haciendo lo correcto, pero aún así puedes ver que no está
en modo de color, así que si voy allí. No, no voy a eliminar eso, ¿por qué me pide que lo
elimine? s dice que el componente de inicio está declarado pero su valor nunca se lee, porque
indica que tenemos esta línea del código sin usar en esta página, así que ¿por qué no lo
eliminamos? Pero en realidad ya vas a trabajar en esta línea y cómo voy a trabajar en esto, en
la ruta de llaves y luego porque estamos llamando al componente de inicio, no voy a dar nada,
y un componente de componente de coma en casa y en realidad está bien ahora. Bien, ahora
puedes ver que ahora está coloreado. Ahora, le diré lo que hice, en primer lugar, importé el
componente principal del componente desde el archivo, la barra de inicio del componente
principal y usted sabe que no necesitamos mencionar el formato de punto ts. Entonces aquí
simplemente mencioné el camino y aquí mencioné solo una cita y una sola capa y sin espacio
ni nada de lo que puse, Simplemente agregué la coma y el componente y el componente de
inicio. Este llamé aquí, así que solo puedo agregar otros elementos, aquí la ruta y ahora
porque ahora no necesitamos la página de índice o la página directa. Ahora debemos
mencionar las otras páginas de esta manera, pero antes de nada debemos ir allí y debemos
importar los otros elementos de la misma manera. Y esos otros elementos, hemos hecho todo
lo que necesitamos para trabajar en el contacto sobre el tema. Entonces, en primer lugar,
estoy agregando el contacto uno, así que importe el contacto uno, pero necesita ver el nombre
del contenido. Sé el nombre pero solo te estoy mostrando. Estamos exportando el componente
de contacto de clase, así que simplemente necesita llamar a ese componente, volveré allí y no
olvide que estas cosas distinguen entre mayúsculas y minúsculas, por lo que también debe
hacer que las cosas sean sensibles a mayúsculas del componente de contacto de barra
diagonal de contacto de barra de puntos. Puedes ver que el IntelliSense me estaba ayudando,
esto es una gran cosa en el contexto de TypeScript. Bien, la ruta es solo contacto y por qué la
ruta es solo contacto porque si solo voy al encabezado aquí. Puedes ver que solo lo puse en
contacto, no mencioné ninguna otra cosa como contactarnos o algo así. Entonces el contacto,
ahora agrega la coma aquí espacio componente componente de contacto. Bien hecho ahora,
necesito agregar otro y para el otro, primero necesito volver a importar. Creo que es muy
simple para nosotros ahora, así que el tercero que estoy importando es el de uno, puedes ver
que me dice que significa que está mal y por qué está mal porque tenemos que poner el valor
allí y está vacío. por ahora. Así que la de uno, vamos a Solo verifico lo que ya sabemos, pero no
necesitamos este. Bueno, el componente acerca de, el que viene es capital, así que solo estoy
haciendo lo mismo aquí sobre el componente sobre la barra diagonal sobre el componente. Y
por qué lo menciono porque está en la carpeta acerca de la carpeta del componente
principal. Así que ahora tengo que ir allí y debo definir la ruta y aquí el componente de coma
sobre eso, guárdelo. Ahora ya está conectado, así que aquí está el resultado del
navegador. Puedes ver que ahora podemos obtener los deberes, si voy al contacto, puedo ver
el formulario de contacto aquí, si voy a la página, puedo ver esa página del combate, sin
embargo las cosas no están muy diseñadas, pero trabajaremos en ellos pero a estas alturas ya
puedes ver eso. En realidad está funcionando, la ruta está funcionando, así que ahora puedes
crear un sitio web completo usando Angular porque ahora conoces el enrutador. Entonces, en
el siguiente video, hablaremos sobre cómo trabajar con las entradas de los usuarios.

Trabajar con entradas de usuario. Entonces, ¿qué aportan los usuarios y por qué los
necesitamos y cómo podemos obtenerlos? Las entradas del usuario son la interacción del
usuario con el sitio web o la aplicación web, por lo que, por ejemplo, hay una interacción del
usuario muy básica como cuando el usuario hace clic en el botón de inicio. Obtiene la página
de inicio o cuando el usuario hace clic en el botón de contacto, recibe la página de contacto o el
usuario hace clic en el botón Acerca de, recibe la página Acerca de. Así que esta es una
interacción de usuario muy básica, pero Angular nos da un poco más de interactividad de
usuario y tiene sus propios eventos para mantener la interactividad del usuario. Comenzaré
agregando un nuevo li aquí y dentro de ese li, agregaré el a nuevamente o en lugar del a,
simplemente agregaré el botón. Hagamos que sea solo un botón, está bien y dentro del botón
que estoy escribiendo, haz clic en mí. Esto es solo para guiarlo, por eso usamos la
interactividad del usuario y cómo funciona. Así que acabo de hacer el botón, haga clic en mí.
Necesito comprobar si está visible en el sitio web, veamos eso aquí. Es visible en esta forma,
así que puedo cambiar la forma por cierto, necesito ir al componente de CSS y hay un
componente de CSS de puntos y simplemente voy a hacer algunas cosas básicas. Copiando
todo esto o por qué no agrega el botón y la coma y el botón de navegación de puntos, veamos
si el navegador se está cargando y está bien, el botón ahora tiene una nueva forma. De todos
modos, sigue siendo un botón, pero está bien porque es visible para nosotros y parece que es
un botón. De todos modos, cuando simplemente hago clic en el botón, no funciona, así que
cómo funcionará y por qué hice esto. Voy a volver atrás y voy al componente del
encabezado, Necesito abrir el componente del encabezado o el archivo TS también. En primer
lugar, voy allí y simplemente voy allí en un espacio de nombres y añado el primer
evento. Estoy usando el evento click por ahora igual, tal vez sea la primera vez que utilizamos
los paréntesis para el atributo, pero así es como funciona. De todos modos, está bien, haz clic
en mí y este es un método para formatearme, haz clic en mí y entre paréntesis. Ahora,
guárdelo, necesito ir al archivo ts del encabezado porque necesito programar esta opción de
clic en mí.

Justo aquí, después de iniciar la sesión, en realidad no estás usando esta función, pero
necesitamos hacer que alguien después de eso, haga clic en mí entre paréntesis, estoy
entrando. Ahora, simplemente podemos agregar el registro de puntos de la consola y aquí
estoy agregando una cosa muy simple, tengo clic, guárdalo. Ahora tengo que ir al navegador
de vuelta aquí, y necesito actualizar esto, haga clic allí. De acuerdo, necesito ir a la opción F12
inspeccionar elemento, de acuerdo. Ahora entiendo que se puede hacer clic. Estoy
actualizando la página, esta página de nuevo porque necesito eliminar esa cosa. Está bien, no
tengo nada en este momento. De acuerdo, Angular se está ejecutando en cualquier modo de
desarrollo, llamada habilitar modo prod para habilitar el modo de producción, no estoy
haciendo eso, estoy haciendo clic en el clic de nuevo. Ok, obtuve un clic nuevamente, también
recibí un clic, eso significa que esta es la interactividad del usuario que obtuvimos aquí. En
esta función, podemos hacer muchas cosas, solo usamos la opción de hacer clic, pero esto no
es suficiente, puede tener muchas cosas. Permítame guiarlo con ejemplos prácticos, voy al
componente de punto del encabezado o TS y, en lugar de escribir, haga clic en Primero hago
una variable vacía aquí, el espacio o la pestaña y yo ' m haciendo una variable pública, no el
método realmente público y la variable que estoy haciendo. Ya sabes, este es el TypeScript, el
público es el elemento TypeScript. Sin embargo, sabes que podemos escribir el Angular en
TypeScript de todos modos y aquí estoy escribiendo btn datos es igual a 2 y el valor que estoy
agregando aquí está vacío ahora. De acuerdo, voy y le digo que esto tiene datos btn,
bienvenidos a la aplicación Angular. De acuerdo, hay un dato de un signo guardado. Ahora, lo
que está sucediendo aquí, simplemente le digo que cada vez que cargamos esta clase en la
clase del componente del punto del encabezado, en realidad crea una nueva variable que está
vacía. Pero cuando hicieron clic en la función de mí o en el método llamado, en realidad
llenaron estos datos btn con algunos datos, bienvenidos a la aplicación Angular. Así que aquí,
incluso puedo llamar a esto incluso utilizando la interpolación, Esto es algo nuevo para ti, pero
voy a hacer eso. Al usar esto, la interpolación podemos llamar fácilmente cualquier dato o
cualquier variable desde el archivo de script al archivo de plantilla. Así que llamemos algo,
haciendo una nueva línea aquí y la li otra vez. Bien, dentro de este li lo que estoy haciendo
simplemente estoy agregando la interpolación y aquí estoy escribiendo los datos de este
botón, así que btn data guárdelo. Aquí, necesito actualizar la página o simplemente hacer clic
en el botón "haga clic" y ya hice clic, pero necesitaba algo más que no se ve en ningún
lugar. Por lo tanto, solo tenemos que hacer clic allí para hacer clic en mí y verás la bienvenida
a la aplicación Angular. Ok, así es como funciona, enlace de eventos, pero no está relacionado
solo con el enlace de eventos, simplemente puede compartir el enlace de datos. Así que si está
vacío, ya sabes, pero si agrego algo a los datos predeterminados, guardalo Ahora puedo ver los
datos predeterminados, de forma predeterminada, está aquí, pero cuando hago clic en el
botón "haga clic en mí", todavía funciona, porque en el evento "Haga clic en mí", los datos de
este botón obtienen un nuevo valor, así que funciona. Así que creo que este es un método muy
simple, así es como puedes compartir los datos e incluso esto no solo está relacionado con los
datos de la cadena, sino que también puedes hacer que sea programable para liderar eso en 4
+ 4 y guardarlo. Pero hay un problema, porque aquí sabes que el valor predeterminado no es
un número, así que lo estoy haciendo un número, ahora guárdalo. Ahora está realmente bien,
ahora simplemente puedes ver que es 5 hacer clic en el clic, así que ahora es 8 porque solo
usamos algo automático. Esta es la forma en que puede programar las cosas de los eventos del
programa utilizando esta forma simple y así es como puede encontrar los eventos en los que
el usuario interactúa.

Biblioteca de HttpClient. Como ya sabe, Angular es un marco de frontend, por lo que para el
backend necesitamos utilizar la biblioteca HttpClient para conectar los datos, el backend y el
frontend. Obtiene los datos a través del HTTP desde la API o el backend y los pone a
disposición para la aplicación Frontend Angular a través de los servicios Angular. Recibimos
los datos utilizando la biblioteca HttpClient en cualquier servicio y, como ya lo saben,
comentamos en un video anterior que los datos del backend o la API, hagámoslo de una
manera práctica. Aquí, ya hemos creado un servicio de API, así que lo que necesitamos no es
necesario que lo revisemos nuevamente, por lo que podemos eliminar esa función. El método
lo he eliminado y ahora todo está bien porque es solo una API simple, así que voy a la prueba
de puntos de componentes.

Como se puede ver allí, estoy recibiendo un error y por qué ' Obtengo el error aquí, porque en
el componente de inicio estamos llamando a esta verificación si está funcionando y le está
diciendo que no está funcionando en el servicio de API de tipo. Este servicio de API ahora no
tiene el método de verificación si funciona, ya que lo eliminamos, así que está bien, solo
necesitamos eliminar eso desde aquí y lo estoy haciendo, y no voy a recibir ningún tipo de
cosas así ahora. Necesitamos diseñar primero la API aquí, el servicio API que ya está aquí, no
necesitamos ingresarlo nuevamente. Oh, no hay necesidad de eliminar eso porque
definitivamente necesitamos volver a llamar, así que voy al servicio de API y aquí estamos
haciendo las cosas. En primer lugar, necesitamos, ya que hablamos de que vamos a trabajar en
la API utilizando la biblioteca HttpClient, por lo que primero debemos importar esa
biblioteca. YO' Estoy haciendo exactamente lo mismo, espacio de HttpClient y desde flash
absolutamente común HTTP flash, está bien, ya lo tengo. Ahora también me está dando el
signo silencioso, significa el color apagado porque no lo estamos usando en este momento,
pero definitivamente lo vas a usar. Entonces, primero que todo, tenemos que ir allí para
obtener el parámetro en realidad, pero ahora estamos recibiendo los datos para que este
servicio API se inicie, es decir, el servicio de este HttpClient. Así que tengo que ir allí y el
método privado HTTP es el cliente DDP, así que obtuvimos los datos de aquí. Así que ahora
voy allí y un salto de línea. Bien, y aquí estábamos haciendo una función, justo después de la
función de constructor aquí y estoy escribiendo aquí para obtener datos. Y como es el método,
necesito aquí para poner los paréntesis e ir dentro y dentro de eso, devolver lo que ' m
regresando aquí este punto punto HTTP. Ahora quiero obtener algo, no quiero eliminar o algo
que quiero obtener y entre paréntesis otra vez y aquí. Entonces, lo que quiero hacer allí son
algunas cosas, no es necesario hacer esta función dentro de la función del constructor porque,
en última instancia, estamos en una clase. Esto significa absolutamente este parámetro de
funciones constructoras, esto significa que podemos estructurar parámetros de funciones. Sin
embargo, tenemos varios parámetros en una función constructora o EDC, así es como
funciona. Entonces, aquí tenemos que colocar la URL desde donde estamos recibiendo los
datos, así que déjame poner aquí, está bien, guarda eso. De todos modos, queremos recuperar
los datos de este host de barra de puntos punto-com de código de tipo de marcador de
posición JSON, básicamente, en realidad estamos recuperando alguna publicación de ese
enlace. Déjame mostrarte el enlace en realidad, Hay una vista de enlace seleccionada. Puede
ver que algunos JSON aquí, algunos datos, el título, el cuerpo, el ID habitual, el ID EDC, el ID del
post y el ID del usuario. Entonces, podemos usar estos datos, puede ver que hay muchos datos
sobre la mayoría de los usuarios finales que han publicado 100 publicaciones. Así que
podemos usar la publicación desde aquí porque no tenemos el back-end y no estamos
cubriendo ningún tipo de back-end en su curso, así que usaremos esta API para seleccionar los
datos del back-end. Ahora, aquí realmente tenemos que ir a la prueba de puntos del módulo
porque también tenemos que importar esto a los módulos. Así que, al final, puedo ver ese tipo
de cosas diferentes que voy a importar, un módulo HttpClient de importación y aquí, me
refiero al módulo aquí. Una vez más, está listo. Solo tenemos que mencionar desde dónde. al
recoger esto, Angular barra diagonal común barra HTTP, guárdalo. Ahora voy a las
importaciones aquí, agregue una coma en un salto de línea, el módulo HttpClient que
acabamos de importar previamente, por lo que ahora todo se hace aquí. Así que a estas
alturas, ya hemos importado los datos, pero podemos mostrar esto. Como usted sabe que el
servicio es solo un archivo de TypeScript, simplemente no podemos ver nada aquí utilizando
ningún tipo de servicio API de servicio o lo que sea. Necesitamos ir a un componente,
cualquier componente como el componente de inicio y usted puede elegir cualquiera. Voy a la
de inicio, y aquí necesita importar ese servicio y ya estamos importando ese servicio, el
servicio de API que hemos hecho. Y aquí, necesitamos llamar a los datos y los datos se
mostrarán aquí. Entonces, primero que nada, necesitamos recibir los datos, ya que aquí
necesitamos llamar a esto y necesitamos recopilar todo en una variable en una función
constructora. Asique' Al ir allí y una API de espacio de clave privada, no es necesario que
escriba API aquí; puede escribir cualquier cosa, como la API de datos de base de datos DB o la
palabra clave que desee, está en su elección de todos modos. Y aquí, estamos recibiendo el
servicio de API y guardando todo el servicio de API en su servicio de API variable. Bueno, ya lo
entendemos, ahora lo siguiente que debemos hacer es ir dentro de ng o ngOnInit, así que no
sabes nada sobre ngOnInit, lo discutiremos más adelante sin problema, pero ahora solo entras
en eso. Y como sabemos, que si estamos en una función y recibimos algo en los parámetros de
las funciones de un constructor, lo llamamos usando esta palabra clave y el punto API. Y como
tenemos acceso al servicio de API, sabemos que el método al que queremos llamar es obtener
datos, por lo que hemos llamado a obtener datos, que en realidad es este el que recibe datos. Y
llamamos a obtener datos porque el retorno de este HTTP y obtener T esta longitud de todos
modos. Así que aquí era un método, ahora usaré algunas palabras clave nuevas, así que se me
olvidó poner el signo de período así. Necesito ir a la palabra clave subscribe interior y luego
aquí la API, esta es la que estoy hablando y esta muestra el signo igual y mayor que el
signo. Este signo que es casi significa que estamos asignando una función a la API en este
momento, es un elemento nuevo en cualquier tipo de cambio en Angular 7. Entonces, este
usuario de punto, ahora de nuevo es algo nuevo, estaremos discutiendo todas estas cosas
nuevas. Primero déjame hacer esto. Publicación y un signo de dólar, así que nuevamente hay
algo nuevo que acaba de ver que está relacionado con nuestra biblioteca de XJ y lo
discutiremos. A estas alturas es como una variable, está bien, pero ya sabes que estamos
llamando a esto como dólar, eso significa que esta publicación debe estar en algún lugar
dentro de este componente doméstico de exportación Clase D pero no está aquí. Así que
primero hagámoslo, lo estoy haciendo justo aquí, tanto en dólares como en un objeto. Está
bien, lo guardarán, así que déjame hablarte de lo que le hicimos. Este es el ciclo de vida del
componente que analizaremos sobre los ciclos de vida en un video posterior, no hay
problema, pero en un ciclo de vida esto significa que cada vez que iniciamos un componente,
aunque sea el componente. Lo primero que queremos que se cargue, por lo que queremos que
se cargue this.getdata, primero queremos cargar estos datos y luego cargar cualquier cosa. Sin
embargo, por ahora no tenemos nada más que ngOnInit y usamos para cargar algo desde el
principio. Esta es la forma en que lo hacemos y esto es parte del ciclo de vida de los
componentes que analizaremos más adelante. Ahora lo usamos con los datos de destino de la
API de puntos y esto es lo que ya sabemos, entonces usamos la suscripción de puntos, y dentro
de la API de suscripciones que publicamos. Entonces, cómo usamos estos suscriptores y una
de sus características más, en realidad es la parte de los observables y este signo de dólar,
porque estamos en un área de suscripción, por lo que estamos usando esta pierna. Así que
discutiremos sobre ambas cosas en un pequeño capítulo cuando discutiremos sobre la
biblioteca RxJS en detalle. Entonces, ya deberíamos tener los datos, pero no serán visibles aún,
por lo que debemos ir al HTML para ver lo que hemos creado y si está visible o no. Entonces,
lo primero que necesitamos es publicar el título y aquí podemos recuperar los datos, y aquí
aprendimos hace unos pocos videos, el método de directiva ngFor. Así pues, y aquí, Deje que
una variable variable sea la variable en la que se responde que está iterando los datos, todos
los datos que se publican son más altos. Así que este dólar de las publicaciones, es el elemento
de este elemento al que los llamamos y la publicación, estamos iterando cada publicación en la
variable de publicación. Ahora tengo que entrar y debo hacer la variable, la etiqueta div y aquí
estamos llamando primero, tenemos que ir al navegador para verificarlo. Hay algunas cosas a
las que podemos llamar, el título y el cuerpo, la ID de usuario y la ID. Ya estás llamando al
título absolutamente el título, por lo que necesitamos escribir aquí, después del título del
punto, guárdalo. También podemos llamar al cuerpo de div post dot, guardarlo y ahora
necesitamos verificar el navegador nuevamente. Y aquí, tenemos una gran cantidad de datos
que necesitamos para verificar lo que tenemos, pero los datos están aquí, necesitamos
definirlos por algún método CSS y EDC, hagámoslo. Y ahora, Esto debería verse así, ya
sabes. Puedes hacer más estilos de lo que quieras, pero oye, así es como podemos traer los
datos. Como puedes ver, las publicaciones detalladas están aquí, aquí está el CSS que he usado,
solo te estoy mostrando algunas cosas simples. No visité el momento de escribir estas cosas
porque solo quería saber qué es lo que necesitas hacer, decido ser h2 y para ti sabes las clases
de CSS, y allí diseñé el CSS simple aquí. Nada muy grande y simple, simplemente CC, así que
simplemente puedes hacer eso y así es como podemos traer los datos aquí. En el siguiente
video, habla sobre los ganchos del ciclo de vida de los componentes. Solo te estoy mostrando
algunas cosas simples. No visité el momento de escribir estas cosas porque solo quería saber
qué es lo que necesitas hacer, decido ser h2 y para ti sabes las clases de CSS, y allí diseñé el
CSS simple aquí. Nada muy grande y simple, simplemente CC, así que simplemente puedes
hacer eso y así es como podemos traer los datos aquí. En el siguiente video, habla sobre los
ganchos del ciclo de vida de los componentes. Solo te estoy mostrando algunas cosas
simples. No visité el momento de escribir estas cosas porque solo quería saber qué es lo que
necesitas hacer, decido ser h2 y para ti sabes las clases de CSS, y allí diseñé el CSS simple
aquí. Nada muy grande y simple, simplemente CC, así que simplemente puedes hacer eso y así
es como podemos traer los datos aquí. En el siguiente video, habla sobre los ganchos del ciclo
de vida de los componentes.