NDICE

Resumen ...................................................................................................................................... 3 Introduccin ................................................................................................................................. 3 Contenido..................................................................................................................................... 3 Aptana Studio 3 ......................................................................................................................... 3 Angular JS .................................................................................................................................. 4 Css ............................................................................................................................................. 5 JavaScript ................................................................................................................................... 5 Json ........................................................................................................................................... 6 Estructura del Documento .......................................................................................................... 6 Problema ................................................................................................................................... 7 La Solucin ................................................................................................................................. 7 Desarrollo..................................................................................................................................... 8 Aplicacin AngularJS ...................................................................................................................... 8 Proyecto: listado de libros y acceso a su ficha............................................................................. 9 Estructura de ficheros y organizacin ....................................................................................... 10 Inicializacin de la APP. Ng-app............................................................................................... 11 Controlador ............................................................................................................................. 12 Vista......................................................................................................................................... 13 Vista Css................................................................................................................................... 14 Diagrama de componentes de AngularJS.................................................................................. 15 Conclusin ................................................................................................................................. 15 Conclusin Caballero Rivero ngel Alberto ............................................................................... 16 Conclusin Chable Prez Hugo Emanuel ................................................................................... 16 Conclusin Coyoc Gonzlez Julio Gabriel .................................................................................. 16 Conclusin Escalante Nio Jonathan ........................................................................................ 17 Bibliografa Fuentes .................................................................................................................. 17

Resumen
AngularJS es un impresionante framework javascript opensource desarrollado por Google. Un framework para crear Webapps en lenguaje cliente con Javascript ejecutndose con el conocido single-page applications (aplicacin de una sla pgina) que extiende el tradicional HTML con etiquetas propias (directivas) como pueden ser ng-app, ngcontroller, ng-model, ng-view etc.

Introduccin
En este documento, podemos apreciar el uso de AngularJS, un framework que trabaja junto a Javascript, Css, HTML, en el cual podemos hacer Webapps en lenguaje cliente con Javascript. AngularJS desarrollado e impulsado por Google (as que imaginarn el respaldo que tiene) orientado a lo que se llama Single-Page Applications que se traduce en Aplicaciones de una sola Pgina (este tema por s solo merecera otro post). Llamadas as porque todo el sistema reside en un solo archivo HTML, y desde l se llaman a todos los controladores javascript que le dan forma al funcionamiento del sistema. Impresionante, no? Todo el sistema en una sola pgina. Bueno, aunque as se llaman y efectivamente una pgina puede contener todo el sistema, la realidad es que uno puede tener varias pginas Web (especie de mdulos) que juntas forman un amplio sistema Web.

Contenido
Aptana Studio 3
Para poder instalar Aptana Studio solamente tenemos que bajarlo sin necesidad de licencias por que afortunadamente es libre as que no hay ningn problema para poder utilizarlo. Aptana Studio es un entorno de desarrollo integrado de software libre, que puede funcionar bajo Windows, Mac y Linux y provee soporte para lenguajes como: Php, Python, Ruby, CSS, Ajax, HTML y Adobe AIR. Tiene la posibilidad de incluir complementos para nuevos lenguajes y funcionalidades.

Aptana Studio 3 ampla las capacidades centrales para la creacin, edicin, pre visualizar y depuracin de HTML, CSS y JavaScript y sitios web con PHP. Aptana es una muy buena herramienta de desarrollo de cdigo abierto para la web y poder desarrollar aplicaciones web.

ver un espacio de trabajo en blanco, como se muestra a continuacin. A diferencia de otros entornos de desarrollo, la interfaz viene con un fondo negro por defecto, que se supone que es ms fcil en el ojo que el blanco estndar.

Angular JS
AngularJS es un framework JavaScript que corre en el lado del cliente (navegador) y que se centra en intentar dinamizar documentos HTML, lo que por lo general se conoce como DHTML. Normalmente esto se consigue haciendo uso de CSS y JavaScript de forma que, en funcin de los eventos que se produzcan en nuestra pgina (acciones del usuario, respuestas del servidor va AJAX o Websocketsp), se actualizan, crean o eliminan determinados componentes de nuestro documento ya sea una imagen, un prrafo etc. AngularJS se adapta a la perfeccin y encaja a todo lo que habamos ideado. Para los ms flasheros un sustituto ideal con tecnologa estndar web. Es un buen framework ya que para los navegadores como Mozilla Firefox, google, chrome, safari, etc., se adapta perfectamente sin necesidad de que distorsionan las cosas ni se mueven.

