2012-10-09 36 views
26

Actualmente estoy jugando con el framework AngularJS. Estoy usando el servicio $ route para enlaces profundos en mi aplicación de una sola página.Cómo crear URLs mediante programación con AngularJS

Ahora me gustaría navegar dentro de mi aplicación, por ejemplo, cambiando solo la parte de búsqueda de la URL actual. Es fácil de hacer usando el servicio $ location en JavaScript, pero ¿cómo puedo construir un atributo href a partir de la ruta actual con solo la parte de búsqueda reemplazada?

¿Tengo que hacerlo a mano o hay una forma AngularJS para ello?

Agregado:

Por supuesto, el servicio $ ubicación tiene todos los métodos para el cálculo de dichas direcciones URL. Pero no puedo usarlo porque $ location también navega por la ventana del navegador hacia la nueva URL.

Hay otra complicación con la creación de URL a mano: se debe verificar si se usa el método # de herencia o la nueva API de historial. Dependiendo de esto, la URL debe incluir un # -sign o no.

+0

Qué quiere decir como, tomando esta ruta:/algo/16 y haciendo una nueva como/tan mething/30? – doubledriscoll

+0

Sí, algo así. O haciendo #/algo/30? X = 4 en #/algo/30? X = 5 – Marc

+0

Puede rastrear las partes pertinentes de su URL en $ rootScope, y luego tiene un servicio que puede inyectar para ver esos valores y cambiar la URL ... solo spitballing. –

Respuesta

3

Como se puede ver en el código fuente aquí (v.1.1.0):

https://github.com/angular/angular.js/blob/v1.1.0/src/ngResource/resource.js#L228

y aquí:

https://github.com/angular/angular.js/blob/v1.1.0/src/ngResource/resource.js#L247

AngularJS no utiliza internamente para encodeURIComponent administrar cadenas de URI pero no poner a disposición las funciones utilizadas. Estas funciones son internas del módulo (lo que creo que es una pena).

Si desea administrar sus URI exactamente de la misma manera que AngularJS, tal vez pueda copiar estas funciones de la fuente a su código y hacer su propio servicio para eso.

+2

Tus enlaces están rotos porque no vinculaste a una confirmación específica :-( – user37078

+0

@ user37078 gracias. Edité la publicación, pero no sé cómo se gestionan las cadenas URI en la última versión de AngularJS, así que, tal vez, la respuesta ya no es válido – Robert

10

Siguiendo la respuesta de Robert, encontré las funciones en Angular.js. Son buildUrl, forEachSorted y sortedKeys. builUrl también usa las funciones isObject y toJson, que son públicas, por lo que deben cambiarse a angular.isObject y angular.toJson, respectivamente.

function forEachSorted(obj, iterator, context) { 
    var keys = sortedKeys(obj); 
    for (var i = 0; i < keys.length; i++) { 
     iterator.call(context, obj[keys[i]], keys[i]); 
    } 
    return keys; 
} 

function sortedKeys(obj) { 
    var keys = []; 
    for (var key in obj) { 
     if (obj.hasOwnProperty(key)) { 
      keys.push(key); 
     } 
    } 
    return keys.sort(); 
} 

function buildUrl(url, params) { 
    if (!params) return url; 
    var parts = []; 
    forEachSorted(params, function (value, key) { 
     if (value == null || value == undefined) return; 
     if (angular.isObject(value)) { 
      value = angular.toJson(value); 
     } 
     parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(value)); 
    }); 
    return url + ((url.indexOf('?') == -1) ? '?' : '&') + parts.join('&'); 
} 
22

A partir de v1.4 se puede utilizar para que $httpParamSerializer:

angular.module('util').factory('urlBuilder', function($httpParamSerializer) { 
    function buildUrl(url, params) { 
     var serializedParams = $httpParamSerializer(params); 

     if (serializedParams.length > 0) { 
      url += ((url.indexOf('?') === -1) ? '?' : '&') + serializedParams; 
     } 

     return url; 
    } 

    return buildUrl; 
}); 

Uso:

Para producir http://url?param1=value1&param2=value2_1&param2=value2_2 llamada con:

urlBuilder('http://url', { param1: 'value1', param2: ['value2_1', 'value2_2'] }); 
Cuestiones relacionadas