Para qué nos sirven los Módulos y Componentes

Resumen

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.

Víctor Manuel Sarmiento Cayuelas

student•

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.

Nathaly Stefani Riaño Bejarano

student•

Excelente aporte!

Fernando Espinoza

student•

<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

Jherom Chacon

student•

Importante anotar la palabra reservada para los components. Gran aporte.

Jesús Manuel Fuentes Trejo

student•

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.

Jesus Soto

student•

gracias por el aporte investigue un poco mas y me tope con esto , no lo entendía pero ya lo logre comprender

Jherom Chacon

student•

Muy interesante, espero ver mas de esto proximamente o un tutorial al respecto. Saludos.

Jairo Fernández

student•

espectacular la explicación

Octavio Gomez Romo

student•

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

MARCO ANTONIO MEDINA DAVALOS

student•

Muy bueno

Noe Mikhael Huaccharaque Ruiz

student•

Comando para generar un modulo

ng generate module nombre

Comando para generar un componente dentro del módulo

ng generate component nombre/miComponente

Jherom Chacon

student•

esto se ve muy útil. Cuándo los generas se integran automaticamente al proyecto?

Felipe de Jesús Víctor Arceo

student•

También es funcional lo siguiente:

ng g m nombreModulo

ng g c nombreComponente

Jaime Acosta

student•

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.

Jherom Chacon

student•

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.

Andres Mora Vanegas

student•

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

Dante Cunurana Mamani

student•

Genial explicación

Juan Esteban Deossa Pertuz

student•

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.

Andrés Antonio Azuara Portillo

student•

If I work in C# .Net Core what is it better? make the front end using nodejs and my external .Net project or make .Net core project and include angular on it?

Erik Elyager

student•

Depends on many things, but Angular and .Net Core is a well know combination. I think for projects with .Net Core I'll go with Angular.

Cristian Mendoza

student•

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

Nicolás E. Rozo Espinosa

student•

Un Modulo es un conjunto de Funcionalidades(Componentes), por ejemplo un modulo de Nomina, tendíamos los componentes de Calculo de Descuentos, de Nomina, Retenciones, Generación de Desprendibles, entre otras funcionalidades.

Los componentes se puede considerar como cada una de esta funcionalidades.

Es importante aclarar que Angular es SPA (Single Page Aplication)... y se comportaría como un único modulo.

Jherom Chacon

student•

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

Jherom Chacon

student•

Los módulos nativos

Jherom Chacon

student•

Cómo declarar nuestros módulos personalizados

Jherom Chacon

student•

Arreglo de declaraciones ( declarations: )

Jherom Chacon

student•

Concepto de componente

Jherom Chacon

student•

Imports

Jherom Chacon

student•

Providers