Css
CSS es un lenguaje de estilo que define la presentacin de los documentos HTML, CSS abarca cuestiones relativas a fuentes, colores, mrgenes, lneas, altura, anchura, imgenes de fondo, posicionamiento avanzado y muchos otros temas. CSS ofrece ms opciones y es ms preciso y sofisticado. CSS est soportado por todos los navegadores hoy da. Despus de unas cuantas lecciones de este tutorial sers capaz de crear tus propias hojas de estilo usando CSS para dar a tu sitio web un aspecto nuevo y genial.

JavaScript
Javascript es un lenguaje de programacin que permite a los desarrolladores crear acciones en sus pginas web. Con Javascript podemos crear efectos especiales en las pginas y definir interactividades con el usuario.

Json
JSON (JavaScript Object Notation) es un formato de intercambio de datos ligero. Se basa en un subconjunto del lenguaje de programacin JavaScript. Debido a esta similitud, en lugar de utilizar un parser, un programa de JavaScript puede utilizar el built-in funcin eval () y ejecutar datos JSON para producir objetos JavaScript nativos. El formato de texto JSON tambin es sintcticamente idntico al cdigo para la creacin de objetos de JavaScript.

Estructura del Documento

Resulta que para poder desarrollar alguna de las caractersticas de la aplicacin mencionada, requera muchos elementos de programacin del lado del cliente en lenguaje javascript (o sea, programacin a ser ejecutada por el Navegador mismo).

AngularJS est impulsado por Google (as que imaginarn el respaldo que tiene) orientado a lo que se llama Single-Page Applications que se traduce en Aplicaciones de una sola Pgina. Llamadas as porque todo el sistema reside en un solo archivo HTML, y desde l se llaman a todos los controladores javascript que le dan forma al funcionamiento del sistema. Impresionante, no? Todo el sistema en una sola pgina. Bueno, aunque as se llaman y efectivamente una pgina puede contener todo el sistema, la realidad es que uno puede tener varias pginas Web (especie de mdulos) que juntas forman un amplio sistema Web.

Eso da una interactividad enorme a la aplicacin pues mucho de la lgica es ejecutada por el Navegador mismo. AngularJS qued como anillo al dedo para lo que yo requera. Pero lo ms importante para mi fue que en el proceso entend todo lo que significa desarrollar en AngularJS (o con un framework javascript; javascript puro en el caso de AngularJS) y cmo puede interrelacionarse este tipo de aplicaciones con aplicaciones del lado del servidor (como Rails o Yii) basadas en una base de datos central.

Problema
La necesidad de cambiar el modelo cliente/servidor en el desarrollo web, donde toda la lgica de la aplicacin reside en el servidor, para tender hacia un modelo donde la lgica reside en el cliente y permite el uso de aplicaciones web incluso cuando no hay conexin a Internet. Con el auge de los dispositivos mviles el uso de aplicaciones web cuando no hay conexin se convierte en algo necesario. Los navegadores web solo se pueden programar en Javascript y por lo tanto si vamos a desarrollar nuestra aplicacin en Javascript para que est disponible en el lado del cliente, tambin parece lgico desarrollar en dicho lenguaje en el lado del servidor para estandarizar y aprovechar al mximo nuestro conocimiento del lenguaje.

La Solucin
Ninguna tecnologa que permitiese realizar este tipo de desarrollo de forma eficiente y aunque existen muchos framework de desarrollo web en Javascript casi todos se basan en el modelo actual cliente/servidor. AngularJS cambia este tipo de concepto y adems lo hace de una forma eficiente y sencilla. Como principal novedad aporta una extensin del leguaje HTML que le permite manipular datos. Hasta ahora HTML permita un marcado del tipo de datos a representar, su contenido y el aspecto. AngularJS aade el tratamiento de datos a esta ecuacin y el navegador ya dispone de informacin suficiente como para saber cmo mostrar todos los registros de un array o filtrar los registros para mostrar un subconjunto de ellos, por poner 2 ejemplos.

Otra caracterstica relevante es que la conexin entre los datos en el navegador y nuestro modelo se realiza de forma automtica y bidireccional, no tenemos que actualizar de forma manual nada, AngularJS actualizar automticamente nuestra vista cuando se produzcan cambios en el modelo y viceversa. En el modelo actual de desarrollo cualquier cambio en el navegador del cliente implica enviar esos datos al modelo y repintar de nuevo la parte actualizada para reflejar esos cambios. Todo ese trabajo se realiza automticamente en AngularJS sin necesidad de repintar ni actualizar manualmente.

