I'm experiencing an issue with the ui-routing in my AngularJS app. It was working smoothly before, and I can't recall making any changes that might have impacted the routing.
When I start debugging, the app loads correctly with the index navbar and home view displaying properly. However, when I click on the home link in the navbar, the request fails, and the index page along with the home view doesn't load.
I am using NetBeans to develop my app.
Folder structure: root --app ----services ----controllers ----css ----data ----js ----views index.html
Here is my index.html:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="myApp">
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app/css/bootstrap.min.css" >
<link rel="stylesheet" href="app/css/bootstrap.css" >
</head>
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/home">Home</a></li>
<li class="dropdown">
<a ui-sref="hydrotel" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hydrotel<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="hydrotel.overview">Overview</a></li>
<li role="seperator" class="divider"></li>
<li><a ui-sref="hydrotel.interfaces">Interfaces</a></li>
<li><a ui-sref="hydrotel.dataTransfer">Data Transfers</a></li>
</ul>
</li>
<li class="dropdown">
<a ui-sref="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">WISKI<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="wiski">Overview</a></li>
</ul>
</li>
<li class="dropdown">
<a ui-sref="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hydstra<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="hydstra">Overview</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="main">
<div ui-view></div>
</div>
<script src="app/js/angular.min.js" type="text/javascript"></script>
<script src="App/js/angular-table.js" type="text/javascript"></script>
<script src="App/js/angular-table.min.js" type="text/javascript"></script>
<script src="App/js/angular-route.min.js" type="text/javascript"></script>
<script src="App/js/angular-ui-router.min.js" type="text/javascript"></script>
<script src="App/js/angular-ui-router.js" type="text/javascript"></script>
<script src="app/js/jquery-2.2.0.js" type="text/javascript"></script>
<script src="app/js/bootstrap.min.js" type="text/javascript"></script>
<script src="App/js/app.js" type="text/javascript"></script>
<script src="App/controllers/homeController.js" type="text/javascript"></script>
<script src="App/controllers/hydrotelController.js" type="text/javascript"></script>
<script src="App/controllers/overviewController.js" type="text/javascript"></script>
<script src="App/controllers/interfaceController.js" type="text/javascript"></script>
<script src="App/controllers/dataTransferController.js" type="text/javascript"></script>
<script src="App/controllers/hydstraController.js" type="text/javascript"></script>
<script src="App/js/ng-google-chart.min.js" type="text/javascript"></script>
<script src="App/js/ng-google-chart.js" type="text/javascript"></script>
<script src="App/js/smart-table.min.js" type="text/javascript"></script>
<script src="App/js/smart-table.js" type="text/javascript"></script>
</body>
</html>
This is my app.js where I define the module and routing:
var app = angular.module('myApp',['ui.router','googlechart','smart-table']);
app.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider,$urlRouterProvider){
$stateProvider
.state('home',{
url: '/home',
templateUrl: 'app/views/home.html',
controller: 'homeController'
})
.state('hydstra',{
url: '/hydstra',
templateUrl: 'app/views/hydstra.html',
controller: 'hydstraController'
})
.state('hydrotel', {
url: '/hydrotel',
templateUrl: 'app/views/hydrotel.html',
controller: 'hydrotelController'
})
.state('hydrotel.overview',{
url: '/overview',
templateUrl: 'app/views/hydrotelOverview.html',
controller: 'overviewController'
})
.state('hydrotel.interfaces',{
url: '/interfaces',
templateUrl: 'app/views/Interfaces.html',
controller: 'interfaceController'
})
.state('hydrotel.dataTransfer',{
url: '/dataTransfer',
templateUrl: 'app/views/dataTransfer.html',
controller: 'dataTransferController'
});
$urlRouterProvider.otherwise('/home');
}]);
If you need more information, feel free to ask.