angular

Listado dinámico de servicios con AngularJS

Listado servicios dinámico con AngularJSEl tutorial que voy a dejar hoy viene a que sigo aprendiendo (cuando tengo tiempo) AngularJS ya que me parece un lenguaje con el que puedo hacer muchas cosas y  muy chulas. O al menos muy prácticas. En el post que escribo se podrá ver un listado dinámico de unos hipotéticos servicios que funcionará de manera dinámica y muy sencilla.

El ejercicio que voy a desarrollar en este post constará de tres archivos. El primero incluirá el HTML del proyecto. En el se mostrarán las opciones y los resultados de la operación. El segundo archivo JS incluirá la función que se encargará de realizar las operaciones sobre los precios de los servicios. En el tercer archivo se incluirán los estilos (básicos) para este proyecto.

El resultado final de este proyecto lo puedes ver funcionando en el siguiente enlace. Y ahora que vas echado un vistazo y comprobado que funciona, vamos a ver el código fuente.



Listado dinámico con AngularJS

Como ya he dicho el primero de los archivos que vamos a llamar index.html contendrá lo mismo que a continuación se muestra:

Como se puede ver el código es bastante sencillo de entender.

Función JS

Ahora vamos a ver el archivo script.js que debería estar guardado dentro de las carpetas assets y esta dentro de otra llamada js.

Como se puede ver en este caso, el archivo solo consta de una función que será la encargada de almacenar los datos que posteriormente se cargarán en el archivo index.html.  Además esta función se encargará también de sumar o restar el precio al total del listado.

Estilos CSS

Para terminar solo hay que añadir unos estilos css. Esto como siempre ocurre con los estilos pueden ser al gusto del consumidor. El archivo de estilos se guardará dentro de la carpeta assets y dentro también de la carpeta css.  El archivo va a ser llamado style.css y contiene lo siguiente:

Y con esto ya podemos ejecutar nuestro nuevo listado dinámico realizado con AngularJS.

Deja un comentario