Desarrollo

Aplicacin AngularJS

Este es una aplicacin de HTML utilizando el angular

Esta es el cdigo de la aplicacin, la cual puede ser realizada en aptana o en algno otro, esta es la implementacin la cual es la que utiliza el AngularJS
http://code.angularjs.org/1.0.2/angular.min.js"

Proyecto: listado de libros y acceso a su ficha

La aplicacin final es muy sencilla y similar al tutorial oficial de AngularJS de Google, vamos a intentar hacer un paso a paso en espaol y explicando algunos detalles ms no exclusivamente a nivel de cdigo como la organizacin de los ficheros y clases del framework. La aplicacin consta de un listado de libros obtenido de una peticin ajax a unos datos JSON desde el servidor, adems de un filtrado va javascript y cambio de pgina a la ficha de cada libro.

Estructura de ficheros y organizacin

El framework AngularJS se carga con la inclusin de un nico ficherohttp://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js . Realmente AngularJS no indica (como en otros frameworks) cul sera la estructura de carpetas a seguir. Nosotros hemos planteado la siguiente organizacin por similitud y experiencia en otros frameworks:

Las carpetas del raz son:

css/ estilos CSS de la interfaz data/ ficheros JSON de datos. No sera necesario si invocramos a servicios web. img/ imgenes de los libros lib/ podra haber libreras de javascript comunes a todos los proyectos. No est en este ejemplo. src/ todo el cdigo javascript de nuestra aplicacin index.html HTML principal que carga toda la aplicacin

Realmente la estructura importante es donde se encuentra nuestra aplicacin en src/:

config/ constantes de configuracin como rutas, urls de conexin a WS, etc No utilizado en este ejemplo controllers/ controladores de la app. directives/ componentes o etiquetas extendidas de HTML. No utilizado en este ejemplo filters/ filtros para bsquedas de objetos. No utilizado en este ejemplo lib/ libreras javascript. models/ modelos. No utilizado en este ejemplo, directamente el modelo en el ejemplo es el propio JSON pero se podra encapsular en la carpeta models services/ servicios de la app. Llamadas a los webservices. No utilizado en este ejemplo, las llamadas simples las haremos desde el controlador views/ vistas de la app. Vistas y parciales de vista app.js inicializacin de la aplicacin. Donde se encuentra el routing

Inicializacin de la APP.

Ng-app

Toda la aplicacin pasar siempre por index.html donde cargaremos AngularJS y todas las clases javascripts necesarias. Para que AngularJS haga efecto tenemos que poner la directiva ng-app y para poder referenciarla dar un nombre a nuestra aplicacin, en este caso app: <html lang=es ng-app=app>.

Cargamos los javascript de inicializacin de la aplicacin app.js y los controladores de la aplicacin LibroDetailController.js yLibrosListController.js. Por ltimo definimos el cajn donde los controladores irn cambiando las vistas mediante la directiva de AngularJS ng-view: <div ng-view></div>

Controlador
Mediante el controlador podemos utilizar variables definidas en la vista o crear nuevas variables que sern utilizadas en la vista

Mediante $scope tienes el mbito de la vista. Podemos definir variables para que las utilice la vista con $scope.var1 = mi variable (y en la vista visualizarla con {{var1}} ) o al revs, utilizar variables definidas en la vista como es el caso de $scope.orderField = titulo;. Mediante $http puedes hacer peticiones ajax y recoger sus datos. En el ejemplo solicitamos una peticin a un fichero esttico data/libros.json y se crea una variable llamada libros en la vista con un array de objetos libros: $scope.libros = data; para poder mostrar los libros en la vista como vimos anteriormente. Si nos fijamos en el otro controlador: src/controllers/LibroDetailController.js

Vista
El listado de libros ser la home de nuestra aplicacin. Se llamar al controladorLibrosListController.js y se pintar la vista libroslist.html en ng-view de index.html.

O ser cargados desde un JSON como en el ejemplo data/libros.json. Vista en cual podemos apreciar el codigo en Json, el cual es el que hacer las interacciones con el local Host.

Vista Css
CSS permite separar los contenidos de la pgina y la informacin sobre su aspecto. En el ejemplo anterior, dentro de la propia pgina HTML se crea una zona especial en la que se incluye toda la informacin relacionada con los estilos de la pgina.

