2. Curso de AngularJS @carlosazaustre
Sobre Mi
Carlos Azaustre
Ingeniero en Telemática
CTO y Cofundador en Chefly
Formador Web / Blogger
Mentor en NodeSchool Madrid
Autor de
Desarrollo web ágil con Angular.js
Me puedes leer en
http://carlosazaustre.es
3. Curso de AngularJS @carlosazaustre
Temario
1. Introducción a AngularJS
2. Conceptos claves de AngularJS
3. Configuración básica de una App
4. Uso de formularios
5. Rutas con ngRoute
6. Directivas
7. Estructura de archivos
8. Aplicación de Ejemplo
9. Servicios para acceder a un API REST
10. Preparación para Despliegue en Producción
4. Curso de AngularJS @carlosazaustre
Agenda
10h - 14h
Presentación
Conceptos Clave
Ejemplo
14h - 15h
Pausa para comer
15h - 18h
Formularios
Rutas
Estructura
Servicios
Día 14 Día 15
10h - 14h
Herramientas (GulpJS)
Entorno de Desarrollo
Enunciado del Ejemplo
14h - 15h
Pausa para comer
15h -18h
Desarrollo del Ejemplo
Preguntas y Dudas
Día 16
10h - 14h
Desarrollo del Ejemplo
Preguntas y Dudas
Revisión temas
5. Curso de AngularJS @carlosazaustre
¿Qué es AngularJS?
Framework MVC desarrollado por Google para el Frontend
Objetivo: Ser modular y tener una estructura de archivos
Ideal para hacer aplicaciones web con mucho consumo de datos, editado, borrado,
etc.. Aplicaciones CRUD (Create, Read, Update, Delete)
No es bueno para sitios de contenido que se quiera posicionar (SEO, Blogs,
Websites, etc..)
JavaScript renderiza las páginas en el cliente, por lo que los rastreadores de Google
no pueden indexar ese contenido.
6. Curso de AngularJS @carlosazaustre
¿Qué es AngularJS?
Versiones
1.x y 1.2.x - Deprecadas
1.3.x - Versión estable Actual. No da soporte a IE8 e inferiores
1.4.x - En Beta.
2.0 - Versión en Desarrollo. Cambia completamente.
Utiliza ECMAScript6 y WebComponents
1.5.x - Futuras versiones para hacer el tránsito a la 2.0 más cómodo.
1.6.x
7. Curso de AngularJS @carlosazaustre
¿Qué es AngularJS?
Aplicación Cliente Servidor
HTML
AJAX
JSON
8. Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Modelo
Vista Controlador
9. Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Two-Way Data Binding
<input type=”text” ng-model=”tuNombre”>
<h1>Hello {{tuNombre}}!</h1>
10. Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Inyección de dependencias
angular
.module(‘myApp’, [‘ngRoute’])
.config(config);
function config($routeProvider) {
...
}
28. Curso de AngularJS @carlosazaustre
Servicios para acceder a datos
angular
.module(“myApp”, [])
.factory(“dataService”, dataService);
function dataService($http) {
return {
getListado: getListado
};
function getListado() {
return $http
.get(“http://servicio.com/listado”)
.then(getListadoComplete)
.catch(getListadoError);
function getListadoComplete(response) {
return response.data.results;
}
function getListadoError(error) { … };
}
}
29. Curso de AngularJS @carlosazaustre
Servicios para acceder a datos (usando ngResource)
angular
.module(“myApp”, [“ngResource”])
.factory(“dataService”, dataService);
function dataService($resource) {
return $resource(“http://servidor.com/recursos/”, {
recursoId: “@id”
});
}
{
“get”: {method: “GET”},
“save”: {method: “POST”},
“query”: {method: “GET”, isArray:true},
“remove”: {method: “DELETE”},
“delete”: {method: “DELETE”}
};
30. Curso de AngularJS @carlosazaustre
Estructura de Archivos y Carpetas
- app/
- assets/ (Imágenes, Videos, Ficheros,...)
- js/
- app.js
- controllers.js
- services.js
- views/ (Plantillas HTML)
Organización por tipo
31. Curso de AngularJS @carlosazaustre
Estructura de Archivos y Carpetas
- app/
- app.module.js
- app.config.js
- components/
- perfil-usuario.directive.js
- perfil-usuario.directive.html
- calendario.directive.js
- calendario.directive.html
- articulos/
- articulos.routes.js
- articulos.html
- articulos.controller.js
- articulo-detalle.html
- articulo-detalle.js
- usuarios/
- usuarios.routes.js
- usuarios.html
- usuarios.controller.js
Organización por funcionalidad
32. Curso de AngularJS @carlosazaustre
Entorno de trabajo
Instalar Node.js
https://nodejs.org/download/
Instalar GulpJS
Automatizador de tareas
npm install -g gulp
Instalar Bower
Gestor de dependencias para Frontend
npm install -g bower
33. Curso de AngularJS @carlosazaustre
Aplicación de ejemplo
Aplicación web SPA
Listado de empleados con fichas de cada uno y
enlaces con las personas a cargo
bit.ly/vector-angular