I need to understand nested states and how their templates work


#1

Hello
I have these states

.state('categories', {
    'abstract':true,
    url: '/categories',
    templateUrl: 'templates/categories.html'
  })

  .state('categories.main', {
    url: '',
    views: {
      'home': {
        templateUrl: 'templates/home.html',
        controller: 'HomeCtrl'
      }
    }
  })
  .state('categories.posts', {
    url: '/:CategoryId',
    views: {
      'posts': {
        templateUrl: 'templates/categories-posts.html',
        controller: 'CatPostsCtrl'
      }
    }
  })

I imagine that all the states inherit from the template of the abstract state. So in order to make them independent from the abstract state, the abstract state template should look like this :

<ion-view view-title="Categories">
</ion-view>

With this being said, how should the children templates be written ?
Do I need to include the <ion-view directive again ?

Here is what I did with the first child state :

<ion-view view-title="Categories" ng-controller="HomeCtrl">
    <ion-content class="padding has-header">
        <div>
            <ion-item class="item-profile" ng-repeat="n in [1,2,3,4,5,6,7,8,9,10]">
                <div class="item-category">
                    <a class="button-image" ui-sref="categories.posts({CategoryId:$index})">
                        <img ng-src="http://placehold.it/100">
                    </a>
                </div>
            </ion-item>
        </div>
    </ion-content>
</ion-view>

Questions about best practice :
Do I have to include the controller name ? because when I don’t the controller is not fired (tried an alert inside the controller.)

With the template above, I get a blank page.
What am I doing wrong ?
Thanks