如何使用AngularJS

177

<div ng-app=""> 
    <div ng-controller="test"> 
     <div ng-address-bar browser="html5"></div> 
     <br><br> 
     $location.url() = {{$location.url()}}<br> 
     $location.search() = {{$location.search('keyword')}}<br> 
     $location.hash() = {{$location.hash()}}<br>  
     keyword valus is={{loc}} and ={{loc1}} 
    </div> 
</div>

AngularJS源代码

<script> 
function test($scope, $location) { 
    $scope.$location = $location; 
    $scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u'); 
    $scope.loc1 = $scope.$location.search().keyword ;  
    if($location.url().indexOf('keyword') > -1){  
     $scope.loc= $location.url().split('=')[1]; 
     $scope.loc = $scope.loc.split("#")[0]   
    } 
    } 
</script>

这里变量loc和loc1得到URL参数都返回测试作为结果的上方网址。这是正确的方法吗？

来源

2012-08-01 praveenpds

您可能想查看[$ routeParams]（http://docs.angularjs.org/api/ng.$routeParams）。 – 2012-11-08 22:37:40

不清楚你在这里问什么... $ routeParams和$ location＃methods文档应该让你开始 – deck 2013-09-06 06:44:09

请在投票时加入一条评论，以便改善问题。谢谢。 – praveenpds 2014-08-13 12:17:33

290

我知道这是一个古老的问题，但我花了一些时间对稀疏的Angular文档进行分类。 RouteProvider和routeParams是要走的路。路由将URL连接到您的Controller/View，并将routeParams传递给控制器。

查看Angular seed项目。在app.js中，您会找到路由提供者的示例。要使用PARAMS只是追加他们是这样的：

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

来源

2013-05-21 14:26:23 Jeff

请注意，这个例子的最后一行'''}）;'''应该是'''}]）;''' – 2013-09-18 17:12:34

+39

也可以在查询字符串窗体'/ view/1/2中获得其他任意参数？其他= 12'与'$ routeParams.other' – DavidC 2014-08-17 21:04:41

我认为你的控制器中重复了'var param1'。我无法编辑这样一个简单的改变。 – Tom 2016-05-14 04:35:08

142

虽然路由的确是应用程序级的URL解析一个很好的解决方案，您可能需要使用更低水平$location服务，在自己的服务或控制器注入：

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

这个简单的语法将对http://example.com/path?myParam=paramValue工作。

$locationProvider.html5Mode(true);

否则有看http://example.com/#!/path?myParam=someValue“Hashbang”语法是有点复杂，但对旧的浏览器工作的好处（：但是，只有当你之前配置的HTML 5模式$locationProvider非HTML 5兼容）。

来源

2013-10-20 19:33:02 Javarome

+13

它看起来像你必须像这样添加$ locationProvider.html5mode（true）作为模块配置：angular.module（“myApp”，[]）。 config（function（$ locationProvider）{ $ locationProvider.html5Mode（true）; }）; – sq1020 2014-08-04 16:57:39

而html5Mode需要'index.html'中的''标签。 – cespon 2015-03-31 10:33:35

我喜欢你的解决方案是，你甚至可以传递对象，并将它们作为对象。 – Shilan 2015-11-26 12:39:24

如果您使用ngRoute，你可以注入$routeParams到控制器中

http://docs.angularjs.org/api/ngRoute/service/$routeParams

如果您使用的角度-UI-路由器，你可以注入$stateParams

https://github.com/angular-ui/ui-router/wiki/URL-Routing

来源

2014-03-24 01:20:39 jlents

对于'$ stateParams'来显示查询参数，我必须在定义状态时指定它们，如https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters – Parziphal 2014-07-22 21:14:23

如果已发布的答案没有帮助，可以尝试使用 $ location.search（）。myParam; 与网址http://example.domain#?myParam=paramValue

来源

2016-02-26 00:11:21 ak1