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

Question

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

现在我想在我的应用程序中导航，例如，只更改当前 URL 的搜索部分。在 JavaScript 中使用 $location 服务很容易，但是如何从当前路由构造一个 href 属性，只替换搜索部分？

我必须手工完成还是有 AngularJS 的方式？

已添加：

当然，$location 服务具有计算此类 URL 的所有方法。但我不能使用它，因为 $location 也会将浏览器窗口导航到新的 URL。

手动创建 URL 的另一个复杂之处是：必须检查是否使用了旧的 #-method 或新的 History API。根据这一点，URL 必须包含 # 符号或不包含。

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，也许您可​​以将这些函数从源代码复制到您的代码中，并为此创建自己的服务。