Question
It's just simple but I don't know what's wrong. I have the following example, making a simple web template with angular ui-router and angular 1.2.16.
https://stackoverflow.com/questions/22883718
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian <script type='text/javascript' src='angular.js'></script>
<script type='text/javascript' src='angular-ui-router.js'></script>
<script type='text/javascript' src='js/me/app.js'></script>
I've written the app.js and index.html something like this
app.js
angular.module('app',[
'ui.router'
])
.config(['$urlRouterProvider','$stateProvider'],function($urlRouterProvider,$stateProvider){
$urlRouterProvider.otherwise('/');
//console.log($urlRouterProvider);
$stateProvider
.state('home',{
url:'/',
templateUrl:'home.html'
})
})
and the index.html is
<body ng-app="app">
<header ng-include="'header.html'"></header>
<!-- End of Header -->
<div ui-view="''"></div>
<footer ng-include="'footer.html'"></footer></body>
My header and footer work properly. That is a good first step. But when I try routes, nothing happens.
In my console there are no errors at all.. I don't understand, what is the matter? I think it's quite simple. Maybe because I'm very new to angular. So, if you can suggest solutions out there, please help.
Solution
State change errors aren't shown in the console normally. You will need to add an error listener like so in order to see what went wrong:
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
$dialogs.error("Something went wrong!", error);
console.error("$stateChangeError: ", toState, error);
});
Most likely your template isn't where you are specifying or something like that.
OTHER TIPS
My issue was a bad path in my url:
Check the URL!
http://example.com/#/is not registered and $stateProvider won't tell you it's wrong.I simply had to remove "
/#/" from my URL.
I suppose a hash got added on somewhere, but I had the same problem as OP: header and footer were fine, but nothing inside <ui-view></ui-view>
No idea why the devs would make it so that when you go to an unregistered path it gives no errors or indication of any kind that something bad happened, but there you go...
$stateProvider overrides $urlProvider, so .otherwise won't work.
Add an otherwise state:
/// OP's code ///
$stateProvider
.state('home',{
url:'/',
templateUrl:'home.html'
})
// Just add a new state
.state('otherwise',{
url:'*path', // uses regex, and doesn't mess up preceding state urls
templateUrl: 'home.html' // sends the user back home if a bad url happens
})
$rootScopeWhile @GlenFilson's answer did not provide any indication the path was incorrect, I was able to figure out where his answer should go:
var app = angular.module(...); // can't inject $rootScope here except through providers (e.g., $httpProvider)
app.config(...); // nor here
// define app.run() after configuration
app.run(function($rootScope){
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
$dialogs.error("Something went wrong!", error);
console.error("$stateChangeError: ", toState, error);
});
})
