ngRoute 使用参数答案

【问题标题】：ngRoute using parametersngRoute 使用参数
【发布时间】：2018-01-11 18:13:51
【问题描述】：

我仍在学习路线和参数的过程中。我以为我已经弄清楚了，但还没有完全解决。

我的想法是在单击时仅路由有关用户的一些信息，而无需为每个用户提供文件。这意味着我只想要一个 html 文件，它将“加载”的数据将由参数触发。

这是我的 app.js 文件：

(function(){

    var app = angular.module('Platform', []);


    app.controller('getUser', function(){
        this.users = arrayOfUsers;
        });

    var arrayOfUsers = [
    {
        firstName: "George",
        lastName: "Best",
    },
        {
        firstName: "Dame",
        lastName: "Lillard",
    }
    ];

    Platform.config(function ($routeProvider) {
        $routeProvider
        .when("/",
        {
            controller:"getUser",
            templateUrl:"index.html"    
        })
        .when("/users/:user",
        {
            controller:"getUser",
            templateUrl:"UserPartial.html"  
        });
    });
})();

我的 index.html 文件：

<body ng-controller="getUser as users">
...

    <li><a href="users/{{users.users[0].firstName}}">{{users.users[0].firstName}}</a></li>

...

我想要这样，这样 url 就可以匹配用户名的名字。我知道这涉及参数，但我不太清楚。我知道我需要创建参数并使用 ngRoute，但我不太清楚如何。我也不确定是否应该创建另一个模块来使用 ngRoute。谢谢阅读：）有什么想法吗？

【问题讨论】：

标签： angularjs parameters routing ngroute

【解决方案1】：

将 Platform.config(function ($routeProvider) {... 更改为 app.config。

然后，如果需要访问数据，注入$route，在单视图控制器中访问$route.current.params：

    app.controller('getUser', function($route){

      // not sure what this is?
      // this.users = arrayOfUsers;

       $route.current.params;

    });

【讨论】：

更改为 app.config 会使整个事情不起作用。 this.users = arrayOfUsers;这是一个存储将确定 URL 的用户数据的数组

【解决方案2】：

您可以使用$routeParams。

var app = angular.module('Platform', ['ngRoute']);
  app.controller('getUser', function($scope, $routeParams){
      this.users = arrayOfUsers;
      $scope.user = $routeParams.user;
   });

在html中使用

<p>{{user}}</p>

完整的html

<html ng-app="Platform">
  <head>
    <script type="text/ng-template" id="UserPartial.html">
      <span>      Content of the template. </span>
      <p>{{user}}</p>
    </script>

    <script type="text/ng-template" id="index.html">
    </script>

  </head>

  <body ng-controller="getUser as users">

    <ul>
      <li><a href="#/">home</a></li>
      <li><a href="#/users/George">George</a></li>
      <li><a href="#/users/Dame">Dame</a></li>
    </ul>

    <div ng-view></div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
    <script>
    var app = angular.module('Platform', ['ngRoute']);
      app.controller('getUser', function($scope, $routeParams){
          this.users = arrayOfUsers;
          $scope.user = $routeParams.user;
          });

      var arrayOfUsers = [
      {
          firstName: "George",
          lastName: "Best",
      },
          {
          firstName: "Dame",
          lastName: "Lillard",
      }
      ];

      app.config(function ($routeProvider) {
          $routeProvider
          .when("/",
          {
              controller:"getUser",
              templateUrl:"index.html"
          })
          .when("/users/:user",
          {
              controller:"getUser",
              templateUrl:"UserPartial.html"
          });
      });
    </script>
  </body>

</html>

【讨论】：

我做了这个改变 var app = angular.module('Platform', ['ngRoute']); app.controller('getUser', function($scope, $routeParams){ $scope.utilizadores = users; $scope.user = $routeParams.user; });我不明白html部分。你能解释一下添加了什么吗？你说的是“$scope.user = $routeParams.user;”，但不是两个变量都未定义吗？它应该如何工作？
$routeParams 持有$routeProvider.when(...) 中定义的参数，类似于{user: "George"}。在控制器中，$scope.user = $routeParams.user`在$scope中定义了一个新变量user，所以你可以使用它以角度方式{{user}}在html中显示。 <span> Content of the template. </span> <p>{{user}}</p>
它不工作。它一直显示我想要的 URL .../users/George 但然后只是说“找不到页面”。
可以粘贴 UserPartial.html 吗？
一个简单的段落
connected
不应该在对象中定义 $scope.user 吗？