Download - Curso Básico de AngularJS
![Page 1: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/1.jpg)
@carlosazaustre+CarlosAzaustre
Curso de AngularJSCurso de AngularJS
![Page 2: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/2.jpg)
Curso de AngularJS @carlosazaustre
Sobre Mi
Carlos Azaustre
Ingeniero en Telemática
CTO y Cofundador en CheflyFormador Web / Blogger
Mentor en NodeSchool Madrid
Autor deDesarrollo web ágil con Angular.js
Me puedes leer enhttp://carlosazaustre.es
![Page 3: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/3.jpg)
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
![Page 4: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/4.jpg)
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
![Page 5: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/5.jpg)
Curso de AngularJS @carlosazaustre
¿Qué es AngularJS?
Framework MVC desarrollado por Google para el FrontendObjetivo: 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.
![Page 6: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/6.jpg)
Curso de AngularJS @carlosazaustre
¿Qué es AngularJS?
Versiones
1.x y 1.2.x - Deprecadas1.3.x - Versión estable Actual. No da soporte a IE8 e inferiores1.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
![Page 7: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/7.jpg)
Curso de AngularJS @carlosazaustre
¿Qué es AngularJS?
Aplicación Cliente Servidor
HTML
AJAX
JSON
![Page 8: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/8.jpg)
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Modelo
Vista Controlador
![Page 9: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/9.jpg)
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Two-Way Data Binding
<input type=”text” ng-model=”tuNombre”>
<h1>Hello {{tuNombre}}!</h1>
![Page 10: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/10.jpg)
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Inyección de dependencias
angular.module(‘myApp’, [‘ngRoute’]).config(config);
function config($routeProvider) {...
}
![Page 11: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/11.jpg)
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Directivas
<html ng-app>
<html data-ng-app>
<html ng-app=””>
<html ng-app=”myApp”>
ng-hide
ng-href
ng-src
ng-submit
ng-controller
ng-repeat
ng-model
ng-show
![Page 12: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/12.jpg)
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Controladores
<body ng-app=”myApp”><div ng-controller=”TituloController”>
<h1>{{titulo}}</h1></div><script>
var texto = “Esto es el título”;function TituloController($scope) {
$scope.titulo = texto;}
</script></body>
![Page 13: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/13.jpg)
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Módulos
Módulo (Module)
Config Filter Directive Factory
Service
Provider
Value
Controller
Routes
![Page 14: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/14.jpg)
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Módulos
var miModulo = angular.module(“miModulo”, []);
<html ng-app=”miModulo”>
![Page 15: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/15.jpg)
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Ejemplo
[{“nombre”: “Sillas”,“cantidad”: 10,“precio”: 25
},{
“nombre”: “Mesas”,“cantidad”: 3,“precio”: 75
}]
Modelo
![Page 16: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/16.jpg)
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Ejemplo
<body ng-app=”appInventario”><h1>Listado de Productos</h1><ul ng-controller=”ListadoController”>
<li ng-repeat=”producto in productos”><span>Nombre: {{ producto.nombre }}</span><br/><span>Cantidad: {{ producto.cantidad }}</span><br/><span>Precio: {{ producto.precio }}</span>
</li></ul>
</body>
Vista
![Page 17: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/17.jpg)
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Ejemplo
angular.module(‘appInventario’, []).controller(‘ListaController’, ListaController);
function ListaController($scope, $http) {$http
.get(“inventario.json”)
.success(function(data) {$scope.productos = data;
});}
Controlador
![Page 18: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/18.jpg)
Curso de AngularJS @carlosazaustre
Formularios
<div ng-controller=”FormController”><form ng-submit=”guardar()”>
Nombre: <input type=”text” ng-model=”usuario.nombre” />Email: <input type=”text” ng-model=”usuario.email” />Contraseña: <input type=”password” ng-model=”usuario.pass” />
<button ng-click=”deshacer()”>Deshacer</button><input type=”submit” value=”Guardar” />
</form></div>
![Page 19: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/19.jpg)
Curso de AngularJS @carlosazaustre
Formularios
angular.module(“myApp”, []).controller(“FormController”, FormController);
function FormController($scope, $http) {$scope.deshacer = function() {
$scope.usuario = {};};
$scope.guardar = function() {$http
.post(“http://servidor.com/usuarios”, $scope.usuario)
.success(function() {console.log(“Usuario guardado”);
})};
}
![Page 20: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/20.jpg)
Curso de AngularJS @carlosazaustre
Rutas (ngRoute)
<body ng-app=”myApp”><div ng-view></div>
</body>
<script src=”angular.js”></script><script src=”angular-route.js”></script>
angular.module(“myApp”, [“ngRoute”])
function config($routeProvider) {. . .
}
![Page 21: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/21.jpg)
Curso de AngularJS @carlosazaustre
Rutas (ngRoute)
function config($routeProvider) {$routeProvider
.when(“/”, {templateUrl: “ruta/plantilla.html”,controller: “NombreController”,controllerAs: “nombre”
}).when(“/usuario/:usuarioID”, {
templateUrl: “ruta/otra-plantilla.html”,controller: “OtroController”,controllerAs: “otro”
}).otherwise({
redirectTo: “/”});
}
![Page 22: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/22.jpg)
Curso de AngularJS @carlosazaustre
Creación de Directivas
angular.module(“myApp”, []).directive(“miDirectiva”, miDirectiva);
function miDirectiva() {return {
restrict: ‘E’,replace: true,templateUrl: ‘ruta/mi-directiva.html’
}}
<ul><li>Elemento 1</li><li>Elemento 2</li><li>Elemento 3</li>
</ul>
<mi-directiva></mi-directiva>
![Page 23: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/23.jpg)
Curso de AngularJS @carlosazaustre
Directivas Complejas
![Page 24: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/24.jpg)
Curso de AngularJS @carlosazaustre
Directivas Complejas
![Page 25: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/25.jpg)
Curso de AngularJS @carlosazaustre
Directivas Complejas
![Page 26: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/26.jpg)
Curso de AngularJS @carlosazaustre
Directivas Complejas
![Page 27: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/27.jpg)
Curso de AngularJS @carlosazaustre
Directivas Complejas
![Page 28: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/28.jpg)
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) { … };
}}
![Page 29: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/29.jpg)
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”}};
![Page 30: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/30.jpg)
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
![Page 31: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/31.jpg)
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
![Page 32: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/32.jpg)
Curso de AngularJS @carlosazaustre
Entorno de trabajo
Instalar Node.jshttps://nodejs.org/download/
Instalar GulpJSAutomatizador de tareasnpm install -g gulp
Instalar BowerGestor de dependencias para Frontendnpm install -g bower
![Page 33: Curso Básico de AngularJS](https://reader034.vdocumento.com/reader034/viewer/2022042615/55a639201a28ab6b1e8b47ad/html5/thumbnails/33.jpg)
Curso de AngularJS @carlosazaustre
Aplicación de ejemplo
Aplicación web SPAListado de empleados con fichas de cada uno y
enlaces con las personas a cargo
bit.ly/vector-angular