Diagrama de componentes de AngularJS

Conclusin
El motivo por el cual se eligi a AngularJS como framework fue el siguiente, AngularJS trabaja con aplicaciones que son muy potentes, amplias, sencilla y actuales en el mbito de la creacin y programacin web. De manera que AngularJS es un potente framework que es privativo de javascript el cual facilita su manejo y hace ms sencilla la creacin de pginas web, de igual forma interacta con Jason, que es un intrprete para una versin ampliada de AgentSpeak. Se implementa la semntica operacional de esa lengua, y proporciona una plataforma para el desarrollo de sistemas multi-agente, con muchas caractersticas personalizables por el usuario. De igual forma contiene mucha ayuda de CSS que es un lenguaje de estilo que define la presentacin de los documentos HTML y Json JSON (JavaScript Object Notation - Notacin de Objetos de JavaScript) es un formato ligero de intercambio de datos. Y el ms importante que el lenguaje nativo con el que trabaja AngularJS, JavaScript Javascript es un lenguaje de programacin que permite a los desarrolladores crear acciones en sus pginas web.

Conclusin Caballero Rivero ngel Alberto

Mi conclusin es que AngularJS es un buen framework de javascript opensource que corre a lado del cliente (navegador) para crear aplicaciones web y programas, ya que utiliza JavaScript el cual agiliza y vuelve ms fcil el manejo a la hora de crear pginas web. AngularJS se centra en intentar dinamizar documentos HTML, utilizando entre ellos Css.

Conclusin Chable Prez Hugo Emanuel

Los grandes avances en el desarrollo de aplicaciones web dan ms y ms peso a Javascript como lenguaje de desarrollo. No voy a entrar en el debate, estril por otra parte, de si Javascript es un lenguaje adecuado y bien construido. AngularJS pone a nuestro alcance la posibilidad de desarrollar aplicaciones web que proporcionan una mejor experiencia a quienes la usan, que debe ser la finalidad de todo desarrollador web. Permite trabajar con el paradigma MVC (modelo vista controlador), extender a nuestro antojo el vocabulario HTML y, es compatible con otras libreras javascript. Un aspecto en el que tambin destaca es la facilidad para modificar el modelo y actualizar directamente la vista. Para trabajar con este framework no se necesitan conocimientos previos de javascript. Adems podemos aprender ms sobre Angular desde la pgina oficial accediendo a la documentacin o al repositorio del proyecto para ver ejemplos de cdigo.

Conclusin Coyoc Gonzlez Julio Gabriel

AngularJS marca la transicin entre pginas webs y aplicaciones web sin recarga de pgina, extendiendo las limitaciones de HTML. Una nueva tecnologa que ser muy utilizada en nitsnets | studios. Con este framework podemos hacer de nuestras pginas una gran pgina web o ms bien llamada Webapps, que bsicamente podemos utilizarlas en dispositivos mviles, asiendo de ellas pequeas aplicaciones mviles las cuales trabajaran de la mano con AngularJS.

Conclusin Escalante Nio Jonathan

AngularJS es un framework de desarrollo de aplicaciones Web en JavaScript basado en el patrn Modelo-Vista-Controlador. A diferencia de otros mtodos, AngularJS nos proporciona una herramienta sencilla para hacer que el cdigo HTML5 sea dinmico, es decir, que se actualice en tiempo real, gracias a las tcnicas de data-binding. Patrn Modelo Vista Controlador se sigue en AngularJS, separando la parte visual de la funcionalidad y las estructuras de datos. El archivo HTML de la aplicacin representa la vista y debe ser separada del controlador y el modelo. El controlador es un objeto JavaScript que debe ser importado en el HTML que se encarga de capturar los eventos de la vista y realizar las acciones pertinentes sobre el modelo para modificar los datos.

Bibliografa Fuentes
Fuentes en las cuales se consultaron las bases e informacin para poder conocer el framework.

http://docs.angularjs.org/tutorial http://docs.angularjs.org/guide/bootstrap http://blog.koalite.com/2013/05/angularjs-conceptos-basicos/ http://angularjs.org/ http://docs.angularjs.org/misc/started https://plus.google.com/+AngularJS/posts/aZNVhj355G2 http://www.wandgo.es/category/utilidades/

http://es.html.net/tutorials/css/lesson1.php http://www.json.org/json-es.html http://www.maestrosdelweb.com/editorial/%C2%BFque-es-javascript/