Primer modulo con angular – Modulo de usuarios

Los módulos en angular son muy importantes, pero también es importante mencionar que podemos crear una plataforma sin usar un solo modulo, es decir, a base de puros componentes, ahora eso es correcto?, déjame decir que si, pero mas sin embargo no es mantenible, ya que no estamos definiendo entidades, en realidad solo estaríamos creando elementos, lo cual es ideal si queremos generar una biblioteca, pero si deseas crear una plataforma lo ideal es crear módulos que estén construidos en base a componentes asociados a los módulos, componentes base y widgets.

Ahora déjame explicarte cual es la diferencia entre un modulo y un componente asociado al modulo, un modulo es un conjunto de elementos asociados a un contexto, por ejemplo tenemos el modulo de usuario y dentro de su conjunto tenemos elementos como el listado de usuarios, formulario de nuevo usuario, formulario para su actualización, y cualquier elemento que se te ocurra que tenga que ver con el contexto de usuario. Como puedes notar, el modulo es el contexto y dentro de este encontraremos elementos o como me gusta renombrarlos componentes asociados al modulo, ya que estos se conectan al contexto de usuario, pero son componentes que tienen lógica de negocio, para este ejemplo, lógica del usuario.

Es importante diferenciar entre componentes asociados al modulo y componentes base, estos últimos son simplemente elementos que no dependen de una lógica de negocio, por ejemplo pueden ser, botones, tablas, párrafos, títulos, tarjetas, elementos que simplemente puedo utilizar en una plataforma de enseñanza como en una de finanzas, que normalmente nacen de un UI Kit, o una biblioteca como material o bootstrap, en angular normalmente para proyectos empresariales se crean de forma autónoma.

Ya por último y para no dejar de mencionar, tenemos otro tipo de elementos que son los widgets, estos son componentes que se repiten mas de una vez en la plataforma y que están construidos con componentes base y su función es no repetir la lógica mas de una vez y que simplemente se puedan utilizar con un simple llamado.

Bueno ahora vamos con el ejemplo, lo primero que haremos es crear un modulo y para ello utilizaremos el cli, en la consola del proyecto ejecutaremos el siguiente comando:

Esto nos creara el modulo de usuarios y el routing, que nos ayudara a dar de alta las rutas que estarán asociadas dentro de este modulo por ejemplo el modulo puede tener como raiz user, y dentro podremos utilizar, list, edit, detail, new, update, de forma que al final quedarian user/list, user/edit, y así con cualquier ruta que creemos.

También vamos a general los componentes asociados al modulo, en este caso crearemos el componente para la lista de usuarios y el componente donde mostraríamos el detalle de usuarios, para ello ejecutaremos lo siguiente:

Listo esto ya nos creo los componentes asociados a la lógica de nuestro modulo, claro tu puedes crear mas componentes si asi lo necesitas, ahora lo que sigue es modificar el router principal donde daremos de alta el modulo de usuarios, esto lo hacemos de la siguiente forma:

Listo con lo anterior hemos creado la primera ruta llamada user donde se estará ejecutando el modulo de usuarios, pero ahora debemos enrutar los componentes asociados al modulo de usuarios, esto lo haremos en el router de usuarios.

Aqui estamos dando de alta 2 rutas, una en blanco », donde estamos diciendo que al entrar a /user, entraremos al componente UserListComponent y si entramos al detalle /user/detail, estaremos entrando a UserDetailComponent, de esta forma ya hemos dado de alta ambos elementos.

Es importante mencionar que si no vas atener mas modulos o estas probando, cambia ‘user’ de la propiedad path por », del app-routing.module.ts, para que el punto de entrada sea UserListComponent.

Bueno ahora sigue dar de alta el routing y los componentes en el modulo de usuarios, esto lo hacemos de la siguiente forma:

Listo hemos creado el primer modulo con angular, lo que seguiría seria modificar el UserListComponent y el UserDetailComponent, pero eso te lo dejo a ti, claro lo veremos en los siguientes post, pero como es mi costumbre si tienes alguna duda te dejo el video donde explico todo lo anterior con un ejemplo y a mayor detalle, es importante mencionar, que si tienes alguna duda déjalo en los comentarios de este post o del video en youtube.