AngularJS + ui router and page refresh

Question

I am having this strange issue with only one of my views. The problem is that whenever I reload it by refreshing (Cmd + R / F5) the browser the whole app doesn't work until I change the route (manually or by clicking a link). The view resolves some data before it renders and I can verify that there are no request to the server whatsoever. Basically when I refresh I see all my scripts are loaded but my controller is never called (had a console.log in there) and I never get the view rendered.

Here is the state

    $stateProvider.state( 'purchases', {
    url: '/purchases',
    views: {
      "main": {
        controller: 'PurchasesCtrl',
        templateUrl: 'purchases/purchases.tpl.html'
      }
    },
    resolve: {
      purchases: function(PurchasesService, $rootScope) {
        return PurchasesService.getPurchasesForUser($rootScope.user._id);
      }
    },
    data:{ pageTitle: 'Purchases' }
  });
  $stateProvider.state( 'purchases_buy', {
    url: '/purchases/buy/{itemId:[0-9a-fA-F]{24}}',
    views: {
      "main": {
        controller: 'PurchasesBuyCtrl',
        templateUrl: 'purchases/purchases_buy.tpl.html'
      }
    },
    resolve:{
      item:  function(ItemsService, $stateParams){
        return ItemsService.getItem($stateParams.itemId);
      }
    },
    data:{ pageTitle: 'Buy' }
  });

And here is the controller:

.controller( 'PurchasesCtrl', ['$scope', 'PurchasesService', '$stateParams', 'purchases', function (    $scope, PurchasesService, $stateParams, purchases ) {
  $scope.purchases = purchases.data;
  console.log("loaded");
  $scope.predicates = ['firstName', 'lastName', 'birthDate', 'balance', 'email'];
  $scope.selectedPredicate = $scope.predicates[0];
}])

.controller( 'PurchasesViewCtrl', ['$scope', 'PurchasesService', '$stateParams', 'purchase', function ( $scope, PurchasesService, $stateParams, purchase ) {
  $scope.purchase = purchase.data;
}])

I have no idea why it keeps doing this but it is annoying and I would like to know what is the problem.

do you have a default state? like one using url: '/'. If so does this one fire? Also what is the url like in the address-bar when your refresh? — zewa666
– zewa666, Commented Dec 1, 2014 at 11:12
The URL is the same (correct one). I do have a default state and it doesn't render either. My App controller is not being executed. — mart1nn
– mart1nn, Commented Dec 1, 2014 at 11:18
the controller not firing is the second one, PurchasesViewCtrl right? Whats the purpose of the split? Besides that your original PurchasesCtrl looks much more like a service, so maybe move that part into the PurchasesService. Anyway your code looks a bit confusing, so providing a fiddle would help to find the error — zewa666
– zewa666, Commented Dec 1, 2014 at 11:47

Rene Padillo · Accepted Answer · 2015-05-12 08:34:54Z

1

This is not an issue with UI-Router, but rather than server related issue wherein when you refresh your browser it doesn't point back to the index.html

So you'll need to host your page in an Apache environment and create a redirection such as creating an .htaccess file

I have this as an issue before, you can trace back my ticket from Github

The difference only is that I use Grunt to serve my app then I created an .htaccess along with my index.html

here's an .htaccess gist that I used for solving this issue. link

answered May 12, 2015 at 8:34

Rene Padillo

2,3684 gold badges28 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS + ui router and page refresh

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related