Question

我正在尝试在AngularJS 1.6.6中进行Route，但我不知道为什么它不起作用。我在这里搜索了关于这个主题的每篇文章，但我找不到答案。

我正在尝试在WAMP本地服务器上运行它。到目前为止，一切都有效，除非我开始使用ngRoute。

这与我找到的问题不同（例如angularjs 1.6.0 (latest now) routes not working}，因为我并不是想点击链接来触及main.html，但只是为了加载它index.html作为主要内容（第一个要显示的内容）。

app.js

angular.module('warmup', ['ngRoute'])
.config(function($locationProvider, $routeProvider){

    //$locationProvider.html5Mode(false).hashPrefix(''); => this is something that I tried...

    $routeProvider
    .when('/', {
        templateURL: 'views/main.html',
        controller: 'BoardController'
    })
    .otherwise({redirectTo: '/'});

});

的index.html

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>AngularJS - Warmup</title>

    <link rel="stylesheet" href="styles/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="styles/main.css">
  </head>
  <body ng-app="warmup">

    <!-- PLEASE SEE, THERE IS NOT ANY LINK HERE -->
    <!-- content -->
    <div class="container">
       <ng-view></ng-view>
    </div>

    <!-- scripts -->
    <script src="scripts/angular/angular.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/board/board-controller.js"></script>
    <script src="scripts/angular/angular-route.min.js"></script>

  </body>
</html>

main.html（模板）

 <div id="content">
    <div ng-style="boardStyle" class="board">
      <div ng-repeat="tile in getNumber(tiles) track by $index" 
        ng-click="changeToggle($index)" ng-init="initToggle($index)" 
        ng-model="status[$index]" ng-style="style($index)"></div>
    </div>
  </div>

  <nav id="sideNav">
    <h3>Controls</h3>
    <div class="btn-wrapper">
      <a ng-href="#" ng-click="startSelect()" id="start" class="button">Start</a>
      <a ng-href="#" ng-click="endSelect()" id="end" class="button">End</a>
      <a href="#" id="go" class="button not-active">GO!</a>
      <hr>
      <div class="settings"></div>
    </div>
  </nav>

BoardController.js

angular.module('warmup').controller('BoardController', function($scope) {

    /* Tiles variables and functions */

    var size = 12;
    $scope.tiles = [];

    $scope.tiles = size * size;
    $scope.getNumber = function(num) {
        return new Array(num);   
    }
    //Get the coordinates in a bi-dimensional array
    _positionToCoordinates = function($index) {
        var x = $index % size,
            y = ($index - x) / size;
        // return [
        //   x, y
        // ];
        return {
            x: x,
            y: y
        };
      };

    $scope.status = [];

    /* Styles functions */

    var boardHeight = window.innerHeight/3;
    var boardWidth = boardHeight;

    var tileHeight = boardHeight/12 - .3;
    var tileWidth = tileHeight;

    $scope.boardStyle = {
        "height" : boardHeight + 'px',
        "width" : boardWidth + 'px',
        "border" : "1px solid #AAA"
    }
    // Colors array => it will be dynamic
    var colors = [
        {name: "main", color: "white"},
        {name: "locker", color: "black"}, 
        {name: "start", color: "green"},
        {name: "end", color: "blue"},
        {name: "path", color: "yellow"}
    ];
    $scope.style = function ($index) {       
        return {
            "height" : tileHeight + 'px',
            "width" : tileWidth + 'px',
            "border" : "1px solid #CCC",
            "background-color": colors[$scope.status[$index]].color,
            "float": "left"
        }
    }

    /* Events */

    var isStartSelected = false;
    var isEndSelected = false;

    $scope.initToggle = function($index) {
      $scope.status[$index] = 0;
    }

    $scope.changeToggle = function($index) {
        if (isStartSelected) {
            for (var i in $scope.status) {
                if ($scope.status[i] === 2) {
                    $scope.status[i] = 0;
                }
            }
            $scope.status[$index] = 2;
            console.log($scope.status[$index]);
            console.log(_positionToCoordinates($index));
        }else if (isEndSelected) {
            for (var i in $scope.status) {
                if ($scope.status[i] === 3) {
                    $scope.status[i] = 0;
                }
            }
            $scope.status[$index] = 3;
            console.log($scope.status[$index]);
            console.log(_positionToCoordinates($index));
        } else {
            // $scope.status[$index] = 0 ? 0 : 1;
            $scope.status[$index] = ($scope.status[$index] === 0 ? 1 : 0);
            console.log($scope.status[$index]);
        }
    }

    $scope.startSelect = function(){
        isStartSelected = true;
        isEndSelected = false;
        console.log("click start");       
    }

    $scope.endSelect = function(){
        isEndSelected = true;
        isStartSelected = false;
        console.log("click end");        
    }


  });

应用程序不显示任何错误，并且所有资产都加载正常。但我只看到一个空白页面：

当我检查页面时，我只将<ng-view>视为html中的注释。

如果我移动main.html内容代替<ng-view>，请在ng-controller="BoardController"（在index.html中）内写<div class="container">，然后在app.js上评论路线，一切正常（这意味着我的控制器中没有错误，我认为）：

Answer 1

v1.6中的ng-route库有一些变化请在此处查看详细答案：https://stackoverflow.com/a/41655831/6347317

还引用了另一个答案，我给了：https://stackoverflow.com/a/45808238/6347317

请尝试使用＆＃34;＃！route＆＃34;。

来引用您的路线

修改：忽略上述答案。解决方案似乎很简单。有一个错字。＆＃34; templateURL＆＃34;应该是＆＃34; templateUrl＆＃34; 。：）

 $routeProvider
    .when('/', {
        templateURL: 'views/main.html',
        controller: 'BoardController'
    })

应该是：

  $routeProvider
    .when('/', {
        templateUrl: 'views/main.html',
        controller: 'BoardController'
    })

ngRoute不工作 - AngularJS 1.6.6

1 个答案: