Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Curso AngularJS - 5. rutas

105 views

Published on

Curso AngularJS.

Temas:
1. Introducción
2. Conceptos básicos
3. Módulos y controladores
4. Filtros y servicios
5. Rutas
6. Formularios
7. Temas avanzados

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Curso AngularJS - 5. rutas

  1. 1. AngularJS Rutas Álvaro Alonso
  2. 2. Contenidos  Rutas  Conexión con servidores de backend 2
  3. 3. Rutas  Módulo ngRoute  Servicios y directivas para rutas en aplicaciones Angular  Mantiene la aplicación tipo SPA (Single Page Application)  Disponible en  http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js  El nuevo Component Router está deprecado. 3
  4. 4. Rutas  Insertar dependencia del módulo ngRoute  Configurar rutas con $routeProvider  Las vistas van a ng-view 4 var app = angular.module("myApp", ["ngRoute"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.html" }) .when("/red", { templateUrl : "red.html" }); }); <div ng-view></div>
  5. 5. Rutas  Enlaces en el template 5 <body ng-app="myApp"> <a href="#/">Home</a> <a href="#resource1">Resource1</a> <div ng-view></div> </body>
  6. 6. Rutas  Definir un controlador para cada vista  El controlador recibe parámetros como  $route, $routeParams, $location 6 app.config(function($routeProvider) { $routeProvider .when("/items/:itemId", { templateUrl : ”items.html”, controller: “itemsController” }); }); .controller(’itemsController', function ($scope, $routeParams) { $scope.params = $routeParams; // {“itemId”: ….} })
  7. 7. Rutas  Método otherwise 7 app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.html" }) .otherwise({ templateUrl : ”notFound.html" }); });
  8. 8. EJEMPLO Rutas 8
  9. 9. EJERCICIO Rutas 9  Añadir en la aplicación una barra de navegación con dos pestañas  Paciente  contiene la información que teníamos hasta ahora  Lista de pacientes  de momento es una vista con una lista de pacientes inventada  Cada una de las pestañas debe tener su propio controlador  Paciente  El conotrolador que tenía hasta ahora  Lista de pacientes  Un nuevo controlador que de momento está vacío  En caso de utilizar una ruta diferente  Devolver mensaje 404 not found
  10. 10. Resolve  Mapa de dependencias que se inyecta en el controlador de la ruta 10 .when('/resource1', { templateUrl: ’res1.html', controller: ’res1Controller', resolve: { ”resource1": function () { return [’item1', ’item2']; } } }) …. .controller('res1Controller', function ($scope, resource1) { $scope. resource1 = resource1; });
  11. 11. Resolve  Si alguna de las dependencias es una promesa el router espera a  que todas ellas se resuelvan  o a que una de ellas sea rechazada 11 .when('/resource1', { templateUrl: ’res1.html', controller: ’res1Controller', resolve: { ”resource1": function ($q) { var deferred = $q.defer(); setInterval(function() { deferred.resolve(); }, 3000); return deferred.promise; } } })
  12. 12. Usando un backend  Los modelos de datos suelen pedirse a un backend que mantiene la persistencia  El servicio $http permite realizar llamadas REST 12 $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { … }, function errorCallback(response) { … }); response { data – {string|Object} – The response body transformed with the transform functions. status – {number} – HTTP status code of the response. headers – {function([headerName])} – Header getter function. config – {Object} – The configuration object that was used to generate the request. statusText – {string} – HTTP status text of the response. }
  13. 13. EJEMPLO Backend 13
  14. 14. EJERCICIO Rutas y backend 14  Ahora la pestaña Lista de pacientes incluirá una lista obtenida del servicio  https://jsonplaceholder.typicode.com/  Asociar la URL del servicio a una constante del módulo  .value(’name', ’value’)  Opcional  Crear un servicio que haga el fetch de los datos de la lista  Ejemplo: https://angularjs.org/#wire-up-a-backend
  15. 15. Documentación  APIs básicos de routing  http://www.w3schools.com/angular/angular_routing.asp  Provider de rutas  https://docs.angularjs.org/api/ngRoute/provider/$routeProvider  Servicio de promesas  https://docs.angularjs.org/api/ng/service/$q  Servicio HTTP  https://docs.angularjs.org/api/ng/service/$http  Servicio resource (más alto niveo que $http)  https://docs.angularjs.org/api/ngResource/service/$resource 15
  16. 16. AngularJS Rutas Álvaro Alonso

×