Vraag Programmatisch URL's maken met AngularJS


Momenteel speel ik met het AngularJS-raamwerk. Ik gebruik de $ routedienst voor deeplinken in mijn enkele pagina-applicatie.

Nu zou ik graag in mijn toepassing willen navigeren, bijvoorbeeld door alleen het zoekgedeelte van de huidige URL te wijzigen. Het is gemakkelijk om de $ location-service in JavaScript te gebruiken, maar hoe kan ik een href -kenmerk van de huidige route maken met alleen het zoekgedeelte dat is vervangen?

Moet ik dit met de hand doen of is er een AngularJS-manier voor?

Toegevoegd:

Natuurlijk heeft de $ locatieservice alle methoden om dergelijke URL's te berekenen. Maar ik kan het niet gebruiken omdat $ location ook in het browservenster naar de nieuwe URL navigeert.

Er is nog een complicatie bij het handmatig aanmaken van URL's: men moet controleren of de oude # -methode of de nieuwe geschiedenis-API wordt gebruikt. Afhankelijk hiervan moet de URL een # -signatuur bevatten of niet.


27
2017-10-09 21:35


oorsprong


antwoorden:


Vanaf v1.4 kunt u gebruiken $ httpParamSerializer daarom:

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;
});

Gebruik:

Produceren http://url?param1=value1&param2=value2_1&param2=value2_2 noem het met:

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

23
2017-09-11 06:50



Na Robert's antwoord vond ik de functies in Angular.js. Ze zijn buildUrl, forEachSorted en sortekeys. builUrl gebruikt ook de functies isObject en toJson, die openbaar zijn, dus moeten ze worden gewijzigd in respectievelijk angular.isObject en angular.toJson.

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('&');
}

11
2017-10-13 01:56



Zoals je kunt zien in de broncode hier (v.1.1.0):

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

en hier:

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

Angularjs gebruikt niet intern encodeURIComponent voor het beheer van URI-reeksen, maar de gebruikte functies niet beschikbaar maken. Deze functies zijn intern voor de module (wat ik denk dat jammer is).

Als u uw URI's op precies dezelfde manier wilt beheren als AngularJS, kunt u deze functies misschien kopiëren van de bron naar uw code en daar uw eigen service voor maken.


3
2017-10-15 13:16