Angular를 사용하여 URL을 프로그래밍 방식으로 작성하는 방법JS

Angular를 사용하여 URL을 프로그래밍 방식으로 작성하는 방법JS

나는 지금 앵글을 가지고 놀고 있다.JS 프레임워크$route 서비스를 사용하여 한 페이지 어플리케이션으로 깊이 링크하고 있습니다.

현재 URL의 검색 부분만 변경하여 어플리케이션 내부를 탐색합니다.JavaScript에서 $location 서비스를 사용하면 쉽게 할 수 있는데, 검색 부분만 교체하면 현재 경로에서 href 속성을 어떻게 만들 수 있을까요?

손으로 해야 하나요? 아니면 Angular가 있나요?JS의 방법?

추가:

물론 $location 서비스에는 이러한 URL을 계산하는 모든 방법이 있습니다.그러나 $location은 브라우저 창에서 새 URL로 이동하기 때문에 사용할 수 없습니다.

수작업으로 URL을 작성할 때는 또 다른 문제가 있습니다.레거시 #-method 또는 새로운 History API가 사용되고 있는지 확인해야 합니다.이에 따라 URL에는 #부호가 포함되어야 합니다.

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

로버트의 답변에 따라 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('&');
}

여기 소스 코드(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는 내부 인코딩을 사용하지 않습니다.URI 스트링을 관리하기 위한 URIC 컴포넌트는 사용 가능한 함수는 없습니다.이러한 기능은 모듈 내부에 있습니다(안타깝다고 생각합니다).

AngularJS와 동일한 방법으로 URI를 관리하려면 이러한 함수를 소스에서 코드로 복사하여 자체 서비스를 만들 수 있습니다.

언급URL : https://stackoverflow.com/questions/12808779/how-to-programmatically-create-urls-with-angularjs