如何使用AngularJS以编程方式创建URL

Question

目前我正在使用AngularJS框架.我正在使用$ route服务深入链接到我的单页应用程序.

现在,我想在我的应用程序中导航,例如,只更改当前URL的搜索部分.在JavaScript中使用$ location服务很容易,但是如何在仅更换搜索部分的情况下从当前路径构造href属性？

我是否必须手动完成或是否有AngularJS方式？

添加:

当然,$ location服务具有计算此类URL的所有方法.但是我无法使用它,因为$ location还会将浏览器窗口导航到新的URL.

手动创建URL还有另一个复杂因素:必须检查是否使用了旧版#-method或新的History API.根据此情况,URL必须包含#-sign.

Answer 1

从v1.4开始,您可以使用$ 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;
});

用法:

http://url?param1=value1&param2=value2_1&param2=value2_2用它生成调用它:

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

Answer 2

按照罗伯特的回答,我找到了Angular.js中的函数.它们是buildUrl,forEachSorted和sortedKeys.builUrl也使用isObject和toJson函数,它们是公共的,因此它们必须分别更改为angular.isObject和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('&');
}

Answer 3

正如您在此处的源代码（v.1.1.0）中看到的：

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

和这里：

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

Angularjs 内部不使用encodeURIComponent来管理URI 字符串，但也不提供所使用的函数。这些函数是模块内部的（我认为很遗憾）。

如果你想以与 AngularJS 完全相同的方式管理你的 URI，也许你可以将这些函数从源代码复制到你的代码中，并为此创建你自己的服务。