Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 13D : 4H : 34M : 50S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Curso de Angular 4

Curso de Angular 4

Eduardo Ibarra

Eduardo Ibarra

Para qué nos sirven los Módulos y Componentes9/80

Los modulos son las piezas mas grandes en las que se puede dividir una aplicación de Angular 4, son piezas que podemos reutilizar dentro de nuestro proyecto pero también podemos usarlas en otros proyectos.
Angular nos ofrece módulos nativos como HTTP, Browser, Forms, Reactive Forms.

Módulos:

  • Nativos: los propios de Angular 4.

  • De terceros: realizados por otras personas y que nosotros podemos usar, siendo libres o pago.

  • Propios: los que realicemos.

Para anotar nuestro módulos y además -> src/app/app.module.ts

  • Componentes.

  • Imports: módulos externos a importar.

  • Providers: servicios necesarios.

  • Bootstrap: con que componente vamos a iniciar.

Un módulo en un app, tiene una entidad propia y puede estar compuesto por más cosas como componentes.

Cada vista debería ser un componente, y está puede o no, componerse por otros componentes, dependiendo de la complejidad, profundidad y la reutilización de código.

<h1>Angular Basics</h1>

@NgModule: Palabra reservada para declarar un Modulo, contiene 4 arrays:

  • declarations: Lista de componentes
  • imports: Lista de modulos
  • providers: Lista de servicios
  • boostrap: Componente de inicio

@Component: Palabra reservada para declarar un componente, contiene varios elementos:

  • selector: Tag de HTML para insertar el componente
  • templateUrl: Archivo HTML que va a usar el componente
  • styleUrls: Archivos CSS que usará el template

Es importante mencionar que en los módulos también se pueden agregar un atributo que se llama entryComponents que sirve para agregar componentes que pueden ser inicializados de forma dinámica.

espectacular la explicación

Una forma gráfica de visualizar como esta definido el directorio.

fuente:
https://medium.com/@yonem9/angular-qué-son-los-módulos-y-cómo-se-refactoriza-una-aplicación-9457550e8e9

Comando para generar un modulo

ng generate module nombre

Comando para generar un componente dentro del módulo

ng generate component nombre/miComponente

Entonces, una aplicación estará compuesta de módulos. Los módulos estarán compuestos de componentes. Los componentes corresponden a las distintas vistas que serán insertadas dentro de cada módulo.

Existen módulos nativos y módulos definidos por el usuario. Los módulos definidos por el usuario pueden considerarse sub áreas o sub actividades específicas de una aplicación, por ejemplo un gestor de usuarios, uno de seguridad, uno de reportes.

Definimos un módulo colocando la palabra reservada @NgModule. Los declarations nos permiten relacionar los componentes que tendrá el módulo. Imports nos permitirá relacionar nuestro módulo con otros módulos. Los providers serán usados para indicar los servicios que necesitaremos y Bootstrap nos permite indicar cuál es el módulo con el que vamos a iniciar.

Cada vista de la página debe corresponder a un componente. Es decir, los componentes se componen de atributos como selector, templateURL y estilos, aunque pueden poseer otros atributos más allá de estos.

Tips de buenas prácticas:

  • Cada vista de una página debe ser un componente en vez de tener varios componentes para una página.

  • En los componentes es preferible tener un HTML externo en vez de tener el HTML en el componente mismo.

¡¡¡Muy buena la explicación del profesor!!!

Genial explicación

Angular se compone a través de bloques que cuando se juntan y se utilizan correctamente van construyendo una estructura superior. Los bloques mas grandes, son los módulos, y son las partes mas grandes de los proyectos, que se pueden reutilizar en un futuro, estos son los que dan la forma a nuestro proyecto de angular, un ejemplo de módulos nativos de Angular es Http, Forms, ReactiveForms y Browsers.
Al tiempo estos módulos son construidos por componentes, que son bloques más pequeños, estos componentes suelen ser las vistas HTML, el código CSS y la lógica, como TS y los servicios.

¿Un modulo se podría entender como cualquier web form dentro de mi app?

¿Qué son los módulos en Angular 4?

Los módulos nativos

Cómo declarar nuestros módulos personalizados

Arreglo de declaraciones ( declarations: )

Concepto de componente

Imports

Providers

Concepto de componente

Composición de un componente

buenas clases

