O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Curso Básico de AngularJS

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Próximos SlideShares
AngularJS
AngularJS
Carregando em…3
×

Confira estes a seguir

1 de 33 Anúncio
Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (20)

Semelhante a Curso Básico de AngularJS (20)

Anúncio

Mais de Carlos Azaustre (13)

Mais recentes (20)

Anúncio

Curso Básico de AngularJS

  1. 1. @carlosazaustre +CarlosAzaustre Curso de AngularJSCurso de AngularJS
  2. 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. 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. 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. 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. 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. 7. Curso de AngularJS @carlosazaustre ¿Qué es AngularJS? Aplicación Cliente Servidor HTML AJAX JSON
  8. 8. Curso de AngularJS @carlosazaustre Conceptos claves de AngularJS Modelo Vista Controlador
  9. 9. Curso de AngularJS @carlosazaustre Conceptos claves de AngularJS Two-Way Data Binding <input type=”text” ng-model=”tuNombre”> <h1>Hello {{tuNombre}}!</h1>
  10. 10. Curso de AngularJS @carlosazaustre Conceptos claves de AngularJS Inyección de dependencias angular .module(‘myApp’, [‘ngRoute’]) .config(config); function config($routeProvider) { ... }
  11. 11. 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
  12. 12. 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>
  13. 13. Curso de AngularJS @carlosazaustre Conceptos claves de AngularJS Módulos Módulo (Module) Config Filter Directive Factory Service Provider Value Controller Routes
  14. 14. Curso de AngularJS @carlosazaustre Conceptos claves de AngularJS Módulos var miModulo = angular.module(“miModulo”, []); <html ng-app=”miModulo”>
  15. 15. Curso de AngularJS @carlosazaustre Conceptos claves de AngularJS Ejemplo [{ “nombre”: “Sillas”, “cantidad”: 10, “precio”: 25 }, { “nombre”: “Mesas”, “cantidad”: 3, “precio”: 75 }] Modelo
  16. 16. 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
  17. 17. 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
  18. 18. 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>
  19. 19. 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”); }) }; }
  20. 20. 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) { . . . }
  21. 21. 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: “/” }); }
  22. 22. 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>
  23. 23. Curso de AngularJS @carlosazaustre Directivas Complejas
  24. 24. Curso de AngularJS @carlosazaustre Directivas Complejas
  25. 25. Curso de AngularJS @carlosazaustre Directivas Complejas
  26. 26. Curso de AngularJS @carlosazaustre Directivas Complejas
  27. 27. Curso de AngularJS @carlosazaustre Directivas Complejas
  28. 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. 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. 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. 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. 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. 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

×