Question

我还在经历学习路线和参数的过程。我以为我已经把它想出来但还没到那里。

我的想法是在点击时只提供有关用户的一些信息，而不为每个用户提供文件。这意味着我只想要一个html文件，它将会加载＆＃34;加载＆＃34;将由参数触发。

所以这是我的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>

...

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

Answer 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;

    });

Answer 2

您可以使用$routeParams。

JS

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>

ngRoute使用参数

2 个答案: