如何使用AngularJS获取url参数

小开

我知道这是一个老问题，但考虑到Angular文档很少，我花了一些时间来解决这个问题。RouteProvider和routeParams是正确的方法。路由将URL连接到控制器/视图，routeParams可以传递给控制器。

检查角的种子项目。在app.js中，你会发现一个路由提供程序的例子。要使用参数，只需像这样添加参数:

$routeProvider.when('/view1/:param1/:param2', {
templateUrl: 'partials/partial1.html',
controller: 'MyCtrl1'
});

然后在你的控制器中注入$routeParams:

.controller('MyCtrl1', ['$scope','$routeParams', function($scope, $routeParams) {
var param1 = $routeParams.param1;
var param2 = $routeParams.param2;
...
}]);

使用这种方法，你可以使用参数的url，如: “http://www.example.com/view1/param1/param2”< / p >

小开

虽然路由确实是应用程序级URL解析的一个很好的解决方案，但你可能想要使用更低级的$location服务，就像注入到你自己的服务或控制器中一样:

var paramValue = $location.search().myParam;

这个简单的语法将适用于http://example.com/path?myParam=paramValue。然而，只有当你在HTML 5模式下配置了$locationProvider:

$locationProvider.html5Mode(true);

否则，看看http://example.com/#!/path?myParam=someValue“Hashbang”语法，它有点复杂，但也有在旧浏览器(非html 5兼容)上工作的好处。

小开

如果你在使用ngRoute，你可以将$routeParams注入你的控制器

routeParams美元< a href = " http://docs.angularjs.org/api/ngRoute/service/ " > http://docs.angularjs.org/api/ngRoute/service/美元routeParams < / >

如果你在使用angular-ui-router，你可以注入$stateParams

https://github.com/angular-ui/ui-router/wiki/URL-Routing < a href = " https://github.com/angular-ui/ui-router/wiki/URL-Routing " > < / >

小开

如果已经发布的答案没有帮助，一个人可以尝试 .myParam location.search美元(); http://example.domain#?myParam=paramValue

小开

我发现解决方案如何使用$location.search()从URL获取参数

首先在URL中，你需要把语法“#”放在参数之前，就像这个例子一样

"http://www.example.com/page#?key=value"

然后在你的控制器你把$location函数和使用$location.search()获取URL参数

.controller('yourController', ['$scope', function($scope, $location) {


var param1 = $location.search().param1; //Get parameter from URL


}]);

小开

简单和简单的方法获得url值

First add # to url (e:g -  test.html#key=value)


url in browser (https://stackover.....king-angularjs-1-5#?brand=stackoverflow)


var url = window.location.href


(output: url = "https://stackover.....king-angularjs-1-5#?brand=stackoverflow")


url.split('=').pop()
output "stackoverflow"

小开

function GetURLParameter(parameter) {
var url;
var search;
var parsed;
var count;
var loop;
var searchPhrase;
url = window.location.href;
search = url.indexOf("?");
if (search < 0) {
return "";
}
searchPhrase = parameter + "=";
parsed = url.substr(search+1).split("&");
count = parsed.length;
for(loop=0;loop<count;loop++) {
if (parsed[loop].substr(0,searchPhrase.length)==searchPhrase) {
return decodeURI(parsed[loop].substr(searchPhrase.length));
}
}
return "";
}

小开

当使用angularjs和express

在我的例子中，我使用angularjs与express做路由，所以使用$routeParams会打乱我的路由。我使用下面的代码来得到我所期待的:

const getParameters = (temp, path) => {
const parameters = {};
const tempParts = temp.split('/');
const pathParts = path.split('/');
for (let i = 0; i < tempParts.length; i++) {
const element = tempParts[i];
if(element.startsWith(':')) {
const key = element.substring(1,element.length);
parameters[key] = pathParts[i];
}
}
return parameters;
};

它接收一个URL模板和给定位置的路径。我只是用:

const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $location.path());

把所有这些放在一起我的控制器是:

.controller('TestController', ['$scope', function($scope, $window) {
const getParameters = (temp, path) => {
const parameters = {};
const tempParts = temp.split('/');
const pathParts = path.split('/');
for (let i = 0; i < tempParts.length; i++) {
const element = tempParts[i];
if(element.startsWith(':')) {
const key = element.substring(1,element.length);
parameters[key] = pathParts[i];
}
}
return parameters;
};


const params = getParameters('/:table/:id/visit/:place_id/on/:interval/something', $window.location.pathname);
}]);

结果将是:

{ table: "users", id: "1", place_id: "43", interval: "week" }

希望这能帮助到一些人!

小开

在路由器中:

url: "/login/reset_password/:user/:token"

在你的控制器中:

let userParam = $state.params.user
let tokenParam = $state.params.token