Curso AngularJS - 5. rutas
•Download as PPTX, PDF•
0 likes•2,001 views
Este documento explica el uso de rutas en AngularJS. Se introduce el módulo ngRoute y cómo configurar rutas y vistas con $routeProvider. También cubre cómo definir controladores para cada ruta, usar parámetros de ruta, y manejar páginas no encontradas. Además, explica cómo conectar las rutas a un backend usando $http para realizar peticiones REST y recuperar datos.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to Curso AngularJS - 5. rutas
Similar to Curso AngularJS - 5. rutas (20)
More from Álvaro Alonso González
More from Álvaro Alonso González (15)
Recently uploaded
Recently uploaded (13)
Curso AngularJS - 5. rutas
- 2. Contenidos Rutas Conexión con servidores de backend 2
- 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. 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. 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. 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. Rutas Método otherwise 7 app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl : "main.html" }) .otherwise({ templateUrl : ”notFound.html" }); });
- 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. 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. 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. 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. }
- 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. 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