Valor_ Valor_ - 6 months ago 18
AngularJS Question

$stateprovider doesn't work or show any kind of errors

I can't figure out why my angular state provider doesn't work and it doesn't show no errors. Previously when i used ngRoute everything was working but now when i included

ui.router
nothing seems to work. Previously once i opened application, /#/ link was generated (routed), but now it just hangs on myapp.com/

my HTML index.html

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MyApp</title>
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
</style>
</head>
<body class="hold-transition skin-blue sidebar-mini" ng-app="app">
<div class="wrapper">
<div class="content-wrapper">
<div ng-view></div>
</div><!-- /.content-wrapper -->
</div>
<script src="plugins/angularJs/angular.js"></script>
<script src="plugins/angularJs/angular-ui-router.js"></script>
<script src="plugins/angularJs/angular-resource.js"></script>
<script src="plugins/angularJs/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="app/app.js"></script>
<!-- Controllers -->
<script src="app/controllers/locations/locationsCtrl.js"></script>
<script src="app/controllers/dashboard/dashboardCtrl.js"></script>
<!-- Factories -->
<script src="app/factories/locationFactory.js"></script>
<script src="app/factories/countriesFactory.js"></script>
<script src="app/factories/provincesFactory.js"></script>
<!-- Filters -->
<script src="app/filters/selectionFilters.js"></script>
</body>
</html>


my dashboard.html

<!-- Content Header (Page header) -->
<section class="content-header">
<h1>Dashboard</h1>
<ol class="breadcrumb">
<li><a href="/"><i class="fa fa-dashboard"></i>Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
{{data}}
</section>


my app.js

var app = angular.module('app', ['ui.router', 'ui.bootstrap']);

app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/dashboard");
$stateProvider
.state('dashboard', {
url: "/dashboard",
templateUrl: "app/templates/dashboard/dashboard.html",
controller: 'dashboardCtrl'
})
.state('locations', {
url: "/locations",
templateUrl: "app/templates/locations/locations.html",
controller: 'locationsCtrl'
})
.state('/locations/add_location', {
url: "/locations/add_location",
templateUrl: "app/templates/locations/add_location.html",
controller: 'addLocationCtrl'
});

});


Interface and console output
Console
Loaded files
enter image description here
I hope you guys know what is going on or what am i missing. If you need any additional information's please let me know and i will provide.

Answer

Try add

<base href="/">

in your HTML Head and

$locationProvider.html5Mode(true);

in your route config.

By the way, use dot syntax . not / in state declaration:

.state('locations.add_location')