【发布时间】：2017-10-06 16:47:44
【问题描述】：
我正在尝试在 AngularJS 1.6.6 中执行 Route，但我不知道为什么它不起作用。
我在这里搜索了有关此主题的所有帖子，但没有找到答案。
我正在尝试在 WAMP 本地服务器上运行它。到目前为止，一切正常，除了我开始使用ngRoute。
这与我发现的问题不同（例如angularjs 1.6.0 (latest now) routes not working），因为我不是试图单击链接以访问 main.html，而是仅将其加载到索引中。 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" 写入 <div class="container"> 内（在 index.html 中），然后我在 app.js 上评论路由，一切正常（这意味着那里我认为我的控制器没有错误）：
【问题讨论】：
-
main.html的完整路径是什么 -
控制台有错误吗？
-
不，控制台中没有错误...
-
您确定控制器正在执行自己吗？尝试在 BoardController 中记录一些内容？
标签： javascript angularjs