无法通过动态列表路由到SPA角度的其他页面 [英] Cannot route to other pages in SPA angular with dynamic list

问题描述

我正在使用角度为1.6的单页应用程序.每当我使用静态列表重定向路由时，它都可以正常工作，但是当尝试使用json中的动态列表时，却无法获取.

I'm using single page application using angular 1.6. Whenever I use the static list to redirect the routes, it was working fine, but when trying with dynamic list from json, i couldn't get it.

这是JSON:

 {
      "People": [{
          "name": "Andrew Amernante",
          "rating": 3,
        },
        {
          "name": "Frank Wang",
          "rating": 5,
        },
        {
          "name": "Chang Wang",
          "rating": 5,
        }
      ]
    }

在Controller中，我有这些代码段.

In Controller, I have these code snippets.

var app = angular.module('myApp', ['ngRoute']);
app.config(['$locationProvider', function($locationProvider) {
    $locationProvider.hashPrefix('');
  }]);
app.config(function($routeProvider) {
  $routeProvider

  .when('/', {
    templateUrl : 'Andrew Amernante.html',
    controller  : 'HomeController'
  })

  .when('/blog', {
    templateUrl : 'Frank Wang.html',
    controller  : 'BlogController'
  })

  .when('/about', {
    templateUrl : 'Sissi Chen.html',
    controller  : 'AboutController'
  })

  .otherwise({redirectTo: '/'});
});

app.controller('mainController', function($scope, $http) {
  $http.get('people.json').
  then(function onSuccess(response) {
    console.log(response);
    $scope.peoples = response.data;

  }).
  catch(function onError(response) {
    console.log(response);
  });
});

而且，我想遍历数组并在列表中显示三个名称.

And, I wanted to iterate the array and display the three name in list.

<ul class="nav">
      <li class="active" ng-repeat="item in peoples.People track by $index">
                    <a href="#{{item.name}}">{{item.name}}</a>
       </li>
 </ul>

<div ng-view></div>

<script type="text/ng-template" id="Andrew Amernante.html">
    <h1>Home</h1>
    <h3>{{message}}</h3>
  </script>
  <script type="text/ng-template" id="Frank Wang.html">
    <h1>Blog</h1>
    <h3>{{message}}</h3>
  </script>
  <script type="text/ng-template" id="Sissi Chen.html">
    <h1>About</h1>
    <h3>{{message}}</h3>
  </script>

这是plunkr代码- Plnkr

Here is the plunkr code - Plnkr

推荐答案

完整阅读(这显示了快速修复程序，不建议在现实生活"应用中使用！)

错误在于您如何绘制路线.

The error lies in how you're mapping your routes.

具体来说， when 与内容之间的不一致之处，该内容带有 people.json#People 中对象的 name 属性.

Especifically there is an inconsistency between the when and the content which carries the name property of the objects in people.json#People.

例如，以下代码期望 blog 和 about

For instance the below code expects routes for blog and about

  .when('/blog', { // < -- there is no route for this!
    templateUrl : 'Frank Wang.html',
    controller  : 'BlogController'
  })

  .when('/about', { // < -- there is no route for this!
    templateUrl : 'Sissi Chen.html',
    controller  : 'AboutController'
  })

但是您可以通过以下方式提供(通过执行 href =#{{{item.name}}" ): Andrew Amernante ， Frank Wang ， Chang Wang 等...如此... People 数组中包含的对象中的名称.

But you provide (by doing href="#{{item.name}}") these routes: Andrew Amernante, Frank Wang, Chang Wang, and so on... so... the names in the objects contained in People array.

为了(快速)修复此问题，将先前的代码更改为:

In order to (quickly) fix this change the previous code to:

  .when('/Andrew Amernante', {
    templateUrl : 'Frank Wang.html',
    controller  : 'BlogController'
  })

  .when('/Frank Wang', {
    templateUrl : 'Sissi Chen.html',
    controller  : 'AboutController'
  })
  // add one for every name
  .when('/<every-name>', {
    templateUrl : '<every-name>.html',
    controller  : '<every-controller>'
  })

在 此叉状柱塞 中查看此替代方法.

See this alternative in this forked Plunker.

但是在真实"应用中这不是可维护的代码.

相反，您应该按照

Instead you should do as suggested in this answer by Pop-A-Stash in which you provide a template and the content changes according to a provided parameter.

这篇关于无法通过动态列表路由到SPA角度的其他页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！