Каков наиболее сжатый способ чтения параметров запроса в AngularJS?

Вы можете ввести $ routeParams (требуется ngRoute ) в ваш controller. Вот пример из документов:

 // Given: // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby // Route: /Chapter/:chapterId/Section/:sectionId // // Then $routeParams ==> {chapterId:1, sectionId:2, search:'moby'} 

EDIT: вы также можете получить и установить параметры запроса с помощью службы $ location (доступной в ng ), в частности, ее метода search : $ location.search () .

$ routeParams менее полезны после начальной загрузки controllerа; $location.search() можно вызывать в любое время.

Хорошо, что вам удалось заставить его работать с режимом html5, но также можно заставить его работать в режиме hashbang.

Вы можете просто использовать:

 $location.search().target 

чтобы получить доступ к параметру «целевого» поиска.

Для справки, вот рабочий jsFiddle: http://web.archive.org/web/20130317065234/http://jsfiddle.net/PHnLb/7/

 var myApp = angular.module('myApp', []); function MyCtrl($scope, $location) { $scope.location = $location; $scope.$watch('location.search()', function() { $scope.target = ($location.search()).target; }, true); $scope.changeTarget = function(name) { $location.search('target', name); } } 

 
 Bob Paul 
 URL 'target' param getter: {{target}}
 Full url: {{location.absUrl()}} 
 target=Pawel  

Чтобы дать частичный ответ на мой собственный вопрос, вот рабочий пример для браузеров HTML5:

        Target: {{target}}
   

Ключ должен был вызвать $locationProvider.html5Mode(true); как сделано выше. Теперь он работает при открытии http://127.0.0.1:8080/test.html?target=bob . Я не доволен тем, что он не будет работать в старых браузерах, но я мог бы использовать этот подход в любом случае.

Альтернативой, которая будет работать со старыми браузерами, было бы отказаться от html5mode(true) и вместо этого использовать следующий адрес с hash + slash:

http://127.0.0.1:8080/test.html#/?target=bob

Соответствующая документация находится в руководстве разработчика: Угловые сервисы: использование $ location (странно, что мой поиск в Google не нашел этого …).

Это можно сделать двумя способами:

1. Использование $routeParams

Лучшее и рекомендуемое решение – использовать $routeParams в вашем controllerе. Он требует ngRoute модуля ngRoute .

  function MyController($scope, $routeParams) { // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby // Route: /Chapter/:chapterId/Section/:sectionId // $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'} var search = $routeParams.search; } 

2. Использование $location.search() .

Здесь есть оговорка. Он будет работать только в режиме HTML5. По умолчанию он не работает для URL-адреса, который не имеет хеша ( # ) в нем http://localhost/test?param1=abc&param2=def

Вы можете заставить его работать, добавив #/ в URL. http://localhost/test#/?param1=abc&param2=def

$location.search() чтобы вернуть объект, например:

 { param1: 'abc', param2: 'def' } 

$ location.search () будет работать только с включенным режимом HTML5 и только при поддержке браузера.

Это будет работать всегда:

$ window.location.search

Просто чтобы летать.

Если ваше приложение загружается из внешних ссылок, то угловое не обнаружит это как изменение URL, поэтому $ loaction.search () даст вам пустой объект. Чтобы решить эту проблему, вам нужно установить следующие настройки приложения (app.js)

 .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl: 'views/main.html', controller: 'MainCtrl' }) .otherwise({ redirectTo: '/' }); $locationProvider.html5Mode(true); }]); 

Просто точность ответа Эллиса Уайтхеда. $locationProvider.html5Mode(true); не будет работать с новой версией angularjs без указания базового URL-адреса приложения с или установки параметра requireBase в значение false

Из документа :

Если вы настроите $ location для использования html5Mode (history.pushState), вам нужно указать базовый URL-адрес приложения с тегом или настроить $ locationProvider, чтобы не требовать базовый тег, передав объект определения с requireBase: false в $ locationProvider. html5Mode ():

 $locationProvider.html5Mode({ enabled: true, requireBase: false }); 

вы также можете использовать $ location. $$ search.yourparameter

это может помочь вам

Каков наиболее сжатый способ чтения параметров запроса в AngularJS

 // Given: // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby // Route: /Chapter/:chapterId/Section/:sectionId // // Then $routeParams ==> {chapterId:1, sectionId:2, search:'moby'}        Target: {{target}}
   ($location.search()).target 

Я обнаружил, что для SPA HTML5Mode возникает множество проблем с ошибками 404, и нет необходимости делать работу $ location.search в этом случае. В моем случае я хочу захватить параметр строки запроса URL-адреса, когда пользователь приходит на мой сайт, независимо от того, к какой «странице» они изначально ссылаются, И иметь возможность отправлять их на эту страницу после входа в систему. Поэтому я просто фиксирую все этот материал в app.run

 $rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) { if (fromState.name === "") { e.preventDefault(); $rootScope.initialPage = toState.name; $rootScope.initialParams = toParams; return; } if ($location.search().hasOwnProperty('role')) { $rootScope.roleParameter = $location.search()['role']; } ... } 

то позже после входа я могу сказать $ state.go ($ rootScope.initialPage, $ rootScope.initialParams)

Это немного поздно, но я думаю, что ваша проблема была в вашем URL. Если вместо

 http://127.0.0.1:8080/test.html?target=bob 

ты имел

 http://127.0.0.1:8080/test.html#/?target=bob 

Я почти уверен, что это сработало бы. Угловая действительно придирчивы к ее # /