Does <div ng-view> exist in Ionic?

ionic-v1
1

Hi, I’m completely new to Ionic and I’m trying to transform a “home-made” Angular/Cordova/Bootstrap app into an Ionic project.

I’m a begginer who loves tutorials, but I didn’t find any to make this kind of “migration”.

For example, I’m stuck with something simple:
In my former app, the index.html contains a <div ng-view></div> This div is used to include html partials in an Angular app.

I didn’t see any code like this in Ionic tutorials. Why ? Is there another way to do?

In a more general maner, what are the main things to be aware of when going to Ionic?
Even Ionic is just supposed to be a frontend framework plugged on AngularJS, my first feeling (I may be wrong) is you don’t just do pure AngularJS with some Ionic above, but you need to build your project in “an Ionic way”. Sorry if it’s not very clear…

Thanks for your help.

2

if you want this for ionic and a clean new page it is http://ionicframework.com/docs/api/directive/ionNavView/ .

If you want more view on a page you could use ui-routers ui-view.

3

Thanks for this.
Could you provide a link to an sample project that show how to use it in a case where there are several partials html to load?

I’m getting crazy because I’m trying to do something really simple!! I just want to create a Ionic project with main index.html and many html partials to be included into this index.
I tried something like this but I’d like to follow clear intructions instead of guessing.

<body ng-app="starter">
    <ion-pane>
      <ion-content>
        <ion-nav-view">
            <!-- Are the HTML partials supposed to be here? -->
        </ion-nav-view>
      </ion-content>
    </ion-pane>
</body>
4

yeah and than you have say in your routings that you want to hang into your ion-nav-view.

the same can be done with ion-nav-view:

<ion-nav-view></ion-nav-view>

Then you can define a state:

.state('base', {
   url: '/',
   templateUrl: baseTemplatePath,
   controller: controllername
}
.state('base.substate', {
   url: '/firstPage',
   templateUrl: ....,
   controller: .....
});

Now you have 1 base state and 1 child state.
The dot-notation says, that substate is a child state of base.
if you set a name to your ion-nav-view like

<ion-nav-view name="test"></ion-nav-view>

you can work like this with it in your routings:

.state('state', {
   url: '/firstPage',
   views: {
     'test': {
       templateUrl: ....,
       controller: .....
     }
   }
});

If you have your index.html:

<body ng-app="starter">
<ion-pane>
  <ion-content>
    <ion-nav-view">
        <!-- Are the HTML partials supposed to be here? -->
    </ion-nav-view>
  </ion-content>
</ion-pane>

then you can build your routings:

.state('state', {
   url: '/url',
   templateUrl: baseTemplatePath,
   controller: controllername
}
5

Thanks a lot for this clear explanation!