如何使用AngularJS获取URL参数

13 浏览
0 Comments

如何使用AngularJS获取URL参数

HTML源代码\n

      
      $location.url() = {{$location.url()}}
      $location.search() = {{$location.search('keyword')}}
      $location.hash() = {{$location.hash()}}     
      关键字值为={{loc}}和={{loc1}}

\nAngularJS源代码\n

\n这里变量loc和loc1都返回上述URL的结果为test。这是正确的方法吗？

0

3 答案

0 Comments

在使用AngularJS时，有时候需要获取URL参数，这个问题的出现可能是因为我们需要根据URL参数的值来进行相应的操作或展示。解决这个问题的方法可以根据使用的路由库的不同而有所不同。

如果我们使用的是ngRoute库，可以在控制器中注入$routeParams来获取URL参数的值。具体可以参考http://docs.angularjs.org/api/ngRoute/service/$routeParams。

如果我们使用的是angular-ui-router库，可以在控制器中注入$stateParams来获取URL参数的值。具体可以参考https://github.com/angular-ui/ui-router/wiki/URL-Routing。

对于在$stateParams中显示查询参数，我们需要在定义状态时指定它们，如在github.com/angular-ui/ui-router/wiki/…中所示。

0
0 Comments

在使用AngularJS时，我们可能需要获取URL参数。虽然路由是应用级别的URL解析的好解决方案，但你可能会希望使用更低级别的$location服务，可以注入到自己的服务或控制器中：

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

这种简单的语法适用于http://example.com/path?myParam=paramValue。但前提是你在HTML5模式下配置了$locationProvider：

$locationProvider.html5Mode(true);

否则，你可以看一下"Hashbang"语法，它稍微复杂一些，但可以在旧浏览器（非HTML5兼容）上工作：

http://example.com/#!/path?myParam=someValue

看起来你需要将$locationProvider.html5mode(true)添加为模块配置，如下所示：

angular.module("myApp", []).config(function($locationProvider) { $locationProvider.html5Mode(true); });

而且html5Mode在你的index.html中需要一个<base href="http://example.com/en/" />标签。

我喜欢你的解决方案的原因是你甚至可以传递对象，并将它们作为对象获取。

也可以不添加<base>标签，并像这样指定：.config(['$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ enabled: true, requireBase: false }); }])

在Angular 1.5.8中，我不需要配置$locationProvider就可以使其工作：http://example.com/path#?someKey=someVal，然后$location.search().someKey // => 'someVal'。

0
0 Comments

如何使用AngularJS获取URL参数

在使用AngularJS时，有时候需要获取URL参数。下面是一个解决这个问题的方法。

首先，需要使用RouteProvider和routeParams。RouteProvider用于将URL与控制器/视图关联起来，而routeParams可以传递给控制器。

在Angular的app.js文件中，可以找到一个使用route provider的示例。要使用参数，只需像这样添加它们：

$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"

注意，示例的最后一行应为 "});"，而不是 "}]);"

还可以使用$routeParams.other来获取查询字符串中的其他任意参数，例如 "/view/1/2?other=12"。

这种方法非常简单，对于具有多个前端路由的情况非常适用，但如果只是想解析参数，可能有些过于复杂了。

通过以上方法，可以轻松地在AngularJS中获取URL参数。

0