CODEWITHSUNDEEP
ionic-frameworknavionic-view
Spilot
Spilot

Reputation: 1525

this part of the ion-nav-view documentation doesn't make sense to me

The example code for the ion-nav-view directive doesn't actually show its usage. So I'm unsure how to use it. Here is the link to the documentation:

http://ionicframework.com/docs/api/directive/ionNavView/

under the USAGE heading it says this:

on app start, $stateProvider will look at the url, see if it matches the index state, and then try to load home.html into the .

Pages are loaded by the URLs given. One simple way to create templates in Angular is to put them directly into your HTML file and use the syntax. So here is one way to put home.html into our app:

<script id="home" type="text/ng-template">

  <!-- The title of the ion-view will be shown on the navbar -->
  <ion-view view-title="Home">
    <ion-content ng-controller="HomeCtrl">
      <!-- The content of the page -->
      <a href="#/music">Go to music page!</a>
    </ion-content>
  </ion-view>

</script>

This is good to do because the template will be cached for very fast loading, instead of having to fetch them from the network.

Do I nest all of that inside of an ion-nav-view directive? Another reason for my confusion is because in one of the ionic templates the framework provides I've seen ion-nav-view opened and closed with nothing in between it this (code below is copy and pasted directly from one of Ionic's templates) : 

 <body ng-app="myApp">

    <!--
          The nav bar that will be updated as we navigate between views.
        -->
        <ion-nav-bar class="bar-stable">
          <ion-nav-back-button>
          </ion-nav-back-button>
        </ion-nav-bar>
        <!--
          The views will be rendered in the <ion-nav-view> directive below
          Templates are in the /templates folder (but you could also
          have templates inline in this html file if you'd like).
        -->

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

    </body>

Upvotes: 0

Views: 482

Answers (1)

Munam Yousuf
Munam Yousuf

Reputation: 547

This <ion-nav-view> behaves like a placeholder. Your other html files that you create under templates folder goes in there. So for example you then have "employees.html" in your templates folder. So the markup of "employees.html" will look something like this: 

<ion-view view-title="Employees">
<ion-content>
  <ion-list>
    <ion-item ng-repeat="item in items">
      Hello, {{item}}
    </ion-item>
  </ion-list>
</ion-content>
</ion-view>

the above is complete html that will be sitting in "employees.html". Basically this is the html that will be placed inside <ion-nav-view> tags.

Hope this helps.

Upvotes: 2

Related Questions