Newbie help with state and view

ionic-v1
1

Hi I am trying to understand the stateprovider and I have created a very simple app here with a main view and a subview. In the state I am setting the templateUrl to templates/main.html but I get a blank page

<ng-view></ng-view>
<script id="templates/main.html" type="text/ng-template">
  <p>hello main header</p>
  <div ui-view="subview"></div>
</script>


<script id="templates/sub1.html" type="text/ng-template">
    <ion-content class="padding">
      <p>test</p>
        <a class="button icon icon-right ion-chevron-right" href="#/mainview/view2">View 2</a>
      </p>
    </ion-content>
</script>

<script id="templates/sub2.html" type="text/ng-template">
    <ion-content class="padding">
      this is a test sub view 2
       <a class="button icon icon-right ion-chevron-right" href="#/mainview/view1">View 1</a>
    </ion-content>
</script>

Here is the JS

angular.module(‘ionicApp’, [‘ionic’])

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

$stateProvider
.state(‘mainview’, {
url: “/mainview”,
abstract: true,
templateUrl: “templates/main.html”
})
.state(‘mainview.sub1’, {
url: “/mainview/sub1”,
views: {
‘subview’: {
templateUrl: “templates/sub1.html”
}
}
})
.state(‘mainview.sub2’, {
url: “/mainview/sub2”,
views: {
‘subview’: {
templateUrl: “templates/sub2.html”
}
}
})

;

//$urlRouterProvider.otherwise("/tab/home");
//$urlRouterProvider.when("","/mainview/sub1");
$urlRouterProvider.otherwise("/mainview/sub1");

});

But nothing shows up all I get is a blank page. Here is the example below

Can someone please help.

Thanks

Nav

2

Found my error. Just realised the child state url is automatically prepended with parent so I don’t have to repeat it

Thanks