DanteCervantes.com

Introducción a Angular JS

Publicado por : Dante | 11 mayo, 2015 | 3:58 am

 

Angular Js, es un framework MVC, por sus siglas en inglés “Model View Controller” ó “Modelo Vista Controlador” , desarrollado por el buscador por más grande, Google.

Hoy aprenderemos un poco acerca de cómo utilizar este framework, para ellos los requisitos mínimos son:

1.- Tener conocimientos en Javascript

2 .- Conocer el patrón de diseño MVC

3.- Paciencia

¿Porqué utilizar Angular js y no otro framework?

Como siempre he pensado, todo es cuestión de gustos, sin embargo, a diferencia de otros frameworks MVC de javascript, como son Backbone.js, Ember.js entre otros, la diferencia radica en que Angular, realiza la mayor parte del trabajo por ti, con esto me refiero a que no debes “actualizar” la vista cada vez que actualizas un modelo como es el caso de Backbone, por desgracia no he tenido la oportunidad de probar Ember, por ello no pongo crítica alguna; Eso no significa que Backbone o Ember sean mejores o peores que Angular, sino que depende del tipo de proyecto que vayas a realizar.

Soy novato, ¿qué me recomiendas hacer primero?

Si eres novato en javascript y quieres aprender este maravillo framework te recomiendo le eches un ojo a este tutorial.

Angular, se ha destacado por ser uno de los frameworks más sencillos de utilizar, sin embargo para las personas que recién inician (como un servidor) se les hace un poco complejo.

Por ahora les dejaré el glosario de las funciones, directivas y demás que en este tutorial aparece.

ng-app : es la directiva de angular que indica a partir de dónde la aplicación comenzará su ejecución.

ui-view : es una directiva del ui-route de angular, la cual es inicializada al momento de ejecutar la aplicación por primera vez.

ng-model : es el “modelo” que almacena la información, y el controlador se encarga de procesarla.

ng-repeat : es una directiva de angular que realiza la misma función a la de un ciclo foreach, sobre un modelo que contiene un arreglo de objetos (como es el caso de este tutorial), cada uno de los elementos dentro del arreglo será interpretado como un “modelo” y se podrán realizar cambios desde el controlador sin necesidad de “refrescar” la vista, a eso se le llama “Two Way Data Binding”.

ng-checked : recibe un valor boleano, esto marcará como “checked” el input dependiendo de su valor, true para “checked”, false para “unchecked”.

ng-click : directiva de angular que permite ejecutar una función del evento click.

filtros : los “filtros” en angular permiten realizar búsquedas dentro de una “colección de modelos” o en cualquier otro elemento, para utilizarlos se utilizar como separador la pipa “|” seguido de la palabra reservada “filter : ngmodelDelinput”.

ng-if : directiva de angular encargada de realizar validaciones.

$scope : este parámetro es el encargado de almacenar las funciones variables y condiciones que el controlador ejecutará dependiendo de la solicitud que se realice en la aplicación.

Realicé este pequeño proyecto, en dónde se han integrado todas las definiciones detallas con anterioridad, a continuación les dejo el enlace para que vean su funcionamiento.

Todos los archivos vienen con comentarios para mayor comodidad.

Conclusión

Implementar un nuevo framework puede ser tarea un poco tediosa, pero con tiempo y dedicación siempre podrás hacer uso de las tecnologías que día con día aparecen.

 

 

  • Pingback: Cómo crear una aplicación tipo Whatsapp | Dante Cervantes()

  • Julio Gtz

    Hola amigo, la verdad no se entiende nada esta publicación, yo que soy principiante en angular no capté ninguno de los conceptos aquí explicados.
    Me parece que tu afán de explicar todos los temas tuvo el efecto contrario.

    • Dante

      Tienes razón, me hizo falta explicar el código, gracias por tus comentarios, acabo de realizar la explicación de cada código explícitamente, saludos!

Recibe los mejores desarrollos y tutoriales

* campos requeridos

redes sociales