Search code examples
javascriptangularjsangular-uiangular-ui-router

Angular Route No Errors but Not Woking

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. 

     <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.