programing

querystring을 각도 경로로 전달하려면 어떻게 해야 합니까?

nicescript 2023. 2. 11. 16:24
반응형

querystring을 각도 경로로 전달하려면 어떻게 해야 합니까?

Angular와 함께 일하고 있습니다.JS 라우팅 및 쿼리 문자열 사용 방법을 확인하려고 합니다(예:url.com?key=value) Angular는 같은 이름의 키와 값의 쌍을 포함하는 경로를 인식하지 않습니다.albums:

angular.module('myApp', ['myApp.directives', 'myApp.services']).config(
        ['$routeProvider', function($routeProvider) {
            $routeProvider.
            when('/albums', {templateUrl: 'albums.html', controller: albumsCtrl}).
            when('/albums?:album_id', {templateUrl: 'album_images.html', controller: albumsCtrl}).
            otherwise({redirectTo: '/home'});
        }],
        ['$locationProvider', function($locationProvider) {
            $locationProvider.html5Mode = true;
        }]
    );

경로가 쿼리 문자열과 함께 작동하지 않는 것은 맞지만, 경로 전환 시 쿼리 문자열을 사용하여 페이지 간에 데이터를 전달할 수 없는 것은 아닙니다.루트 파라미터의 현저한 제한은 페이지를 새로고침하지 않으면 갱신할 수 없다는 것입니다.예를 들어 새 레코드를 저장한 후 이 작업이 바람직하지 않을 수 있습니다.원래 루트 파라미터는 0(새로운 레코드를 나타냄)이었는데, 사용자가 페이지를 갱신하면 새로 저장된 레코드가 표시되도록 Ajax를 통해 반환된 올바른 ID로 갱신해야 합니다.루트 파라미터에는 이 방법을 사용할 수 없지만 쿼리 스트링을 사용하여 이를 수행할 수 있습니다.

비밀은 루트 템플릿과 일치하지 않기 때문에 루트 변경 시 쿼리 문자열을 포함하지 않는 것입니다.루트를 변경하여 쿼리 문자열 파라미터를 적용할 수 있습니다.기본적으로

$location.path('/RouteTemplateName').search('queryStringKey', value).search( ...

여기서의 장점은 $routeParams 서비스가 쿼리 문자열 값을 실제 루트 파라미터와 동일하게 취급하기 때문에 코드를 갱신하지 않아도 됩니다.이제 루트 정의에 reloadOnSearch: false를 포함시킴으로써 페이지를 새로고침하지 않고 파라미터를 갱신할 수 있습니다.

쿼리 문자열에서는 루트가 작동하지 않는 것 같습니다.대신url.com?key=value다음과 같은 RESTful URL을 사용할 수 있습니까?url.com/key/value?다음으로 루트를 다음과 같이 정의합니다.

.when('/albums', ...)
.when('/albums/id/:album_id', ...)

또는 아마도

.when('/albums', ...)
.when('/albums/:album_id', ...)

여기 보시면search에 있어서의 방법.$location ( ( ) 。URL에 몇 가지 키/값을 추가할 수 있습니다.

예를들면,$location.search({"a":"b"});는 다음 URL을 반환합니다.http://www.example.com/base/path?a=b.

루트 파라미터를 사용하다

var Ctrl = function($scope, $params) {
  if($params.filtered) {
    //make sure that the ID is there and use a different URL for the JSON data
  }
  else {
    //use the URL for JSON data that fetches all the data
  }
};

Ctrl.$inject = ['$scope', '$routeParams'];

http://docs.angularjs.org/api/ng.$routeParams

URL에서 생각할 수 있는 querystring의 사용 예는 다음 두 가지뿐입니다.

1) 컨트롤러에서 쿼리 문자열의 키/값 쌍이 필요한 경우(예를 들어 Hello {{name}}을 인쇄하여 ?name=John 등의 쿼리 문자열 이름을 얻으려면) Francios가 말한 대로 $location을 사용하십시오.검색하면 쿼리 스트링이 오브젝트({name:그런 다음 범위(예: $scope.name = 위치)에 넣으면 사용할 수 있습니다.search (이름;)

querystring에 지정된 (?page= Thatpage.htm)과 같이 라우터의 다른 페이지로 리다이렉트해야 할 경우 routerProvider에 redirectTo:를 작성합니다.검색 오브젝트를 세 번째 파라미터로 수신합니다.다음 EggHead 비디오의 2:10을 보세요.http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto

기본적으로 리다이렉트 To: 함수(route Params, 경로, 검색){return search.page}

언급URL : https://stackoverflow.com/questions/15155911/how-to-pass-querystring-in-angular-routes

반응형