Ionic: Creating abstract state with index.html as template?

Vote count:

0

I know this question may very well have a simple answer that is just not hitting me right now. I've done lots of looking through documentation to find an example where this happens but I found nothing similar being done. I realize there are other ways to do this, like create another template and make that the abstract, as in the ionic examples of tabs and sidemenu.

I started with the Ionic blank starter and I'm wondering if it's possible to use the $stateProvider to create a state where the main index.html page is the template of an abstract state and parent state.

app.js:

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider

.state('app', {
  url: "/app",
  abstract: true,
  templateUrl: "index.html",
  controller: 'AppCtrl'
})

.state('app.list', {
  url: "/list",
  templateUrl: "templates/list.html"
})

$urlRouterProvider.otherwise('/list');

index.html:

<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content>
    <div ui-view>
     {{message}}
    </div>
  </ion-content>
</ion-pane>
</body>    

controllers.js

.controller('AppCtrl', ['$scope', function($scope) {

  $scope.message = "Hello";

}]);

Basically, I've followed what was done in one of these examples: http://ift.tt/1xTvLu2

Except I'm using app as the parent state, and index.html as the template. Any answer is appreciated.

asked 1 min ago

amy

3

Ionic: Creating abstract state with index.html as template?