Muy buena explicación sobre módulos y componentes.

Estoy tomando el curso el 17/12/2017 y en mi caso tuve que importar
FormsModule y HttpModule en la cabecera del archivo para poder indicar estos en el array de imports. No sé si esté haciendo algo mal porque en el archivo que muestra no vienen nada de eso jeje.

import {HttpModule} from '@angular/http';
import {FormsModule} from '@angular/forms';

Excelente la explicación.

importe HttpModule y el php Storm me indica que esta deprecated, tiene que ver con alguna actualización?

Por qué puede haber módulos de pago si se supone que es código abierto?

**Modulos: **Piezas en las que se divide una aplicacion de angular. Reutilizables en la misma app o distintas apps.
**Componentes: **Piezas que componen cada modulo.

Módulos > Componentes

src/app/app.module.ts
Modulos:
Nativos : propios de angular
De terceros: realizados por otras personas y que nosotros podemos usar, siendo libres o pago.
Propios: los que realicemos.

Componentes.
Imports: módulos externos a importar.
Providers: servicios necesarios.
Bootstrap: con que componente vamos a iniciar.
Un módulo en un app, tiene una entidad propia y puede estar compuesto por más cosas como componentes.
Cada vista debería ser un componente, y está puede o no, componerse por otros componentes, dependiendo de la complejidad, profundidad y la reutilización de código.

buena explicación !!!

Me imagino que el @ en los imports hace referencia a todo la ruta absoluta del proyecto y que viene por defecto

Bootstrap

Una pregunta, no es recomendado que una vista tenga varios componentes?

1.png Escribí lo que el profesor dijo pero el localhost se rompe.

Angular es bastante eficaz a la hora de hacer buenas web app

Buena explicación

si ahora si a migrar un proyecto angularJS a angular 4 sii con webapck

Sr. Ibarra, buen comienzo!

Me confundo, un componente es toda una pagina completa, o un componente es cada etiqueta html que conforma la vista entera de una pagina ?

Todos los componentes de la aplicación deben estar incluidos en el array declarations de app.module? o basta con incluirlos en los modulos que haran uso de ellos?

Cuándo se agrega más de un componente en array bootstrap: [AppComponent] y por qué es un array?

Me confundo, un componente es toda una pagina completa, o un componente es cada etiqueta html que conforma la vista entera de una pagina ?.
Otra pregunta cual es la diferencia entre un componente y un template, son lo mismo ?

Módulos:

  • Nativos: los propios de Angular 4.

  • De terceros: realizados por otras personas y que nosotros podemos usar, siendo libres o pago.

  • Propios: los que realicemos.

Para anotar nuestro módulos y además -> src/app/app.module.ts

  • Componentes.

  • Imports: módulos externos a importar.

  • Providers: servicios necesarios.

  • Bootstrap: con que componente vamos a iniciar.

Un módulo en un app, tiene una entidad propia y puede estar compuesto por más cosas como componentes.

Cada vista debería ser un componente, y está puede o no, componerse por otros componentes, dependiendo de la complejidad, profundidad y la reutilización de código.

<h1>Angular Basics</h1>

@NgModule: Palabra reservada para declarar un Modulo, contiene 4 arrays:

  • declarations: Lista de componentes
  • imports: Lista de modulos
  • providers: Lista de servicios
  • boostrap: Componente de inicio

@Component: Palabra reservada para declarar un componente, contiene varios elementos:

  • selector: Tag de HTML para insertar el componente
  • templateUrl: Archivo HTML que va a usar el componente
  • styleUrls: Archivos CSS que usará el template

Es importante mencionar que en los módulos también se pueden agregar un atributo que se llama entryComponents que sirve para agregar componentes que pueden ser inicializados de forma dinámica.

espectacular la explicación

Una forma gráfica de visualizar como esta definido el directorio.

fuente:
https://medium.com/@yonem9/angular-qué-son-los-módulos-y-cómo-se-refactoriza-una-aplicación-9457550e8e9

Comando para generar un modulo

ng generate module nombre

Comando para generar un componente dentro del módulo

ng generate component nombre/miComponente

Entonces, una aplicación estará compuesta de módulos. Los módulos estarán compuestos de componentes. Los componentes corresponden a las distintas vistas que serán insertadas dentro de cada módulo.

