Descripción general

En este módulo se pondrán en práctica un conjunto de conocimientos orientados el

desarrollo Front End a través de Angular JS.

Se podrán en práctica un conjunto de conocimientos que se profundizará en el

transcurso del módulo.

Los contenidos vistos dentro de este módulo se profundizará con los siguientes.
 Objetivos
Que tenemos que lograr al finalizar este módulo.

Get Started Front End Development

Comenzar a manejar algunos Conocer los límites de lo que se
conceptos básicos de AngularJS. conoce como desarrollo Front End.

Extender conocimiento
Seguir ampliando los conocimientos
adquiridos en los módulos anteriores
. Trabajo en equipo
Comenzar a trabajar en
diferentes sectores del stack.
 Introducción
De que trata el Framework AngularJS

Framework Client-Side de Javascript para construir aplicaciones WEB interactivas.

Facilita la interacción a nivel de datos y de carga de componentes en un sitio WEB.

Originalmente creado por Google y actualmente Open Source.

Pionero en la creación de SPAs.

 Introducción
De que trata el Framework AngularJS

HTML Expresivo: Extensión del lenguaje para mayor claridad y simplicidad

Modularidad: Permite crear y reutilizar conceptos equivalentes en diferentes lugares del código.

Routing orientado a reglas: Se define un conjunto de reglas que guían la navegación en una aplicación.

Data Binding: Define un doble data binding, de las vistas al modelo y viceversa.

Popular: Gran comunidad que apoya al desarrollo de componentes y a la corrección de Bugs.

 Get Started
Comenzando

Generar index.html con incorporación de AngularJS.

Crear y agregar <input> y <label>

Incorporar ngApp para convertir la página en una aplicación AngularJS

Ver como funciona el doble binding a través de ngModel

 Módulos
Como se definen las aplicaciones AngularJS

Define las apps: Todo lo que incluye una aplicación se define como o dentro de un módulo.

Binding de variables: Dentro de los módulos puedo manipular datos para que se reflejan en la vista.

Rastreo de dependencias: Poder inyectar funcionalidades de otros módulos.

Modularización: Permite que las aplicaciones sean modulares.

 Bootstrap
Aplicación de uno de los frameworks CSS más usados.

Mobile-First Popular
Permite construir Amplia comunidad con miles
aplicaciones responsive y de proyectos.
mobile first.

Facilidad
Permite crear rápidamente
Open Source
aplicaciones con diseños pre
Bootstrap es una herramienta
construidos.
open source para desarrollar
con HTML, CSS y JS .
 Container
Orden global de las páginas con Bootstrap

.container .container-fluid
 Grid
Forma de Bootstrap de estructurar la páginas web

col-lg-*

col-md-*

col-sm-*

col-xs-*
 Segundo paso
Codificando módulos y usando Bootstrap

Generar módulo newsApp y agregarlo como ngApp.

Agregar Bootstrap a la página.

Incorporar un Navbar y dos paneles de Noticias destacadas con 3 noticias y Últimas noticias con 6

Agregar a los paneles Thumbnails de noticias en de forma responsive

 Controladores
Forma en que AngularJS da vida a sus páginas web

Modelos Definición
Todos los conceptos que se manejan en las vistas se Se define mediante una función y AngularJS enlaza
definen en los controladores. los comportamientos.

Controller

ngController
Acciones Esta es la directiva que enlaza el DOM con el
Se pueden implementar funciones que se comportamiento que se definió en el controlador..
pueden llamar dentro de flujo de interacción con la
web.
 $scope y Controller AS
Como se maneja el binding AngularJS

$scope.
Binding: A través de $scope, AngularJS realiza en enlace entre controlador y vista.
Inyección: El $scope se inyecta en el controlador pasándolo como parámetro.
No es el modelo: El modelo son los datos que tengamos que enlazar en la vista.

controller As.
AngularJS 1.2.^: Simplifica el manejo del $scope y elimina la necesidad de incorporarlo como parámetro.
Modelo y métodos: Son definidos en el mismo controlador.
Alias del controlador: Vista modelo y métodos usados con el alias del controlador.
 Tercer paso
Usando estructuras iterativas sobre elementos y listas

Generar controller .

Crear controller newsCtrl, agregar script, ngController .

Agrgar un listado de noticias de https://newsapi.org

Usar estructura iterativa ngRepeat para mostrar varias noticias.

Usar directivas orderBy, limitTo, date y traducción de fechas.

 Factory(Service)
Que son las Factories en AngularJS y como se aplican en una Aplicación

Accesso a datos externos $httpBackend

Es el lugar donde se encuentran las interfaces Mecanismo que permite simular llamadas a un Web
que permiten acceder a datos externos.. Service.

Factory

$resource
$http Es una factory de AngularJS que me permite acceder a
Servicio de AngularJS que me recurso de una API REST de forma RestFul..
permite hacer reuquests HTTP.
 $http
Servicio de AngularJS que me permite hacer reuquests HTTP.

Facilita la comunicación con servidores remotos.

Las llamadas son asíncronas.

Cuando el requets es completado se responde con una promesa.

 $httpBackend
Mecanismo que permite simular llamadas a un Web Service

Es una implementación falsa de un BackEnd HTTP.

Simula llamadas a un Web Service.

Retorna datos estáticos a una aplicación a través de ngMock o ngMockE2E.

 Cuarto paso
Usando estructuras iterativas sobre elementos y listas

Crear una factory con un Service .

Implementar el service de manera que me permita cargar un listado de noticias accedido remotamente .
 Let’s works

Maximiliano Alves Pinheiro

CTO TravelPAQ

Juan Manuel Peralta

Info de contacto:
CFO TravelPAQ
jperalta@travelpaq.com.ar malves@travelpaq.la
Cel: 264 5757618
+54 9 343 453 7918