Angular JS

AGENDA

• ¿Que es Angularjs?
• Patrones de diseño MVC
• Directivas de AngularJS
• Implementación AngularJS
• Arquitectura AngularJS
• Demos
• Referencias

QUE ES ANGULAR JS

Es un Framework creado por Google cuyo objetivo es incluir en las browser-applications el patrón de modelo-vista-controlador ( MVC ) y lo hace precisamente proporcionando un framework binding / MVC (two-way binding). Con una estructura tan simple como { { }} para enlazar los datos en su página (binding). El servicio $scope detecta cambios en el modelo y modifica expresiones HTML en la vista a través de los controladores, los cambios a la vista se reflejan en el modelo. Esto elimina la necesidad de manipulación del DOM.

PATRONES DE DISEÑO - MVC

DIRECTIVAS ANGULAR JS

Angular utiliza directivas para inyectar acción en la página. Todas las directivas  precedidas de ng- , se colocan en los atributos HTML.

Algunas directivas comunes que vienen pre - construidas con angular son:

• ng-app: es esencialmente el punto de entrada de angular a la página. Le dice a angular donde se pone a actuar. < html ng - app> es todo lo que necesita para definir una página como una aplicación angular .

• $scope: es un objeto que se refiere a la aplicación del modelo . Es un contexto de ejecución. Scopes están dispuestos en la estructura jerárquica que imitan la estructura DOM de la aplicación, pueden ver las expresiones y propagar eventos.

• $element: Si jQuery está disponible , angular.element es un alias para la función jQuery. Si jQuery no está disponible, los delegados a angular.element subconjunto integrado del angular de jQuery , llamado " jQuery ligero" o jqLite. jqLite es un pequeño subconjunto , compatible con la API de jQuery que permite angular para manipular el DOM de una manera compatible entre navegadores . jqLite implementa sólo la funcionalidad necesaria más comúnmente con el objetivo de tener una huella muy pequeña .

DIRECTIVAS ANGULAR JS

• ng-bind y ng-model : cambia el texto de un elemento con el valor de una expresión.

• < ng útil: bind = "nombre" > < / span > se mostrará el valor de "nombre" en el interior del tramo. Cualquier cambio en "nombre" se reflejan al instante en el DOM en cualquier lugar donde se utiliza la variable.

• ng-cotroller: especifica la clase de JavaScript para la acción determinada . Los controladores son normalmente mantienen en archivos .js externos .

• ng-repeat : crea las estructuras de bucle muy limpio en su página.

• ng-html-bind: Evalúa la expresión e inserta el HTML en el elemento de una forma segura . De manera predeterminada , el contenido HTML resultante será renderizado usando el servicio $sce. Para utilizar esta funcionalidad , asegúrese de que $sce está disponible , por ejemplo , mediante la inclusión de ngSanitize en las dependencias. Con el fin de utilizar ngSanitize en las dependencias, es necesario incluir " angulares - sanitize.js " en su aplicación.

IMPLEMETACIÓN ANGULAR JS

Se están haciendo uso de los siguientes fuentes del framework:

• angular.js          
• angular.min.js  
• angular-sanitize.js 

Se implementaron para el manejo interno del aplicativo los siguientes scripts

• services.js
• components.js  
• utilities.js

ARQUITECTURA ANGULAR JS

DEMOS

REFERENCIAS

• https://docs.angularjs.org/guide
• https://github.com/jmcunningham/AngularJS-Learning
• https://egghead.io/

CURSO ONLINE

• http://www.codecademy.com/es/learn/learn-angularjs/topics/your-first-app/exercises/your-first-app-hello-angularjs-i