在 HTML 中使用 URL 参数 by 变量与 AngularJS

Question

我遇到了和昨天一样的问题：我需要通过 AngularJS 在 HTML 页面中使用 URL 中的参数。我的错误是什么？

我需要显示并使用这样的参数：

https://url.com/index.html?user

我需要得到这个"用户"，但现在它不起作用，现在没有错误，实际上什么都没有，实际上只是一个只有@的空h1。 :(

<div class="container" id="body-container" ng-controller="myController as myApp">
  <h1 id="header-username">@{{myApp.user}}</h1>
</div>

我应该做点别的吗？

(function () {
    var app = angular.module('MyApp', ['ngRoute']);
    app.controller('myController', function ($scope, $location) {
        this.user = $location.search();
    });
})();

Answer 1

$location服务的默认行为是在哈希邦模式下工作。在此模式下，search（） 方法返回 ？仅当 # 存在于 URL 中时。

http://url.com/index.html#/?user

由于您的 url 没有 #，因此 search（） 不会返回任何内容。

您可以尝试使用 HTML5 模式，该模式不需要 # 出现在 url 中。在这种情况下，search（） 返回 {"user"： true}。

http://url.com/index.html/?user

要使用 HTML5 模式，请按如下方式配置$locationProvider

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

检查这个弹道

Answer 2

如果您使用的是angularJS 1.*（我不确定它是否与angular2相同），则可以使用$routeProvider，然后使用$routeParams从URL中获取值。

检查这个网站有一个很好的例子：http://heycodetech.com/how-to-get-the-url-parameters-using-angularjs/

如果要使用该服务$location，则问题可能是由于尚未绑定"user"。尝试这样的事情：

https://url.com/index.html?user='toto'
.controller(‘myController’, function ($scope,$location) {
$outputJson = $location.search(); // will get all parameter of your URL in json format
var param1 = $location.search().user; // will get the value bond to "user"
});