intro-angularjs

View Github Repository Open presentation in a new window

saidgeek

See all presentation from saidgeek

intro-angularjs

0 1

intro-angularjs

Presentacion de introduccion de AngularJS

On Github saidgeek / intro-angularjs

  • Andrés Espinace Sufán
  • @saidGeeK

Introducción a AngularJS

¿Qué es?

Es un Framework Javascript para el desarrollo de aplicaciones por el lado del cliente (Client-Side) de una sola pagina estatica (One-Page).

Los creadores lo definen como un framework tipo MVW.

- Mantenido por Google

MVW?

Paradigma de programación como MVC o MVVC pero en el cual el desarrollador puede estructurar el proyecto como sea, por eso el termino Whatever (Lo que sea)

- Quiere decir que mantiene la logica de MVC pero se puede estructurar como mas te acomode

Filosofía

La programación declarativa debe ser usada para el desarrollo de la aplicación por el lado del cliente en: UI, Componentes.

Por otro lado la programación imperativa debe ser usada por el lado del servidor en la lógica de negocios.

- declarativa: programas para conseguir algo - imperativa: programas las instrucciones para conseguir lo que quieres

El framework adapta y extiende el HTML tradicional para presentar dinamicamente el contenido mediante dos vias de enlaces de datos (two-way data-binding), permitiendo la sincronización automatica de los modelos (Models) y vistas (Views).

- two-way data-binding: actualizacion continua de los datos en el template

Minimizar la manipulación del DOM mejorando la capacidad de testeo y rendimiento de las aplicaciones.

Objetivos

Separar la manipulación del DOM de la logica de la aplicación

- que no sea el servidor que se encargue de renderizar la pagina

Resguardar el testeo de la aplicación, ya que es de igual importancia que la escritura de la misma. La estructura del código dificulta dramaticamente los testings.

- mientras el código de la app este mal etructurado, el testing es cada vez mas complicado

Separa el lado del cliente del lado del servidor, así cada desarrollador puede trabajar de forma paralela y permite la reutilización de código en ambos lados.

Proporcinar una mejor estructura para el desarrollo de la aplicación:

  • Diseño de la interfas de usuario (UI)
  • Lógica de negocios
  • Testeo

Implementar el patrón MVC para la separación de la presentación, los datos y los componentes de la aplicación.

Usa la inyección de dependencias, trayendo los servicios y los controladores al lado del cliente para así disminuir la carga del lado del servidor.

¿Definamos unos conceptos?

Scope

Son los distintos conceptos de ejecución en los que trabajan las expreciones de AngularJS.

Este guarda atributos del modelo que se representaran en la vista y también del atributos que se utilizan para la logica de la app.

- cuando se referencia a un dato del modelo mediente la directiva ng-model, se hace referencia a un atributo en el scope

Controllers

Son los encargados de inicializar y modificar los atributos del scope en función de las necesidades de la aplicación.

Aquí podemos declarar funciones en el scope para luego utilizarlas en la vista.

¿Qué nos ofrece?

Client-side Template

AngularJS es diferente a otros frameworks ya que el se encarga de mezclar las plantillas con los datos que devuelve el modelo de datos, el servidor solo se encarga de proporcionar los contenidos estáticos y la información que se va a representar.

Data binding

Podemos sincronizar el modelo con las vistas utilizando ciertas directivas ng-model, esto se realiza de forma bidireccional.

- bidireccional: se sincroniza tanto si el modelo cambia o si el valor en la vista cambia

Directives

Con ellas manipulamos el DOM, creando nuevos TAG de HTML en diferentes niveles: Element, Attribute, Comment.

- Con ellas se cumple el mayor objectivo, la manipulacion del DOM. - element y attribute son los dos mas importantes

Filters

Nos permiten modificar el modo en el que se presenta la información.

Su sintaxis es muy similar a los Pipeline de Unix.

{{ expresion | filtro }}
- exprecion seria el valor original en una variable del $scope - filtro es el nombre del filtro que se quiere aplicar a la expresion

Services

Son los encargados de comunicarse con el servidor trayendo la información para que los controladores la procesen.

Estos se dividen en tres categorias: Services, Factories, Providers

- $resource: servicio integrado para el manejo de llamadas http a api restfull - $q y promise: permite hacer acciones asincronas pudiendo devolver valores que aun no se han resuelto, esto lo hace en una promesa.

Demo

  • Gabriel Muñoz Madrid
  • @gbelmm

Tecnologias Ocupadas

  • Angular ~1.3.10
  • Angular-route ~1.3.10
  • Angular-material 0.7.0
  • Angular-resource ~1.3.10
  • Angular-local-storage ~0.1.5
  • Angular-material-icons ~0.2.0
  • Angular-youtube-mb ~0.1.6
  • Svg-morpheus ~0.1.8

¿En que conciste la Aplicación?

Un buscador de Peliculas usando AngularJs API

carasteristicas:

  • Buscador Peliculas
  • Polulares
  • Nuevas
  • Por Ranking
  • Próximamente
  • Categorias
  • Detalle Peliculas
  • Detalle Actores

Enlaces recomendados