ui-router w/ specific child state only renders JSON on page refresh , no view

Question

I've used this architecture throughout my app, but it is not working here, and I can't figure out why.

I'm loading the whiskey data to my parent state whiskey, which should pass the data to the child states. It's working fine, but on page refresh -- it only shows the json data for the whiskey on the page.

Angular does not even seem to be loading as my ng-inspector tool does not detect it.

//parent state with resolve to retrieve whiskey from service
.state('whiskey', {
            url: '/whiskey/{whiskeyId}',
            abstract: true,
            sticky: true,
            params: {
                post: null,
                index: null
            },
            resolve: {
                whiskey: [
          'Whiskey',
          '$stateParams',
          function (Whiskey, $stateParams) {
            console.log('$stateParams ', $stateParams)
            return Whiskey.show($stateParams.whiskeyId).then(function (whiskey) {
                return whiskey
            })
         }
      ]},
            views: {
                'main': {
                    templateUrl: '/views/whiskey/whiskey-header.html',
                    controller: 'Whiskey-headerCtrl'
                }
            }
        })

 //child state does not work on page refresh, just shows json data
.state('whiskey.whiskey-post', {
            url: '',
            views: {
                'whiskey-child': {
                    templateUrl: '/views/whiskey/whiskey-post.html',
                    controller: 'Whiskey-postCtrl'
                }
            }
        })  

 //child state is working fine
.state('whiskey.whiskey-about', {
            url: '/about',
            views: {
                'whiskey-child': {
                    templateUrl: 'views/whiskey/whiskey-about.html',
                    controller: 'Whiskey-aboutCtrl'
                }
            }
        })

My service:

'use strict';
angular.module('clientApp').factory('Whiskey', function ($http, $q) {
  var currentWhiskey = { _id: 'init' };
  return {
    show: function (whiskeyId) {
      if (currentWhiskey._id !== whiskeyId) {
        return $http.get('whiskey/' + whiskeyId).then(function (res) {
          currentWhiskey = res.data;
        return   $q.when(currentWhiskey);
        });
      } else {
        return $q.when(currentWhiskey);
      }
    },

});

I'll also add my controllers below:

//whiskey-header ctrl for parent state
'use strict';
    angular.module('clientApp').controller('Whiskey-headerCtrl', function (         $scope, whiskey) {

  $scope.whiskey = whiskey;

});

whiskey-post controller:

'use strict';
angular.module('clientApp').controller('Whiskey-postCtrl', function ($state, $scope, Post, PostVote, Whiskey, $location, Voter) {

  $scope.post = [];

  $scope.queryObject = {
    sorter: 'timestamp',
    sort: { 'timestamp': -1 },
    skip: 0
  };

  $scope.sort = function (a) {
    var ascend = {};
    ascend[a] = 1;
    var descend = {};
    descend[a] = -1;
    if (_.isMatch($scope.queryObject.sort, descend)) {
      $scope.queryObject.sort = ascend;
      $scope.queryObject.sorter = a;
    } else if (_.isMatch($scope.queryObject.sort, ascend)) {
      $scope.queryObject.sort = descend;
      $scope.queryObject.sorter = a;
    } else {
      $scope.queryObject.sort = descend;
      $scope.queryObject.sorter = a;
    }
    $scope.post = [];
    $scope.isBusy = false;
    $scope.queryObject.skip = 0;
    $scope.loadMore();
  };

  $scope.loadMore = function () {
    if ($scope.isBusy === true) {
      return;
    }
    $scope.isBusy = true;
    Post.getPost({
      'queryObject': $scope.queryObject,
      'filter': { 'whiskey': $scope.whiskey._id }
    }).then(function (res) {
      if (!res.data.length) {
        $scope.isBusy = true;
        return;
      }
      if (res.data.errmsg) {
        toastr.error(res.data.errmsg);
      } else {
        if ($scope.post) {
          $scope.post.push.apply($scope.post, res.data);
        } else {
          $scope.post = res.data;
        }
        $scope.queryObject.skip += res.data.length;
        $scope.isBusy = false;
      }
    });
  };

    $scope.loadMore();
});

Answer 1

figured it out.

This was a conflict with my server-side code.

I'm using "pretty-urls" / html5 mode which removes the hash from the browser url.

that state matched this route on my server:

app.get('/whiskey/:id', whiskeys.show);

Thus, this is why it was sending back pure json for the request.