0 calificaciones0% encontró este documento útil (0 votos)

36 vistas

Manual de AngularJS

Manual de AngularJS

Cargado por

Johana Ramos

Derechos de autor

© © All Rights Reserved

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF o lee en línea desde Scribd

Descargar ahoraDescargar

Guardar Manual de AngularJS para más tarde

• Descargar
• GuardarGuardar Manual de AngularJS para más tarde
• 0%0% encontró este documento útil, undefined
• 0%, undefined
• Insertar
• Compartir
• Imprimir
• Reportar

Para el texto del filtrado usamos el INPUT type text que hemos mareade con ng- model="vn filtroClients Para el orden tenemos dos tipos de controles, diferentes para poder practicar con mas cosas. ‘Tenemos un par de botones que nos permiten marcar orden alfabstico 0 contrario, que tienen sus correspondientes ng-click para definit comportamientos. Por otra parte tenemos un par de campos INPUT de radio para definir si queremos que se ordene por el nombre de la cerveza 0 su campo descripcion. Pero sobre todo te tienes que fijar en el listado de cervezas que realizamos con una lista UL y sus correspondientes LI. Echa un vistazo a la directiva y al template que engloba:

{{Sindex +1}}.- {{cerveza.name}}, {{ cerveza.description }}

Aqui tenemos varios elementos que destacar: + La repeticién se hace con la coleccién que tenemos en vm.cervezas (que se puebla con una Hamada Ajax con JSONP + Dentro de nuestro template, el LI y todo su contenido, tendremos disponible la cerveza actual en una variable llamada “cerveza’ del scope actual, + Para el filtrado usamos el contenido del campe de texto con ng-model="vm.filtroCliente! + Para el orden usamos tanto el valor vm.campo como el vm.orden que se sacan de los botones y los radiobuttons + Ademas puedes ver otra directiva nueva hasta este momento en el Manual de AngularJS que es ng-class, Nos sirve para indicarle la class de CSS que queremos aplicar a un elemento HTML. En este caso usamos los valores Seven y $odd del scope local (datos creados automaticamente por Angular) para colocarlo la clase adecuada. De esta manera conseguimos el tipico estilo de filas coloreadas como una cebra. + Por diltimo puedes reparar dentro del contenido de los LI que estamos usando el index, que es otra variable del scope local, que nos viene de fabula para numerar las filas de los elementos de la lista. El Javascript tendra una pinta como la siguiente: angular ‘module(*apiapp', [}) controdier( ‘apiAppctr1', controladorPrincipal); function controladorPrincipal($scope, shttp){ var varthis; vm. orden vm. campo false; "name"; var url = "netp: if (vm. nombre) { url = "aquer ‘/api..openbeer database, com/v1/beers. json?cal lback=3SON_CALLBACK" ; + vm.nombre vm. buscacervezas = function(){ Shr tp. jsonp( url). suecess(Tunct1on( respuesta) { console.log("res:", respuesta); vm.cervezas = respuesta. beers; === eaManual de AngularJS - DesarrolloWeb.com 48170 Di 3 Realmente en este Javascript hay poco que necesites aprender, que no hayas visto ya en articulos anteriores. Te podré interesar la inicializacién de datos en el scope qe encuentras én las primeras lineas de la funcién del controlador, Aunque para la materia que nos trata no importa demasiado, si que necesitarés unos estilos CSS para formatear un poco la presentacion de ese HTML, de manera que quede bonito y puedas apreciar algunas cosas como los colores de fondo de tipo cebra para los elementos de la lista. body{ font-family: sans-serif; } dit font-size: 0.8em; margin-bottom: 10px; padding: 19px; 11. spang font-weight: bold; display: block; font-size: 1.2em; } asidet width: 200px; float: Tight; padding: 20px; display: table-cell; } aside h2¢ margin-bottom: 3px; 3 Section( display: table-cell; Li.event background-color: #d5d505; } Li.odag background-color: #d5d5tf; 3 Eso es todo de momento, espero que puedas aprovechar ya mismo algunas de estas potentes caracteristicas de ngRepeat. Como habras encontrado, esta directiva permite hacer cosas impactantes sin escribir nada de cédigo, algo que apreciaras sobre todo si tienes algo de experiencia en Javascript o librerias como jQuery. Paro OJO, esa misma potencia puede que resulte perjudicial para tu aplicacién si se usa sin control, nunca intentes usar ng-repeat con conjuntos masivos de datos, a lo sumo con elementos de 100 en 100, aplicando técnicas come la paginacién para reducit los elementos en la vista. === eaParte 5: Ajax en Angular Introduccién a los mecanismos para realizar conexiones con el servidor asincronas por HTTP con AngularJS. Lo que cominmente conocemos por Ajax, con ejemplos que nos facilitaran entender una de las facetas mas potentes de este frameweork Javascript y el desarrollo frontend basado en las cada vez mas populares API REST. 5.1.- Ajax con AngularJS para acceso a API ‘Ala vez que aprendemos técnicas de Ajax vamos a repasar diversas de las practicas que ya te hemos ido contando a lo largo del Manual de Angular]s. Ya lo sabes, Ajax es una solicitud HTTP realizada de manera asincrona con Javascript, para obtener datos de un servidor y mostrarlos en el clienta sin tener que recargar la pagina entera. Ademas para los despistados que no lo sepan todavia, tenemos un articulo que te explica muy bien qué son. exactamente las API REST. Vwi 5.1.1. Service Shttp El servicio $http (service en inglés, tal como se conoce en AngularJS) es una funcionalidad que forma parte del nucleo de Angular. Sirve para realizar comunicaciones con servidores, por medio de HITE a través de Ajax y via el objeto XMLHttpRequest nativo de Javascript o via JSONP Después de esa denominacién formal, que encontramos en la documentacion de AngularJs, te debes de quedar por ahora en que nos sirve para realizar solicitudes y para ello el servicio $http tiene varios tipos de acciones posibles. Todos los puedes invocar a través de los parametros de la funcién shttp y ademas existen varios métodos alternativos (atajos 0 shortcuts) que sirven para hacer cosas mas especificas. Entre los shortcuts encuenteas: shttp.get) a.Manual de AngularJS - Desarrol shttp post shttp-put) shttp-delete() shttp,sonp0) shttp-head shttp patch) ‘Tanto ol propio $http0 como las funcionos do atajos te dovuclven un objeto quo con ol “patron promise” te permite definir una serie de funciones a ejecutar cuando ocurran cosas, por ejemplo, que la solicitud HTTP se haya resuelto con éxito o con fracaso, ‘Nota: Si vienes de jQuery ya habris podido experimentar las promesas “promise” en las lamadas a la funcién. ‘.ajnc S.get Spost, ete. En Angular funciona de manera my similar El service $http es bastante complejo y tiene muchas cosas para aportar soluciones a las mas variadas necesidades de solicitudes HTTP asincronas. De momento nos vamos a centrar en lo mas basico que ser suficiente para realizar un ejemplo interesante. 5.1.2.- Inyeccién de dependencias con Shttp Si vas a querer usar el servicio $http lo primero que necesitards sera inyectarlo a tu controlador, 0 a donde quiera que lo necesites usar. Esto es parecido a lo que mostramos cuando estabamos practicando con controladores e inyectébamos el $scope, angular module(*apiapp', []) scontroller('apiAppctrl', ['$http', controladorPrincipal] ); Como puedes ver, on la funcién de nuestro controlador. llamada controladorPrincipal, lo estamos indicando que recibira un pardmetro donde tiene que inyectar el service $http. Al declarar la funcién recibiras esa dependencia como parametro. function cont roladorPrincipal(shttp){ Ahora, dentro del codigo de ese controlador podras acceder al servicio Shttp para realizar tus Hamadas a Ajax. 5.1.3. Realizar una llamada a Shttp.get() El método get() sirve para hacer una solicitud tipo GET. Recibe diversos parametros, uno obligatirio, que es la URL y otro opcional, que es la configuracion de tu solicitud. Shttp.get("http: //u. example. com") Lo interesante es lo que nos devuelve este método, que es un objeto "HtpPromise", sobre el cual podemos operar para especificar el comportamiento de nuestra aplicacién ante diversas situaciones. 5.1.4.- Respuesta en caso de éxito Do momento, veamos qué deberiamos hacer para especificarle a Angular lo que deve de hacer cuando se reciba respuesta correcta del servidor. shttp.get(url) success (function( respuesta) { Z/e6digo en caso de éxito yi Como puedes ver en este cédigo es que $http nos devuelve un objeto. Sobre ese objeto invocamos === eaManual de AngularJS - DesarrolloWeb.com 51/70 e] método success que sirve para indicarle la funcién que tenemos que ejecutar en caso de éxito en la solicitud Ajax. Esa funcién a su vez recibe un parametro que es la respuesta que nos ha devuelto el servidor. 5.1.5.- Ejemplo completo de solicitud Ajax con $http ‘Vistos estos nuevos conocimiontos sobre ol 'sorvice" $http estamos en condiciones de hacer un poco de Ajax para conectarnos con un API REST que nos ofrezca unos datos. Esos datos son los que utilizaremos en nuestra pequesa aplicacién para mostrar informacién. ‘Nota: Vamos a usar un API lismada REST Countries, que puedes encontrar en hiipijresteountres.c [Este API nos devuelve JSON con datas sobre los paises del mundo. En principio puedes hacer diversas ‘operaciones con los comandes sobre el AP, pero varmos aver solamente unas pocas que nos permiten recibir los ‘datos de Les palses agrupades por regiones. ‘Las URL que usaremos para conectarnos al AP son como estas: tp restcountries.ewresyv /reqion/atica hntp.estoountries.ewrestysregionveurone "Puedes abririas en tu navegador y observer cémo la respuesta es un conjunto de datos en notacién JSON. Aunque sencilla, esta aplicacién ya contene varias cosillas que para una mejor comprension conviene ver por separado. Este es nuestro HTML: En el siguiente articulo explicaremos cémo acceder por Ajax a un JSON pero con JSONP. 5.2.- JSONP en AngularJS mediante JSOMP, realizad: JSONP es un mecanismo muy iitil cuando estamos trabajando con Ajax en Javascript y queremos traernos datos que residen en otro servidor, Existe una problematica por la cual no puedes cargar datos con Javascript que te vengan desde servidores de otros dominios, pues puede darte un error da seguridad si es que el sarvidor al que te conectas no esta configurado para aceptar solicitudes === eaManual de AngularJS - DesarrolloWeb.com 54/70 “cross domain’ Ahora no buscamos tanto introducir esta variante de JSON, pues ya la vimos con detalle en el articule dadicado a JSONP. Simplemente te queremos explicar cémo debes usar JSONP dentro de AngularJS de una manera muy sencilla. Es un excelente ejercicio para practicar con tado lo que levamos visto en el Manual de Angular)S 5.2.1. Conexiones HTTP asincronas en Angular JS Para realizar solicitudes al servidor asincronas (lo que se conoce habitualmente por Ajax en el mundo del desarrollo web) con Angular}S necesitamos un servicio llamado $http. Este ‘servico" nos lo ofrece Angular de manera completa en su "core" y esta preparado para hacer tado tipo de conexiones. Existen varios 'shortcuts" que sitven para hacer operaciones tipicas, con es el caso de traernos datos ofracides por madio de JSONP. asi como GET, POST, ete. En concreto para nuestro ejemplo usaremos el método jsonp() de shttp, que recibe la URL del recurso JSONP al que quieres acceder. Al invocar ese método recibimos un objeto de respuesta sobre el que podemos configurar comportamientos para el caso de que la solicitud tenga éxito, fracaso, etc. Esto se hace con el conocido patrén promise de Javascript Nota: En el articulo dedicado « Ajex en AugularS expicamos més detalles de este “service” ofrecido por Angular, 5.2.2.- Funcién callback del JSONP en la URL de conexién La verdad es que Angular hace todo el trabajo "sucio" por debajo y ti lo tinico que necesitas hacer es invocar e] metodo correcto del service $http. Asi que el metodo de acceso es practicamente el mismo que si estuvieras trayendo los datos con un JSON normal. En este caso la diferencia es que le tienes que indicar un nombre de la funcién callback de tu JSONP. La restauracién del dato se hace de manera automatica por AngularJS, lo unico que necesitas es que en la URL compuesta de tu JSONP indiques el nombre de la funcién callback como “JSON CALLBACK". Eso en JSONP se indica'con el parémetro en la URL de conexién llamado callback’, que escribes de la siguiente manera. Nota: Esa funcién callback es Ia que uesmos en Javascript dal navagador para restaurar los datos dal JSONE ‘Como decimos és algo que realmente no necesltas preocuparte mucho, pues és transparent pare tl. SI quieres ‘obtener mis informacién podrias consultar l articulo sobre JSONP. ‘hitp//example.com/url,json?callback=JSON CALLBACK Darin http: ww cesarrallowab,com/manuales/menuil-anglarjs-htmlManual de AngularJS - Desarrol 5.2.3.- Ejemplo realizado en Angular JS para traer datos de API REST con JSONP Ahora vamos a realizar un ejemplo en AngularJS para practicar lo aprendido. De este modo verés que es todo muy sencillo. En este ejemplo traemos datos de cervezas de un API REST pablica llamada “Open Beer Database’. Los datos los obtenemos por JSONP y puedes ver un ejemplo de conexion y codigo en esta pagina de la documentacion del API. http://openbeerdatabaso.com/documentation/examples-jsonp En nuestro caso concreto accedemos a cervezas en vez de corvecerias, pero el ejomplo es bien similar. Nuestra URL para obtener datos del API es como esta http //api openbeerdatabase.com/v L/beers,ison2callback=|SON CALLBACKS quer; Como puedes ver, en la URL indicamos en el parametro "callback" el nombre de la funcién callback que nos pide Angular. Ademas hay un segundo parametro llamado “query” con el que podemos expresar unas palabras clave para hacer biisquedas de cervezas que contengan esas palabras. Sabiendo esto, ahora pasomos a ver nuestro cédigo. Esta es la parte del HTML. Como ves, tenemos un campo de texto donde podemos escribir un dato y un botén de buscar. Al darle a buscar llamamos a un método de nuestro "scope" para traernos las cervezas que tengan el texto escrito en el campo de texto, ya sea en su nombre o descripcién, Luego tenemos un bucle definido con ng-repeat en el que recorremos una coleccién de cervezas. Ahora puedes ver la parte del Javascript: angular module('apiapp', 1) ‘controller( ‘apiAppCtr', controladorPrincipal); function controladorPrincipal($scope, shttp){ var viethis; vm. buscacervezas = function(){ var url = "http: //api. openbeerdatabase. com/vi/beers. json? calllback=JSON_CALLBACK" 4f (vm. nonbre){ url += "aquery=" + vm, nombre; z ‘Shttp. jsonp(ur1) . success( function respuesta) { console. log("res:", respuesta); vm.cervezas = respuesta. beers; yi } Bien, supongo que estos cédigos ya te iran sonando y en concreto este ejercicio es muy parecide al anterior en el que conocimos Ajax. En la parte importante, nuestro controlador, apreciaras que tenemos un método llamado buscaCervezas() que es el que se encarga de hacer todo el trabajo. En ese método primero construimos la URL para acceder al API, agregandole el nombre de la === eaManual de AngularJS - DesarrolloWeb.com 56 / 70 cerveza que quieres buscar. Luego accedemos por medio de $http.jsonp() a la URL construida y definimos una funcién que se ejecutaré en caso de éxito de la conexién Ajax (success). en esa funcién simplemente volcamos las cervezas encontradas en el scope, con lo que se actualiza automaticamente la vista en el bloque donde teniamos la directiva ng-repeat de nuestro HTML, Con esto es todo, Solo te queda practicar lo aprendido por tu cuenta para no dejarte un detalle sobre las conexiones JSONP en Angular}s. 5.3.- Operacién post HTTP con $http en AngularJS lor por medio del HTTP con la libre Hemos visto como realizar operaciones basicas de Ajax con AngularJS, en las que recibimos informacion del servidor. por medio de got. Ahora veamos también como se enviarian datos all servidor por medio de Ia operacién poet del HTTP. Como siempre Iae cores con Angular[S se hacen muy sencillas. El servicio ("servico" en la torminologia de Angular) shttp nos ofrece una serie de métodos shortcut” enfocados en realizar las operaciones tipicas implementadas dentro del protocolo HTTP. Para enviar datos post disponemos de shttp.post(). En ese método podemos enviar como parametro, aparte de la URL del servidor donde haremos el post, un objeto con los datos que se desean enviar Shttp.post("recibe. php", (uno: 1, fruta: "manzana")); Como ves, la primera direccién es la URL relativa donde enviar los datos (también podria sor absoluta) y el segundo parémetro son los datos que queremos envier al destino, Este método devuelve como resultado un objeto sobre el que pocemos implementar con el patron promesa algunas operaciones en diversas situaciones con respecto a esa conexion con el servidor, algo que ya viste en lo ejemplos de Ajax anteriores. Lo que vamos a aprender de momento es realizar acciones en caso de éxito y para ello tenemos que indicarlas con una funcién en "success" var conAjax = $http.post("recibe. php", {uno: 1, fruta: "manzana"}); conajax. success(function(respuesta){ console. log(respuesta); yi En la funci6n que asociamos al caso success, como ya habrés visto muchas veces, recibimos un paramatro con la respuesta que nos devuelve el servidor. En este caso simplemente la volcamos a la consola de Javascript. Damien http: ww cesarrallowab,com/manuales/menuil-anglarjs-htmlDesarrolloWeb.com 57/70 ‘Nota: #ste cédigo lo encontrarés habitualmente encadenando lamadas, sin necesidad de declarar la variable "conAjex’. Luego haremos ejemplos que usen esa comtin forme de codificar. 5.3.1.- Recibir los datos en el servidor Los datos que ests enviando por post Angular los empaqueta como JSON y te Ilegaran al sorvidor, aunque no por el método comin POST, en pares clave/valor como quizas estas acostumbrado. En realidad nos lo envia como content-type, ‘application/json" en un Ginico objeto, lo que es atil porque nos acepta datos mas complejos, con anidacién de ohjetos JSON. [Nota: Fara que nos entendamos. en un lenguaje como FHP. cuando enviarnos datos por post los recages con él array POST. Ese array no aceplara dversos niveles de anidacién para recibir datos complejos, osea, podemos ‘tener claves con valores situps. Pero se nos queda un poco corto para aplicaciones modernas. En PHP si accede post encontraris que et array est vaca, Este asunto de los niveles de anidacién en los datos que se envian con JSON se ve por ejemplo en este cédigo, perfectamente valido y habitual, Shttp.post("recibe2. php", { hombre: "Miguel", Fechavacimiento: "21/02/1975", sitiosPreferidos: [ "Desarrolloveb. com', "Guiarte.com" 1, direccion calle: "ve la alegria", nunero: 18, ciudad: "Villadigital” ? » success( function( respuesta) { ‘console. log (respuesta) ; vi Ese objeto complejo JSON lo recibirds on el servidor tal cual. El eédigo para recogerlo dependera de tu lenguaje de servidor. Por ejemplo en PHP lo haria de esta manera: File_get_contents("php://input") Eso nos devolveria una cadena de texto, que si quieres volcar a un objeto native de PHP usaras la funcién json_decode(). Tu codigo podria quedarte parecido a este: Sobjbatos = json decode(file_get_contents("php://input")); A partir de ese momento encontraras que puedes acceder a los datos del JSON recibido como estés acostumbrado en el trabajo con objetos PHP. echo $objDatos->nombre; echo $objDatos-~sitiosPreferidos[0] ; echo $objDatos->direccion->calle; 5.3.2.- Enviar un formulario por POST Silo que quieres es enviar los datos que se encuentran en un formulario por POST al servidor, para recibirlos en un JSON, la verdad es que el procedimiento es bien parecido a lo que has visto. === eaManual de AngularJS - DesarrolloWeb.com Simplemente tendremos que crear nuestro modelo con los datos del formulario, algo que hace Angular por ti agregande la directiva ngModel, y enviarlo por shttp.post0) Echa un vistazo a este formulario: Observa que en ng-model hemos volcado los campos del formulario dentro de un objeto llamado *fdatos". Osea, en el modelo de la vista 'vm'" tenemos un objeto "datosf” y dentro ya encontraremos los datos de nuestro formularie. ‘También repara en la directiva ngSubmit que hemos colocado en la etiqueta FORM. Vers que la hemes asociado con una funcién de nuestro modelo: vm.enviar(). En esa funcion que veremos a continuacién es donde debes escribir el codigo para poder enviar el formulario. "Nota: Esto no ests ebigado a hacerlo asi necesariamente, porque puedes crear la estructura que desees en el ‘modelo, Simplemente nos resultaré més cémodo colocar directamente les datos vinculados a un obleto de datos lol formularia, Al servidar por post no vamos a enviar todo el modelo de la vista, sino tinicamente los datos dl {formulario. Comp esta estructura ya nos permite tener los datos del formulario en un objeto independiente, nos ahorrari el tener que hacerlo “a mane’, Enseguida lo vers major Para que esto funcione en tu Javascript debes inicializar "fdatos" como un objeto, aunque sea vacio. Por ello en tu controller deberias incluir esta cédigo. vm. fdatos = (3; Es un cédigo parcial, Iuego lo voras on el contexto del controlador completo. Gbserva que en tu “vm" has inicializado el objeto “felatos" con un literal de objeto vacio, expresado con las dos llaves. Esto ya nos deja en muy buena situacién para enviar ese formulario de una manera muy limpia. Ahora te mostramos el eédigo completo para crear nuestro controlador. angular -module(‘app', [1) ‘controller(‘appctr1', [*shttp', controladorPrincipal]); function controladorPrincipal(snttp){ var vmethis; //Aniclalizo un objeto en los datos de formulario vm. fdatos = (); // declaro 1a funcién enviar vm.enviar = function(){ ‘Shttp. post(""recibe-formulario. php", vm. fdatos) success(runction(res){ ‘console. 1og(res); //por Supuesto podras volcar la respuesta al modelo con algo como vm.res = res; === eaCon esto creo que lo tendras todo claro para poder enviar datos a un servidor por medio de post, datos que podran ser todo lo complejos que necesites en tu aplicacién. Como puedes comprobar la llamada a $http.post() te hace todo el trabajo de la solicitud HTTP por medio de Ajax, por lo que solo tendrés que programar el comportamiento especifico para tus necesidades, tanto en el cliente Parte 6: Vistas y sistema de Routing en Angular En resumen, las vistas nos permiten separar partes de nuestra interfaz en partes distintas y con el sistema de routing AngularJS es capaz de saber qué vistas debe mostrarte atendiendo a la URL que la aplicacién esté mostrando. Veremos en detalle ‘como trabajar con multiples vistas y rutas profundas en una aplicacién desarrollada con este framework Javascript. 6.1.- Médulo ngRoute para crear rutas e intercambiar vistas en AngularJS Hasta ahora en el Manual de Angular]S hemos visto muchas cosas interesantes, sin embargo nos hemos limitado a hacer aplicaciones en las que solo teniamos una ruta y una vista. Sin embargo, cuando so vayan complicando los requisitos de nuestras aplicaciones podremos necesitar ampliar estas posibilidades, Lo que vamos a aprender ahora es a crear rutas distintas dentro de nuestra aplicacién, de modo que tengamos varias URL que muestran vistas distintas. Quizas te preguntes ¢Si Angular]S esta especialmente indicado para hacer aplicaciones de una sola pagina (concepto que se conoce con el nombre de 'Single Page Application’, SPA), por qué ahora nos muestras la posibilidad de crear varias URL? éNo era una tnica pagina lo que queriamos hacer? a.ingularJS - DesarrolloWeb.com 60/70 Pues bien, podemos tener ambas cosas. Una aplicacién de una sola pagina, pero quo es capaz de representar URL distintas, simulando lo que soria una navogacién a través de la aplicacion, pero sin salirnos nunca de la pagina inicial. Esto nos sirve para varias cosas, entre otras: + Memorizar rutas profundas dentro de nuestra aplicacién. Podemos contar con enlaces que nos leven a partes internas (deeplinks), de modo que no estemos obligados a entrar en la aplicacion a través de la pantalla inicial. + Eso facilita también el uso natural del sistema de favoritos (o marcadores) del navegador, asi como el historial. Es decit, gracias a las rutas internas, seremos capaces de guardar en favoritos un estado determinado de la aplicacién. A través del uso del historial del navegador, para ir hacia delante y atrés en las paginas, podremos navegar entre pantallas de la aplicacion con los botones del navegador. + Mantener vistas en archivos independientes, lo que reduce su complejidad y administrar los controladores que van a facilitar el procesamiento dentro de ellas. 6.1.1.- Cémo son las rutas internas de la aplicacién Para que nos entendamos, en nuestra aplicacién vamos a poder tener varias URL. Podriin tener una forma como esta: http://example.com/index php hitp://example.com/index. php# /seccion http //example.com/index php#/pagina interna Son simples ejemplos, lo importante os fijarse en el patrén "#/". Podras darte cuenta que estas URL corresponden con la misma pagina, todas, pues usan el caracter "#" que nos sirve para hacer lo que se Haman "enlaces internos" dentro del mismo documento HTML. Como sabemos, la “almohadilla” ssostenido" o como la lames en tu pais), sirve para hacer rutas a anclas internas, zonas de una pagina. Cuando Ie pidamos al navegador que acceda a una ruta creada con '#" éste no va a recargar la pagina, yéndose a otro documento. Lo que haria es buscar el ancla que corresponda y mover el scroll de la pagina a ese lugar. Nota; #ste es el comportamiento de cuslquler navegedor: no estamos apuntando nada que tenga que ver con Javascript o con Angular. Angular ast como otros frameworks Javascript MVC se aprovechan de esta cceracterfstica para implementar el sistema de enrutado, En el caso de AngularJS no habra un movimiento de scroll, pues con Javascript se detectara el cambio de ruta en la barra de direcciones para intercambiar la vista que se esta mostrando. Por ello, volviendo a la pregunta de antes: "si la posibilidad de crear varias rutas dentro de una Darin http: ww cesarrallowab,com/manuales/menuil-anglarjs-htmlManual de AngularJS - D aplicacion contradice el sistema de Single Page Application", observamos que realmente no son piginas distintas, sino que es la misma pagina. Lo que estamos haciendo os "simular Ia navegacin por varias URL cuando realmente os la misma, con enlaces internos. 6.1.2.- Instalar ngRoute El médulo (‘modulo’ en la terminologia anglosajona de Angular) ngRoute es un potente paquete do utilidades para configurar el enrutado y asociar cada ruta a una vista y un controlador, tal como hemes dicho. Sin embargo este médulo no est ineluido en la distribucién de hase de Angular, sino que en caso de pretender usarlo tenemos que instalarlo y luego inyectarlo como dependencia en el modulo principal de nuestra aplicacion, Como no lo tenemos en el script basico de Angular, debemos instalark incluyendo el script del codigo Javascript del modulo ngRoute. lo conseguimos ‘Nota: Ojo que esta ruta no debes copiar y pegarla tal cusl, Muchas veces usarés e] CDN correspondiente y eberis asequrarte de estar usando en el médulo ngRoute de la misma versisn de Angularls que cargaste Inicalmente, Otro detalle es que este script lo tienes que incuir después de haber incuido el script del core de aangularJs. 6.1. .- Inyeccién de dependencias El segundo paso seria inyectar la dependencia con ngRoute en el médulo general de nuestra aplicacion, Esto lo hacemos en la llamada al método module con el que iniciamos cualquier programa AngularJS, indicando el nombre de las dependencias a inyectar en un array. angular.module("app", ["ngRoute"}) Hasta ahora este array de dependencias, cuando lamabamos a angular modulo(), estaba siempre vacio. A medida que se compliquen nuestras aplicaciones podremos necesitar inyectar mas cosas. Por ejemplo, las directivas creadas por terceros desarrolladores también las inyectarse de esta manera en tu médulo principal de la aplicacién. Eso lo veremos mas adelante. 6.1.4.- Configurar el sistema de enrutado con SrouteProvider El sistema de enrutado de AngularJS nos permite configurar las rutas que queremos crear en nuestra aplicacién de una manera declarativa. Aunque sea un componente bastante complejo internamente, podemos configurarlo de una manera ciertamente sencilla. srouteprovider tiene un par de métodos. El primero es when(), que nos sirve para indicar qué se debe hacer en cada ruta que se desee configurar, y el método otherwise() que nos sirve para marcar un comportamiento cuando se intente acceder a cualquier otra ruta no declarada. Esta configuracién se debe realizar dentro del método config), que pertenece al modelo. De hecho, solo podemos inyectar $routeProvider en el métado config() de configuracién. angular.module("app", _["ngRoute"]) -config(function( $routeProvider){ //eontiguracion y definicién de las rutas ye Las rutas las configuras por medio del método when) que recibe dos parametros. Por un lado la ruta que se est configurando y por otro lado un objeto que tendré los valores asociados a esa ruta. De momento vamos a conocer solo éstos que serian los fundamentales para empezar. + "controller", para indicar el controlador === eaManual de AngularJS - Desarrol ‘controllerAs", el nombre con el que se conocer el scope dentro de esa plantilla ‘templateUr!", el nombre del archivo, 0 ruta, donde se encuentra el HTML de la vista que se dabe cargar cuando se acceda a la ruta. Podemos ver un ejemplo completo de configuracién de rutas. angular.module("app", _["ngRoute"]) -config( function($routeProvider){ SrouteProvider when("/", { controller: "appctrl", controlleras: "va", templateUrl: "home. html" ) When("/descargas", { controller: "appctri", controlleras: "vn", Templateurl: "descargas. ntml" ) Wwhen("/opelones", { controller: "appctri", controlleras: "vm", templateUrl: "opciones. html" » » ‘controller("appctrl", function(){ //cédigo del controlador (10 estoy usando en todas las rutas, en este sencillo ejemplo) yD: Hemos encadenado varias llamadas a métodos when() sobre el $routeProvider, para definir cada una de las rutas que tendremos en nuestra pequefia aplicacién. Nota: Observa que en cada una de las nutes tenamas defnido ©] mismo controlador Esto no tane por qué sar asi, podras perfectamente tener un controlador distinto para cada ruta del sistema. Para finalizar, podemos ver el cédigo HTML de una pagina donde usariamos estas rutas.