Newbie need a help


#1

Hello people. I am new to Ionic / AngularJs.
I’m in trouble for showing a view in the tag </ ion-nav-view> in the index.html.
No matter what I do does not show.
The question is very simple and I am missing something silly.
I have a x.html file in templates directory.
Inside this file there is only a tag html H1> Me /H1>
The index.html file is from the blank project.
What do I need in app.js file to work this view?
Thanks in advance…


#2

I suggest creating a new tab template ionic start myApp tabs and getting your head around the way ionic navigates different views. At first it might seem complicated but it’s actually rather simple once you have gotten your head around it.

To answer your question, in your app.js, you’ll need to set up different states to link each view. It looks similar to this,

$stateProvider
  // setup an abstract state for the tabs directive
    .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })


  // Each tab has its own nav history stack:

  .state('tab.announcement', {
    url: '/announcement',
    views: {
      'tab-announcement': {
        templateUrl: 'templates/tab-announcement.html',
        controller: ''
      }
    }
  })
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/announcement');

});

This tutorial may help you: http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/


#3

Thank you for reply beefman.
I tried to understand the navigation…
But I did not understand the syntax.
Where I can get the explanation of this syntax?
What means abstract: true ?
What is ‘tab.dash’ in .state(‘tab.dash’, { ?
What is views: { ‘tab-dash’: {? Why ‘tab-dash’ ?
Thanks again.


#4

What don’t you understand about the syntax? - At first it may look challenging but i promise after a few weeks or even days of using ionic it becomes a lot easier to understand. It helps if you have knowledge in html, css, javascript and angularjs.


When assigning a state with abstract:true it’s just turning it into an abstract state. An abstract state is a state which cannot be navigated to, it acts as a layout for other pages. In our case, from the example i gave above, the Tabs.html is our abstract state. Inside the Tabs.html will be all the code and information on how to layout our tabs and which tab navigates to each page. Give this a read, it explains it into more depth. https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states

When i assign the Tabs.html to another page it adds the tabs layout to that page.

ui-router has the powerful ability to define abstract states, or states that can’t be navigated to, but are useful for defining a set of states with shared properties.


.state('tab.dash'

Is assigning the Tabs.html abstract state to that state so it shows the tabs at the bottom of the page. Without the tab it would just show the content in tab-dash.html without the tabs.

templateUrl: 'templates/tab-dash.html',

tab-dash.html is the name of the actual page and doesn’t have anything to do with tabs.html.


Watch this video, it explains everything about linking abstract states to different pages. https://www.youtube.com/watch?t=943&v=dqJRoh8MnBo


#5

Thank you, after watching this video I think I’m on the right track for now.
I’ll be back with more questions.
.