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 CheflyFormador Web / Blogger

Mentor en NodeSchool Madrid

Autor deDesarrollo web ágil con Angular.js

Me puedes leer enhttp://carlosazaustre.es

https://sellfy.com/p/VOqw/

https://sellfy.com/p/VOqw/

http://carlosazaustre.es

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



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



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

})};

}

http://servidor.com/usuarios


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) {. . .

}


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

}


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>


Directivas Complejas


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) { … };

}}

http://servicio.com/listado


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

http://servidor.com/recursos


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.jshttps://nodejs.org/download/

Instalar GulpJSAutomatizador de tareasnpm install -g gulp

Instalar BowerGestor de dependencias para Frontendnpm install -g bower


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

curso básico de angularjs

Technology