ng-view无法按预期工作

Ok, I was trying to create a simple plunkr for a question related to loading times in SPAs with ng-view and it seems I can´t even manage to create a valid scenario.

好吧，我试图创建一个简单的plunkr来解决与使用ng-view的SPA中的加载时间相关的问题，似乎我甚至无法创建一个有效的场景。

What I want is a SPA with a ng-view and 2 templates, so every template displays some basic data and can navigate to the other template.

我想要的是带有ng-view和2个模板的SPA，因此每个模板都会显示一些基本数据，并可以导航到另一个模板。

Here is the plunkr and this is the code of the spa

这是plunkr，这是水疗中心的代码

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script data-require="angular-route@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="app">
      <div ng-view=""></div>
    </div>
  </body>

</html>

and here is the js

这是js

angular

.module('app', ['ngRoute'])

.controller('ScreenController', ScreenController)

.config(['$routeProvider', routeProvider])

ScreenController.$inject = [ '$scope' ];

// initial navigation
function routeProvider($routeProvider) {

  $routeProvider.
  when('/screen1.html', {
    templateUrl: './screen1.html',
    controller: ScreenController
  }).
  when('/screen2.html', {
    templateUrl: './screen2.html',
    controller: ScreenController
  }).
  otherwise({
    url: '/screen1.html',
    templateUrl: './screen1.html',
    controller: ScreenController
  });
}

function ScreenController($scope) {

  $scope.data1 = [];
  $scope.data2 = [];

  $scope.ready = false;

  $scope.numElements = function(scr) {
    var length = scr === '1' ? $scope.data1.length : $scope.data2.length;
    return 'Data has ' + length + ' elements';
  }

  function init() {
    console.info('ScreenController.init');

    $scope.data1 = [
    { a:'a1', b: 'b1' },
    { a:'a2', b: 'b2' },
    { a:'a3', b: 'b3' },
    { a:'a4', b: 'b4' },
    { a:'a5', b: 'b5' },
    { a:'a6', b: 'b6' },
    { a:'a7', b: 'b7' },
    { a:'a8', b: 'b8' }
    ];

    $scope.data2 = [
    { a:'a1', b: 'b1', c:'c1', d:'d1' },
    { a:'a2', b: 'b2', c:'c2', d:'d2' },
    { a:'a3', b: 'b3', c:'c3', d:'d3' },
    { a:'a4', b: 'b4', c:'c4', d:'d4' }
    ];

    console.info('data1: ' + JSON.stringify($scope.data1));
    console.info('data2: ' + JSON.stringify($scope.data2));
    $scope.ready = true;
  }

  init();
}

This is not working as I expected.

这不符合我的预期。

The first time it loads, the page seems to be working fine as it shows template screen1.html and the data. But once I start clicking the links it doesn´t work anymore, the Controller is not accessed and data is not displayed. Any ideas why?

第一次加载时，页面似乎工作正常，因为它显示模板screen1.html和数据。但是一旦我开始点击链接它就不再起作用了，不访问Controller并且不显示数据。有什么想法吗？

Many thanks!

非常感谢！

4 个解决方案

#1

You need <a href="#/screen1.html" class="button">To Screen 1</a> Notice the #/. This does not include your other mistakes in your code, like mentioned by others.

您需要至屏幕1 注意＃/。这不包括您的代码中的其他错误，如其他人所提到的。

#2

Your screen1.html

你的screen1.html

<div>
  <div>SCREEN1</div>
  <a href="screen2.html" class="button">To Screen 2</a>
  <table>
    <tbody>
      <tr ng-repeat="elem in data1">
        <td ng-bind="elem.a"></td>
        <td ng-bind="elem.b"></td>
        <td ng-bind="elem.c"></td>
        <td ng-bind="elem.d"></td>
      </tr>
    </tbody>
  </table>
  {{data}} elements
</div>

its data1 and not data

它的数据1而不是数据

#3

This line of code should be <tr ng-repeat="elem in data1"> insted of <tr ng-repeat="elem in data">

这行代码应该是 insted of

#4

First you need to change a few things. Set up your ng-view this way. Also with Angularjs it is best practice to keep with angularjs and try not to mix in to much jquery. change your onload to a ng-init, or better yet just load the function in the js controller file once the page has loaded (constructor)

首先，你需要改变一些事情。以这种方式设置ng-view。对于Angularjs，最好的做法是与angularjs保持一致，尽量不要混入很多jquery。将你的onload更改为ng-init，或者更好，只需在页面加载后加载js控制器文件中的函数（构造函数）

SpaCtrl is your universal controller so you want to us an as statement so it doesnt turn into $scope soup

SpaCtrl是你的通用控制器所以你想要一个as语句，所以它不会变成$ scope汤

<body ng-app="app" ng-controller="SpaCtrl as spa">
  <ng-view ></ng-view>
</body>

Now as for the rest of your code I have split of another plunker for you to see it working. You will notice I changed your js functions to angular functions and it tidied up your html a bit. Let me know if you have any questions!

现在至于你的其余代码我已经拆分了另一个plunker让你看到它正常工作。您会注意到我将您的js函数更改为角度函数，并稍微整理了您的html。如果您有任何疑问，请告诉我！

plunker

#1