Crea tu Componente en ANGULAR JS ! (Nivel Basico)

-

Componentes de Angular JS


Estas harto de rescribir código tanto html como js en cada uno de tus archivos, 

Hoy te presento el inicio a el cambio básico para mejorar tu aplicación, ademas de encaminar-la para futuras actualizaciones como Angular 6.

Conceptos básicos

Un componente es básicamente la funcionalidad aplicada a la reutilización de funcionalidades de tu aplicación en toda ella.

Imaginémonos que tenemos algo básico, queremos hacer un listado de items, y queremos utilizar este listado para mostrar ciertos objetos en el Home, en el listado de usuario y en el de ventas. Gracias al componente crearemos un único Template el cual se adaptara a cada una de las situaciones.

Formemos nuestro primer controlador

Ahora vamos a crear este ejemplo que hemos presentado.

Para este componente usaremos un archivo html " compList.component.js  " y su template " compList.template.html ".

Empezaremos por declarar nuestro componente :

class compListCtrl {
constructor(AppConstants, $scope) {
'ngInject';
}
}



let compList = {
controller: compListCtrl,
templateUrl: 'compList/compList.tmp.html',
bindings:{
arrayObjetos: "="
}

};

export default compList;

Aquí podemos ver como hemos declarado el componente compList como un objeto nuevo y le hemos añadido el controlador, su template y un binding el cual lo hemos llamado arrayObjetos.

Aqui tenemos 3 conceptos. 

Controlador, es el que se encargara de la gestión del DOM del nuestro vista.
TemplateUrl, es la dirección de nuestro template, básicamente declaramos su dirección.
Bindings, este objeto se trata de todos aquellos datos que queramos darle a nuestra template, pueden ser cualquier tipo. Para más información click aqui

A este le hemos dicho que le pasaremos el arrayObjetos, el cual lo usaremos como el nombre indica para darle el array de objetos que usaremos para crear nuestro listado de objetos.

Ahora es el momento de el template :

<div ng-repeat="item in $ctrl.arrayObjetos">
{{item.nombre}}
</div>

Este es un ejemplo basico, el template se compondra de un ng-repeat, que en terminos rapidos hara la funcion de un forEach.

El cual como vemos le hemos declarado "item in $ctrl.arrayObjetos" que como recordamos arrayObjetos es el binding que le hemos indicado al componente que le enviaremos como dato.

Este pintara los nombres de cada uno de los objetos que le pasemos.

AUN NO LO TENEMOS TODO

Claro ahora ya tenemos el componente declarado con su template y digamos que ya tiene funcionalidad, pero ? Como lo llamamos para que se implemente...
Para llamar a un componente es tan facil como declarar en el html su nombre seguido con un guión, ademas de poder asignarle como un atributo el binding que le hemos puesto :


<comp-list array-objetos="$ctrl.arrayObjetos"></comp-list>

A partir de este punto ya habriamos creado nuestro primer componente básico.



Entradas populares de este blog

Git en Repositorios Externos

-
Imagen
Git en Repositorios Externos Hoy te voy a enseñar a como utilizar Git con repositorios externos, para ello usaremos estos comandos : git init git remote git push git pull Primero de todo necessitamos un repositorio en algun lugar, para este ejemoplo hemos elegido GitHub, y crearemos un nuevo proyecto : Despues necesitaremos inizializar un repositorio, para ello crearemos una nueva carpeta y haremos un "git init", ademas crearemos un archivo para comprobar que todo vaya correctamente. Ahora viene el punto importante, añadiremos el repositorio que hemos creado en GitHub con "git remote add origin URL-DEL-PROYECTO", podemos comprobar-los con "git remote -v show" Una vez añadido el nuevo destino haremos nuestro push, y veremos como se a actualizado el repositorio en GitHub   Hasta aqui tenemos el funcionamiento básico de el git, pero claro si nosotros queremos actualizar la version que tenemos hasta la que este en nuestro GitHub (que n...
Leer más

Aprende GIT en lo que yo me aburro escribiendolo

-
Imagen
Git Hoy voy a hacer una pequeña guía sobre Git y como hacer Branch y trabajar sobre ellas. Las Ramas son algo muy útil cuando uno quiere trabajar en equipo y por proyectos, ya que te permiten manipular tu aplicación sin peligro de romper la versión principal. Comandos Básicos : - " git add . " - " git commit -m ' ' " - " git checkout NOMBRERAMA " " git branch NOMBRERAMA " - " git merge " - " git log --graph --all" Aquí os dejo una lista de comandos básicos con los cuales trabajaras diariamente  .  Los dos más básicos de todos "add" y "commit", add sirve para passar todos aquellos ficheros que queramos al ultimo estado, y commit nos servirá para crear las diferentes versiones. Hagamos un ejemplo rápido : Inicia liza un nuevo git, ahora crea un fichero actrices.txt e introduce alguna actriz. Ahora podrás añadir con add este fichero y guardarlo con commit . Si...
Leer más

Desplegar Django en Apache2

-
Imagen
Desplegar Django en Apache2 Lo primero que vamos a hacer es instalar la prebia de alicaciónes que necesitamos, utilizaremos, python,python-pip,virtualenv,django-admin. Vamos a ello sudo apt-get install python Si queremos comprobar la version de nuestro python usaremos --version o -V , CUIDADO con la version que utilizamos y la de nuestro servidor Django , puede causar conflictos. Ahora instalaremos pip sudo apt-get install python-pip Pip es la herramiento que utilizaremos para hacer las instalaciónes de modúlos de Django . La primera que vamos a instalar es virualenv , nos servira para crear un virtual environment o entorno virtual, para poder desplegar nuestra aplicación sin molestar a otras que ya tenga nuestro equipo. En mi caso instalare el entorno en /var/www para ello haremos lo siguiente cd /var/www virtualenv NOMBRE_VIRTUALENV Se nos creara la carpeta con el nombre del NOMBRE_VIRTUALENV en la cual estara todo nuestro entorno, lo que...
Leer más