Curso AngularJS - 5. rutas
Descargar como PPTX, PDF0 recomendaciones2,004 vistas
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.
![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>](https://image.slidesharecdn.com/5-161010105658/85/Curso-AngularJS-5-rutas-4-320.jpg)
![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;
});](https://image.slidesharecdn.com/5-161010105658/85/Curso-AngularJS-5-rutas-10-320.jpg)
![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.
}](https://image.slidesharecdn.com/5-161010105658/85/Curso-AngularJS-5-rutas-12-320.jpg)
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