Este documento introduce AngularJS, incluyendo herramientas recomendadas como Chrome y la extensión Batarang, cómo incluir el archivo JS de Angular, cómo declarar módulos y aplicaciones, la arquitectura MVC, controladores, enlace de datos, filtros, valores, fábricas, servicios y proveedores, y enlaces de datos unidireccionales y bidireccionales. También proporciona enlaces a ejemplos y documentación adicional.
Introducción al Framework de Google AngularJS que permite crear aplicaciones de rápida respuesta, del lado cliente, sobretodo del tipo SPA (Single Page Application).
Overview sobre AngularJS, componentes, comparación con otros frameworks y su variante a móviles.
AngularJS es un framework completo para el lado del frontend, y difícil de poder explicarlo en un solo slide, esta es una breve introducción a este maravilloso framework javascript que permite hacer cosas geniales.
Cualquier consulta estoy en twitter @feluis23
Introducción al Framework de Google AngularJS que permite crear aplicaciones de rápida respuesta, del lado cliente, sobretodo del tipo SPA (Single Page Application).
Overview sobre AngularJS, componentes, comparación con otros frameworks y su variante a móviles.
AngularJS es un framework completo para el lado del frontend, y difícil de poder explicarlo en un solo slide, esta es una breve introducción a este maravilloso framework javascript que permite hacer cosas geniales.
Cualquier consulta estoy en twitter @feluis23
AngularJS es uno de los frameworks para construir aplicaciones web más populares de hoy en día. Fue creado y es mantenido por Google, es Open Source y tiene una enorme comunidad de desarrolladores.
Estas son las slides que sirven como introducción al curso de AngularJS que se dictará durante el mes de julio de 2015 en laofi.co (Ramos Mejía, Buenos Aires).
Evento del curso: https://www.facebook.com/events/1406733769656432/
Agenda:
* Historia de las Apps Webs
* ¿Por qué AngularJS?
* Building Blocks
* Herramientas
¿De qué trata el Curso?
=========================
En este curso vas a aprender a programar el Front-End de una aplicación web completa con AngularJS. Analizaremos ejemplos y programaremos juntos. Además, veremos herramientas que facilitarán el desarrollo, como npm, NodeJS, Bower, Grunt, Yeoman y Gulp, y un vistazo a lo que se viene en este fascinante mundo en constante evolución.
Recursos:
* Mi estante AngularJS en VolKno: http://www.volkno.com.ar/u/elfrasco/angularjs
* El código fuente que veremos en el curso (en progreso): https://github.com/elfrasco/angular-course
* ng-newsletter (super recomendado): http://www.ng-newsletter.com/
Presentación realizada en algunas empresas de desarrollo software de Alicante para exponer lo conveniente que es aplicar la arquitectura a tres capas con AngularJS y el resto del fullStack Javascript.
Conferencia sobre los conceptos básicos de Angular.js dictada por Jeison Castañeda miembro del GDG Cali. El código fuente se encuentra en https://github.com/gdgcali/IntegrantesGDG
Cómo integrar AngularJS con una instalación de Drupal 7 a través de views y services o cómo agregarle a una web estándar las características de una aplicación HTML5.
AngularJS es uno de los frameworks para construir aplicaciones web más populares de hoy en día. Fue creado y es mantenido por Google, es Open Source y tiene una enorme comunidad de desarrolladores.
Estas son las slides que sirven como introducción al curso de AngularJS que se dictará durante el mes de julio de 2015 en laofi.co (Ramos Mejía, Buenos Aires).
Evento del curso: https://www.facebook.com/events/1406733769656432/
Agenda:
* Historia de las Apps Webs
* ¿Por qué AngularJS?
* Building Blocks
* Herramientas
¿De qué trata el Curso?
=========================
En este curso vas a aprender a programar el Front-End de una aplicación web completa con AngularJS. Analizaremos ejemplos y programaremos juntos. Además, veremos herramientas que facilitarán el desarrollo, como npm, NodeJS, Bower, Grunt, Yeoman y Gulp, y un vistazo a lo que se viene en este fascinante mundo en constante evolución.
Recursos:
* Mi estante AngularJS en VolKno: http://www.volkno.com.ar/u/elfrasco/angularjs
* El código fuente que veremos en el curso (en progreso): https://github.com/elfrasco/angular-course
* ng-newsletter (super recomendado): http://www.ng-newsletter.com/
Presentación realizada en algunas empresas de desarrollo software de Alicante para exponer lo conveniente que es aplicar la arquitectura a tres capas con AngularJS y el resto del fullStack Javascript.
Conferencia sobre los conceptos básicos de Angular.js dictada por Jeison Castañeda miembro del GDG Cali. El código fuente se encuentra en https://github.com/gdgcali/IntegrantesGDG
Cómo integrar AngularJS con una instalación de Drupal 7 a través de views y services o cómo agregarle a una web estándar las características de una aplicación HTML5.
Una introducción a AngularJS. Presentación base de una charla/curso para Intel, Costa Rica. Marzo del 2014. Presenta una introducción a los conceptos principales para empezar a utilizar AngularJS en el desarrollo de aplicaciones Web.
Seminario
Diseño para la Web: WWW y HTML
Gestores de Contenido CMS: Blogs
Semiario dentro de grados
- bellas artes: Creación multimedia Interactiva
- Comunicacion audiovisual
Particularmente jQuery es uno de los Framework o Librería JavaScript más usado que existen en la actualidad, aunque no trae incorporado la arquitectura MVC podemos usarlo con este diseño y mejorar la organización y desacoplamiento de las funciones de nuestras aplicaciones.
4. Módulo
Forma de organizar el código y la lógica
Patrón Requiere
DI (Inyección de dependencias)
angular.module(‘myApp’, […], function (…) {…})
5. Arquitectura
Arquitectura MVC, MVVM / MVW (Model-View-Whatever)
Model (scope)
Información del sistema con la que se hace binding en la parte visual
View (HTML + CSS + JS de aspectos visuales)
Define el aspecto visual de la información
ViewModel / Whatever (Controllers + scope)
Lógica de presentación de la ventana para gestionar el flujo
Comunicación con servicios que se inyectarían
Código lo más liviano posible
6. HTML + CSS + JS de aspecto visual
Define cómo se van a ver las cosas
Se puede utilizar cualquier tipo de plantilla como bootstrap
El equipo de angular ha definido directivas para trabajar con bootstrap
El enlace entre el V y el VM se realiza con
ngController
Directivas (AECM)
7. Controllers
Gestiona el flujo de la parte de presentación
Se le pueden inyectar:
Values / Constants
Definición y reutilización de valores
Factories / Services
Encapsulamiento y reutilización de código
Objetos de js
Factory implementa el patrón Factory
Service imlementa el patrón Constructor
Es la pieza donde está la lógica de presentación
Se enlaza con los servicios que se han inyectado previamente
8. Scope
Datos que se quieren mostrar
Uso desde HTML
Bindings
Isolated Scope
Herencia
$parent
$rootScope
9. Bindings I
Enlaza la información qué se quiere mostrar y el aspecto cómo se quiere
mostrar
One-way binding
ngBind / Mustache {{…}}
Two-way binding
ngModel
Dirty checking
$apply
10. Bindings II
Colecciones
ngOptions (select)
ngRepeat (li o tr)
Binding a atributos
ngClick
ngHref, ngSrc
ngStyle, ngClass
Forms
Validations
ngSubmit
11. Filters
Se utiliza para transformar la información del scope al formato que se quiera
visualizar
<span>{{name| pascalize}}</span>
Se usa para:
Formatear visualmente los datos
Filtrar u ordenar listas
12. Value / Constants
Sirve para reutilizar y compartir valores
Se inyecta en los controladores
Value
Define valores para run-time
Constants
Define valores para run-time y configuration-time
http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider
13. Factory / Service / Provider
Sirve para encapsular y reutilizar código
Se inyecta en los controladores
Singleton
Factory
Patrón module de js
Service
Patrón constructor de js
Provider
Puede utilizar configuración gobal
http://blogs.clevertech.biz/startupblog/angularjs-factory-service-provider
14. Factory / Service / Provider
Factory Service Value Constant Provider
can have dependencies yes yes no no yes
uses type friendly injection no yes yes* yes* no
object available in config phase no no no yes yes**
can create functions/primitives yes no yes yes yes
* at the cost of eager initialization by using new operator directly
** the service object is not available during the config phase, but the provider instance is
https://docs.angularjs.org/guide/providers
15. Bibliografía
Ejemplos de la charla
http://jsfiddle.net/user/pedrohurtado/fiddles/
Sitio oficial
http://www.angular.js
Chrome y extension Batarang
http://www.chorme.com
https://chrome.google.com/webstore/detail/angularjs-
batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=es