1

Using angular-ui-router with angular for routing in MEAN application

  • angular: 1.6.2,
  • angular-ui-router: 0.4.2

Having following state: 

.state('myposts', {            
    url: '/your-posts',    
    controller:'PostListController',    
    templateUrl:'post-list.template.html'    
})    

.state('postdetail', {    
     url: '/post/:postId',    
     controller:'PostDetailController',    
     templateUrl:'postdetail.template.html',    
     resolve:{    
        postdetail: ['Post', '$stateParams', function (Post, $stateParams) {    
             var url = '/api/posts/edit/' + $stateParams.postId;    
             return Post.get(url);    
        }]    
     }    
})

In post-list.template.html listed all posts in table and there is an link to edit particular post by using the following 

<a ui-sref="postdetail({ postId: post._id })" class="btn btn-default">

It makes an transition from myposts to postdetail with postId parameter.

Actual URL http://localhost:8886/#/post/58d5167bf05b904a52158f58

Here postId is 58d5167bf05b904a52158f58

Resolve post with postId = 58d5167bf05b904a52158f58 in resolve property of ui-router and inject in PostDetailController controller

function PostDetailController($scope, $state, $stateParams, postdetail, Post){
    $scope.post = postdetail;
    ....
}

It works normally first time, but not working when i refresh the page having url http://localhost:8886/#/post/58d5167bf05b904a52158f58

Using express server ^4.13.4,

Anyone having solution of above problems, why it is happening

Thanks

Aniket Muruskar
  • 267
  • 3
  • 9
  • [Seesm to be similar issue](http://stackoverflow.com/questions/32602345/angularjs-ui-router-stateparams-invisible-loses-on-page-refresh) – anoop Apr 03 '17 at 08:12
  • It's not the same issue though; in Aniket's case, the parameter comes from the url, while in the linked case it's an optional, invisible parameter (in which case it's understandable since the app is fully reloaded after a refresh) – Fissio Apr 03 '17 at 08:44
  • Yes parameter is availabe in the url, even though angular bootstrap app again, state not resolving the data in resolve property. After refreshing the page, the form which was filled first time with resolve data, not showing the form(after refresh) – Aniket Muruskar Apr 03 '17 at 08:50
  • Sorry, but is isn't enough information to go on. Could you show the rest of the configuration where the `postdetail` state is defined? Also, could you describe the flow when the code in question is working correctly and provide additional code samples if you are transitioned from another state in case when code is working correctly? – Emin Laletovic Apr 03 '17 at 14:03
  • I think you may need something like `$locationProvider.hashPrefix('')` – Phil Apr 04 '17 at 06:23
  • finally got solution, checked via state event `$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) { console.dir(error); });` It showing that **Post** service $injector problem , before i was loading the **Post** service via **$oclazyload** module, so i mention globally, now its working. Thank you for support – Aniket Muruskar Apr 04 '17 at 11:43

0 Answers0