I can't navigate to state ui router from address bar - angularjs

Question

I have a problem navigating to a state from the address bar or when i refresh the current state.
i have the following code:
Controller:
$scope.selectCategory = function(category) {
$location.path('/posts/' +category.category);
$scope.posts=[];
Post.query({category: category.id}).$promise.then(function(posts){
$scope.category = $stateParams.category;
$scope.posts = posts;
$scope.sortBy = "-updated";
$scope.letterLimit = 100;
$scope.postDisplayed = 6;
function setCurrentPost(post) {
$scope.currentPost = post;
}
$scope.setCurrentPost = setCurrentPost;
});
}
so in the code above i'm binding my posts to scope category, when a user click a particular category, he will be directed to a page which render the posts of that specific category.
I'm calling the url in state router as follows:
app.js:
.state('posts.category', {
url: '/:category',
templateUrl: 'static/partials/post/postlist.html',
})
then the user has to click a specific category to be directed to that url. I used ng-click to achieve that in my html:
<img ng-click="selectCategory(category)" ng-src="[[category.image]]" err-src="../../../static/img/imageholder.png" alt="img01"/>
I'm using Resource query to call posts from api as follows.
services:
.factory('Post', ['$resource', function($resource){
return $resource('/api/posts/:category', {category:'#category'});
}])
finally in the page rendering the posts, i'm using ng-repeat to loop through the posts as follows:
<div ng-repeat="post in posts | limitTo:postDisplayed | filter: searchText | orderBy: sortBy" >
So far evrything works fine. When the user clicks a specific category it is directed to the correct page and posts are rendered.
My problem if the user refresh the page or try to access the page by entering url in the address bar, or i sent the url link to someone and clicks on it, the page rendered is blank, which means the scope function selectCategory is not called at all. In other words my function selectCategory is only called through ng-click, otherwise is not called at all through state router. Any idea how to fix this issue? Thanks in advance.

Answer 1

From what I understood from your code, you don't have code that is responsible for loading category data when the URL in question is accessed directly.
For the sake of keeping things separate and not complicate your code you should really add a controller for your posts.category state. Modify your state like this:
.state('posts.category', {
url: '/:category',
templateUrl: 'static/partials/post/postlist.html',
controller: 'PostsCategoryController'
})
Then, create a PostsCategoryController which will be used for your posts.category state. Something like this
yourModule.controller('PostsCategoryController', PostsCategoryController);
PostsCategoryController.$inject = ['$scope', '$stateParams']; //add additional dependencies you need.
function PostsCategoryController($scope, $stateParams){
//code for handling posts category data and initialization
}
Then, load and initialize data in your PostsCategoryController. You can do that by taking the code from selectCategory method and modify it a bit, like this:
function PostsCategoryController($scope, $stateParams){
function selectAndInitializeCategory(){
//your Post.query code for getting the data (you can use $stateParams to get category)
}
selectAndInitializeCategory();
}
Please note that you will have to reference your PostsCategoryController in your static/partials/post/postlist.html template.