Curso Básico de AngularJS

@carlosazaustre
+CarlosAzaustre
Curso de AngularJSCurso de AngularJS

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

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

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

¿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.

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

Aplicación Cliente Servidor
HTML
AJAX
JSON

Conceptos claves de AngularJS
Modelo
Vista Controlador

Two-Way Data Binding
<input type=”text” ng-model=”tuNombre”>
<h1>Hello {{tuNombre}}!</h1>

Inyección de dependencias
angular
.module(‘myApp’, [‘ngRoute’])
.config(config);
function config($routeProvider) {
...
}

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

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>

Módulos
Módulo (Module)
Config Filter Directive Factory
Service
Provider
Value
Controller
Routes

Módulos
var miModulo = angular.module(“miModulo”, []);
<html ng-app=”miModulo”>

Ejemplo
[{
“nombre”: “Sillas”,
“cantidad”: 10,
“precio”: 25
},
{
“nombre”: “Mesas”,
“cantidad”: 3,
“precio”: 75
}]
Modelo

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

Ejemplo
angular
.module(‘appInventario’, [])
.controller(‘ListaController’, ListaController);
function ListaController($scope, $http) {
$http
.get(“inventario.json”)
.success(function(data) {
$scope.productos = data;
});
}
Controlador

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>

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”);
})
};
}

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”])
. . .
}

Rutas (ngRoute)
$routeProvider
.when(“/”, {
templateUrl: “ruta/plantilla.html”,
controller: “NombreController”,
controllerAs: “nombre”
})
.when(“/usuario/:usuarioID”, {
templateUrl: “ruta/otra-plantilla.html”,
controller: “OtroController”,
controllerAs: “otro”
})
.otherwise({
redirectTo: “/”
});
}

Creación de Directivas
angular
.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>

Directivas Complejas

Servicios para acceder a datos
angular
.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) { … };
}
}

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”}
};

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

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

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

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

Curso Básico de AngularJS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Curso Básico de AngularJS

Similar a Curso Básico de AngularJS (20)

Más de Carlos Azaustre

Más de Carlos Azaustre (13)

Último

Último (19)

Curso Básico de AngularJS