I am trying to do a Route in AngularJS 1.6.6, but I don't realize why it's not working.
I have searched for every post here about this subject, but I didn't find the answer.
I am trying to run this on WAMP local server. So far, everything worked, except when I started using ngRoute.
It's not the same problem that I have found (like this angularjs 1.6.0 (latest now) routes not working) because I am not trying to click in a link to reach out the main.html, but so only to load this inside the index.html as a main content (the first content to be displayed).
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 (the template)
<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");
}
});
The application doesn't display any error, and all of assets load ok. But I only see a blank page instead:
When I inspect the page, I see my <ng-view> only as a comment in the html.
If I move the main.html content in place of <ng-view>, write the ng-controller="BoardController" inside of <div class="container"> (in index.html) and I comment the routes on app.js, everything works (that means there is no error in my Controller, I think):