Existen módulos nativos y módulos definidos por el usuario. Los módulos definidos por el usuario pueden considerarse sub áreas o sub actividades específicas de una aplicación, por ejemplo un gestor de usuarios, uno de seguridad, uno de reportes.

Definimos un módulo colocando la palabra reservada @NgModule. Los declarations nos permiten relacionar los componentes que tendrá el módulo. Imports nos permitirá relacionar nuestro módulo con otros módulos. Los providers serán usados para indicar los servicios que necesitaremos y Bootstrap nos permite indicar cuál es el módulo con el que vamos a iniciar.

Cada vista de la página debe corresponder a un componente. Es decir, los componentes se componen de atributos como selector, templateURL y estilos, aunque pueden poseer otros atributos más allá de estos.

Tips de buenas prácticas:

  • Cada vista de una página debe ser un componente en vez de tener varios componentes para una página.

  • En los componentes es preferible tener un HTML externo en vez de tener el HTML en el componente mismo.

¡¡¡Muy buena la explicación del profesor!!!

Genial explicación

Angular se compone a través de bloques que cuando se juntan y se utilizan correctamente van construyendo una estructura superior. Los bloques mas grandes, son los módulos, y son las partes mas grandes de los proyectos, que se pueden reutilizar en un futuro, estos son los que dan la forma a nuestro proyecto de angular, un ejemplo de módulos nativos de Angular es Http, Forms, ReactiveForms y Browsers.
Al tiempo estos módulos son construidos por componentes, que son bloques más pequeños, estos componentes suelen ser las vistas HTML, el código CSS y la lógica, como TS y los servicios.

¿Un modulo se podría entender como cualquier web form dentro de mi app?

¿Qué son los módulos en Angular 4?

Los módulos nativos

Cómo declarar nuestros módulos personalizados

Arreglo de declaraciones ( declarations: )

Concepto de componente

Imports

Providers

Concepto de componente

Composición de un componente

buenas clases

Muy buena explicación sobre módulos y componentes.

Estoy tomando el curso el 17/12/2017 y en mi caso tuve que importar
FormsModule y HttpModule en la cabecera del archivo para poder indicar estos en el array de imports. No sé si esté haciendo algo mal porque en el archivo que muestra no vienen nada de eso jeje.

import {HttpModule} from '@angular/http';
import {FormsModule} from '@angular/forms';

Excelente la explicación.

importe HttpModule y el php Storm me indica que esta deprecated, tiene que ver con alguna actualización?

Por qué puede haber módulos de pago si se supone que es código abierto?

**Modulos: **Piezas en las que se divide una aplicacion de angular. Reutilizables en la misma app o distintas apps.
**Componentes: **Piezas que componen cada modulo.

Módulos > Componentes

src/app/app.module.ts
Modulos:
Nativos : propios de angular
De terceros: realizados por otras personas y que nosotros podemos usar, siendo libres o pago.
Propios: los que realicemos.

Componentes.
Imports: módulos externos a importar.
Providers: servicios necesarios.
Bootstrap: con que componente vamos a iniciar.
Un módulo en un app, tiene una entidad propia y puede estar compuesto por más cosas como componentes.
Cada vista debería ser un componente, y está puede o no, componerse por otros componentes, dependiendo de la complejidad, profundidad y la reutilización de código.

buena explicación !!!

Me imagino que el @ en los imports hace referencia a todo la ruta absoluta del proyecto y que viene por defecto

Bootstrap

Una pregunta, no es recomendado que una vista tenga varios componentes?

1.png Escribí lo que el profesor dijo pero el localhost se rompe.

Angular es bastante eficaz a la hora de hacer buenas web app

Buena explicación

si ahora si a migrar un proyecto angularJS a angular 4 sii con webapck

Sr. Ibarra, buen comienzo!

Me confundo, un componente es toda una pagina completa, o un componente es cada etiqueta html que conforma la vista entera de una pagina ?

Todos los componentes de la aplicación deben estar incluidos en el array declarations de app.module? o basta con incluirlos en los modulos que haran uso de ellos?

Cuándo se agrega más de un componente en array bootstrap: [AppComponent] y por qué es un array?

Me confundo, un componente es toda una pagina completa, o un componente es cada etiqueta html que conforma la vista entera de una pagina ?.
Otra pregunta cual es la diferencia entre un componente y un template, son lo mismo ?