articulo tecnico carpizo
TRANSCRIPT
ÍNDICE
Resumen ...................................................................................................................................... 3
Introducción ................................................................................................................................. 3
Contenido ..................................................................................................................................... 3
Aptana Studio 3 ......................................................................................................................... 3
Angular JS .................................................................................................................................. 4
Css ............................................................................................................................................. 5
JavaScript ................................................................................................................................... 5
Json ........................................................................................................................................... 6
Estructura del Documento .......................................................................................................... 6
Problema ................................................................................................................................... 7
La Solución ................................................................................................................................. 7
Desarrollo ..................................................................................................................................... 8
Aplicación AngularJS ...................................................................................................................... 8
Proyecto: listado de libros y acceso a su ficha............................................................................. 9
Estructura de ficheros y organización ....................................................................................... 10
Inicialización de la APP. Ng-app............................................................................................... 11
Controlador ............................................................................................................................. 12
Vista......................................................................................................................................... 13
Vista Css ................................................................................................................................... 14
Diagrama de componentes de AngularJS .................................................................................. 15
Conclusión ................................................................................................................................. 15
Conclusión Caballero Rivero Ángel Alberto ............................................................................... 16
Conclusión Chable Pérez Hugo Emanuel ................................................................................... 16
Conclusión Coyoc González Julio Gabriel .................................................................................. 16
Conclusión Escalante Niño Jonathan ........................................................................................ 17
Bibliografía Fuentes .................................................................................................................. 17
Resumen
AngularJS es un impresionante framework javascript opensource desarrollado por Google.
Un framework para crear Webapps en lenguaje cliente con Javascript ejecutándose con el
conocido single-page applications (aplicación de una sóla página) que extiende el
tradicional HTML con etiquetas propias (directivas) como pueden ser ng-app, ng-
controller, ng-model, ng-view etc.
Introducción
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 imaginarán el
respaldo que tiene) orientado a lo que se llama “Single-Page Applications” que se traduce
en Aplicaciones de una sola Página (este tema por sí solo merecería 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 página. Bueno, aunque así se llaman y
efectivamente una página puede contener todo el sistema, la realidad es que uno puede
tener varias páginas Web (especie de módulos) 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 ningún 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 amplía las capacidades
centrales para la creación, edición, pre
visualizar y depuración de HTML, CSS y
JavaScript y sitios web con PHP.
Aptana es una muy buena herramienta
de desarrollo de código abierto para la
web y poder desarrollar aplicaciones
web.
verá un espacio de trabajo en blanco,
como se muestra a continuación. A diferencia de otros entornos de desarrollo, la interfaz viene
con un fondo negro por defecto, que se supone que es más fácil en el ojo que el blanco estándar.
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 función
de los eventos que se produzcan en nuestra
página (acciones del usuario, respuestas del
servidor vía AJAX o Websocketsp), se
actualizan, crean o eliminan determinados
componentes de nuestro documento ya sea
una imagen, un párrafo etc.
AngularJS se adapta a la perfección y encaja a
todo lo que habíamos ideado. Para los más
flasheros un sustituto ideal con tecnología estándar 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 presentación de los documentos HTML, CSS abarca
cuestiones relativas a fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo,
posicionamiento avanzado y muchos otros
temas.
CSS ofrece más opciones y es más preciso y
sofisticado. CSS está soportado por todos los
navegadores hoy día.
Después de unas cuantas lecciones de este
tutorial serás 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 programación que permite a los desarrolladores crear acciones en sus
páginas web. Con Javascript podemos crear efectos especiales en las páginas 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 programación
JavaScript.
Debido a esta similitud, en lugar de utilizar un
parser, un programa de JavaScript puede utilizar
el built-in función eval () y ejecutar datos JSON
para producir objetos JavaScript nativos.
El formato de texto JSON también es
sintácticamente idéntico al código para la
creación de objetos de JavaScript.
Estructura del Documento
Resulta que para poder desarrollar alguna de las características de la aplicación mencionada,
requería muchos elementos de programación del lado del cliente en lenguaje javascript (o sea,
programación a ser ejecutada por el Navegador mismo).
AngularJS está impulsado por Google (así que imaginarán el respaldo que tiene) orientado a lo que
se llama “Single-Page Applications” que se traduce en Aplicaciones de una sola Página. 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 página. Bueno, aunque así se llaman y efectivamente una página
puede contener todo el sistema, la realidad es que uno puede tener varias páginas Web (especie
de módulos) que juntas forman un amplio sistema Web.
Eso da una interactividad enorme a la aplicación pues mucho de la lógica es ejecutada por el
Navegador mismo. AngularJS quedó como “anillo al dedo” para lo que yo requería. Pero lo más
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 cómo 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 lógica de
la aplicación reside en el servidor, para tender hacia un modelo donde la lógica reside en el cliente
y permite el uso de aplicaciones web incluso cuando no hay conexión a Internet. Con el auge de
los dispositivos móviles el uso de aplicaciones web cuando no hay conexión se convierte en algo
necesario.
Los navegadores web solo se pueden programar en Javascript y por lo tanto si vamos a desarrollar
nuestra aplicación en Javascript para que esté disponible en el lado del cliente, también parece
lógico desarrollar en dicho lenguaje en el lado del servidor para estandarizar y aprovechar al
máximo nuestro conocimiento del lenguaje.
La Solución
Ninguna tecnología 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 además lo hace de una forma eficiente y sencilla. Como
principal novedad aporta una extensión del leguaje HTML que le permite manipular datos.
Hasta ahora HTML permitía un marcado del tipo de datos a representar, su contenido y el aspecto.
AngularJS añade el tratamiento de datos a esta ecuación y el navegador ya dispone de información
suficiente como para saber cómo mostrar todos los registros de un array o filtrar los registros para
mostrar un subconjunto de ellos, por poner 2 ejemplos.
Otra característica relevante es que la conexión entre los datos en el navegador y nuestro
modelo se realiza de forma automática y bidireccional, no tenemos que actualizar de forma
manual nada, AngularJS actualizará automáticamente 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 automáticamente en AngularJS sin necesidad de repintar
ni actualizar manualmente.
Desarrollo
Aplicación AngularJS
Este es una aplicación de HTML utilizando el angular
Esta es el código de la aplicación, la cual puede ser realizada en aptana o en
algúno otro, esta es la implementación 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 aplicación final es muy sencilla y similar al tutorial oficial de AngularJS de Google,
vamos a intentar hacer un paso a paso en español y explicando algunos detalles más no
exclusivamente a nivel de código como la organización de los ficheros y clases del
framework. La aplicación consta de un listado de libros obtenido de una petición ajax a
unos datos JSON desde el servidor, además de un filtrado vía javascript y cambio de
página a la ficha de cada libro.
Estructura de ficheros y organización
El framework AngularJS se carga con la inclusión de un único
ficherohttp://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js. Realmente
AngularJS no indica (como en otros frameworks) cuál sería la estructura de carpetas a
seguir. Nosotros hemos planteado la siguiente organización por similitud y experiencia en
otros frameworks:
Las carpetas del raíz son:
css/ estilos CSS de la interfaz
data/ ficheros JSON de datos. No sería necesario si invocáramos a servicios web.
img/ imágenes de los libros
lib/ podría haber librerías de javascript comunes a todos los proyectos. No está en
este ejemplo.
src/ todo el código javascript de nuestra aplicación
index.html HTML principal que carga toda la aplicación
Realmente la estructura importante es donde se encuentra nuestra aplicación en src/:
config/ constantes de configuración como rutas, urls de conexión 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 búsquedas de objetos. No utilizado en este ejemplo
lib/ librerías javascript.
models/ modelos. No utilizado en este ejemplo, directamente el modelo en el
ejemplo es el propio JSON pero se podría 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 inicialización de la aplicación. Donde se encuentra el routing
Inicialización de la APP. Ng-app
Toda la aplicación 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 aplicación, en este
caso app: <html lang=”es” ng-app=”app”>.
Cargamos los javascript de inicialización de la aplicación app.js y los controladores de la
aplicación LibroDetailController.js yLibrosListController.js.
Por último definimos el cajón donde los controladores irán 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 serán 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 revés, 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 petición a un fichero estático 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 aplicación. Se llamará al controladorLibrosListController.js y se pintará la vista libros-
list.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 página y la información sobre su
aspecto. En el ejemplo anterior, dentro de la propia página HTML se crea una
zona especial en la que se incluye toda la información relacionada con los estilos
de la página.
Diagrama de componentes de AngularJS
Conclusión
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 creación y
programación web. De manera que AngularJS es un potente framework que es privativo de
javascript el cual facilita su manejo y hace más sencilla la creación de páginas web, de igual forma
interactúa con Jason, que es un intérprete para una versión ampliada de AgentSpeak. Se
implementa la semántica operacional de esa lengua, y proporciona una plataforma para el
desarrollo de sistemas multi-agente, con muchas características personalizables por el usuario. De
igual forma contiene mucha ayuda de CSS que es un lenguaje de estilo que define la presentación
de los documentos HTML y Json JSON (JavaScript Object Notation - Notación de Objetos de
JavaScript) es un formato ligero de intercambio de datos. Y el más importante que el lenguaje
nativo con el que trabaja AngularJS, JavaScript
Javascript es un lenguaje de programación que permite a los desarrolladores crear acciones en sus
páginas web.
Conclusión Caballero Rivero Ángel Alberto
Mi conclusión 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 más fácil el manejo a la hora de crear páginas
web. AngularJS se centra en intentar dinamizar documentos HTML, utilizando entre ellos
Css.
Conclusión Chable Pérez Hugo Emanuel
Los grandes avances en el desarrollo de aplicaciones web dan más y más peso a
Javascript como lenguaje de desarrollo. No voy a entrar en el debate, estéril 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 librerías
javascript. Un aspecto en el que también 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.
Además podemos aprender más sobre Angular desde la página oficial accediendo a la
documentación o al repositorio del proyecto para ver ejemplos de código.
Conclusión Coyoc González Julio Gabriel
AngularJS marca la transición entre páginas webs y aplicaciones web sin
recarga de página, extendiendo las limitaciones de HTML. Una nueva
tecnología que será muy utilizada en nitsnets | studios.
Con este framework podemos hacer de nuestras páginas una gran página web
o más bien llamada Webapps, que básicamente podemos utilizarlas en
dispositivos móviles, asiendo de ellas pequeñas aplicaciones móviles las cuales
trabajaran de la mano con AngularJS.
Conclusión Escalante Niño Jonathan
AngularJS es un framework de desarrollo de aplicaciones Web en JavaScript basado en
el patrón Modelo-Vista-Controlador. A diferencia de otros métodos, AngularJS nos
proporciona una herramienta sencilla para hacer que el código HTML5 sea dinámico, es
decir, que se actualice en tiempo real, gracias a las técnicas de data-binding.
Patrón Modelo Vista Controlador se sigue en AngularJS, separando la parte visual de la
funcionalidad y las estructuras de datos.
El archivo HTML de la aplicación 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.
Bibliografía Fuentes
Fuentes en las cuales se consultaron las bases e información 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/