Help with ion-nav-view

tutorials
1

I would like some help, a practical explanation of the workings of the creator and the ionic composition of the ion-nav-view

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});
2

So what seem to be the question?

3

ion-nav-view is an angular directive. The code You pasted here are routes that manage templates and the url. They are created with this angular plugin: Angular UI Router

4

psyche
So for example if I have a page that is my main page it is the root “/” this main page is linked to other pages eg 2, example.
/
/music
/info

and if I have pages linked to music page eg in nav I’ll references

/
/music
/music/rock
/info

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  })
  .state('rock', {
    url: '/music/rock',
    templateUrl: 'music_rock.html'
  })
  .state('info', {
    url: '/info',
    templateUrl: 'info.html'
  });
});

The ionic leverages eg the header of each page styling or have to montrar it separately in each view?

non ionic creator I follow the same logic?

5

If You want to have the same header on all pages using ion-nav-view is the way to go. If You want to research the directive in the code You need to search for ionNavView (without the dashes).
If you want for example the Rock page have some elements common from the “Music” page You should read about nesting views in the ui-router: UI Router wiki

I hope I answered Your questions!