CODEWITHSUNDEEP
angularjsangular-ui-router
user2013
user2013

Reputation: 538

angular-ui-router always redirects to $urlRouterProvider.otherwise

In my Angular SPA application, when type the address into the address bar or click on ui-sref link, I am always redirected to the $urlRouterProvider.otherwise. My Code is given below:

  angular.module('gamopot-app', [ 'ui.router' ] )
      .config(function( $stateProvider, $urlRouterProvider ) {
          // always redirect to here 
          $urlRouterProvider.otherwise('/home');

          // Home state routing
          $stateProvider
              .state('home', {
                  url: '/home',
                  templateUrl: 'modules/core/client/views/home.client.view.ejs',
                  controller: 'IndexCtrl'
              })
               // won't work for http://localhost:3000/#/game
              .state('game', {
                  url: '/game',
                  templateUrl: 'modules/game/client/views/list-games.client.view.ejs',
                  controller: 'GameIndexCtrl'
               })
               // won't work for http://localhost:3000/#/demo
              .state('demo', {
                  url: '/demo',
                  templateUrl: 'modules/core/client/views/demo.home.client.view.ejs',
                  controller: 'DemoIndexCtrl'
               });
});

index.ejs

 <!DOCTYPE html>
 <html lang="en" ng-app="gamopot-app" ng-controller="MainCtrl as main">
    <body>
        <div class="container" style="width:100%;">
             <!--<ui-view></ui-view>-->
              <div ui-view></div>
         </div>       
     </body>
</html>

modules/core/client/views/home.client.view.ejs

  <div ng-controller="IndexCtrl">
       <!-- main index view -->
  </div>

modules/core/client/views/home.client.view.ejs

  <div ng-controller="IndexCtrl">
       <!-- main index view -->
  </div>

modules/core/client/views/demo.home.client.view.ejs

   <div ng-controller="DemoIndexCtrl">
       <h1>{{test_demo}}</h1>
   </div>

modules/game/client/views/list-games.client.view.ejs

  <div ng-controller="GameIndexCtrl">
    <h1> {{test_game}} </h1>
  </div>

Any ideas what I'm doing wrong?

Upvotes: 2

Views: 1614

Answers (1)

sabbir
sabbir

Reputation: 2025

Once I also had this kind of problem. I don't know where is the problem, but I think I can solve this problem. Here is my solution:

angular.module('gamopot-app', [ 'ui.router' ] )
   .config(function( $stateProvider, $urlRouterProvider, $locationProvider ) {

         $locationProvider.html5Mode(true);
         $urlRouterProvider.otherwise('/home');

         $stateProvider
             .state('home', {
                 url: '/home',   // now http://localhost:3030/home will work
                  templateUrl: 'modules/core/client/views/home.client.view.ejs',
                  controller: 'IndexCtrl'
             })

             // the rest code would be same
             ...............................
             .................................
       });

I hope it would be a solution for your problem.

NB: still in this code, there are some problem, such as:

when you type in your browser address bar http://localhost:3030/home and hit enter, it directly make a server request, not angular route request. you can use ui-sref.

Upvotes: 1

Related Questions