curso básico de angularjs
Post on 15-Jul-2015
1.903 Views
Preview:
TRANSCRIPT
@carlosazaustre+CarlosAzaustre
Curso de AngularJSCurso de AngularJS
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
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
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
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.
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
Curso de AngularJS @carlosazaustre
¿Qué es AngularJS?
Aplicación Cliente Servidor
HTML
AJAX
JSON
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Modelo
Vista Controlador
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Two-Way Data Binding
<input type=”text” ng-model=”tuNombre”>
<h1>Hello {{tuNombre}}!</h1>
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Inyección de dependencias
angular.module(‘myApp’, [‘ngRoute’]).config(config);
function config($routeProvider) {...
}
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
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>
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Módulos
Módulo (Module)
Config Filter Directive Factory
Service
Provider
Value
Controller
Routes
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Módulos
var miModulo = angular.module(“miModulo”, []);
<html ng-app=”miModulo”>
Curso de AngularJS @carlosazaustre
Conceptos claves de AngularJS
Ejemplo
[{“nombre”: “Sillas”,“cantidad”: 10,“precio”: 25
},{
“nombre”: “Mesas”,“cantidad”: 3,“precio”: 75
}]
Modelo
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
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
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>
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”);
})};
}
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) {. . .
}
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: “/”});
}
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>
Curso de AngularJS @carlosazaustre
Directivas Complejas
Curso de AngularJS @carlosazaustre
Directivas Complejas
Curso de AngularJS @carlosazaustre
Directivas Complejas
Curso de AngularJS @carlosazaustre
Directivas Complejas
Curso de AngularJS @carlosazaustre
Directivas Complejas
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) { … };
}}
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”}};
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
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
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
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
top related