Best way to establish an application with a constant Header element(s), in which templates will be inserted below?

ionic-v1
1

Greetings,

I’m coming from a Ruby on Rails development environment where this is easy to do. What I need basically, is an app that will always have a search bar and a nav-bar (with custom icons) on top (In Ruby on Rails this is called the Layout), Inside the Layout (meaning the content below nav-bar/search-bar) templates are inserted in a designated container as the user navigates through the App.

What is the BEST way to do this with Ionic?

I understand that in terms of the ui-router, the nav-bar+search-bar header should be defined as an abstract state, is this correct? (and it must have its own template of course)

I’m hoping that someone could tell me how the ‘www/index.html’ would look like for an app that behaves like this?

I especially don’t have a clue about the correct arrangement of parent/child containers, so far I only know that the templates for each state should be rendered inside an <ion-view>, right? (and even that could be incorrect)

Kind Regards,
-Jose

1 Like
2

+1
I am looking for exactly the same kind of layout (and strangely just posted a topic concerning this issue).
So any help from an ionic guru would be highly appreciated :wink:

1 Like
3

Hello there!

I agree, I’m hoping for a Guru to show up myself! :smile:

Well, it is kind of strange, but I feel it’s not obvious to find a Solid solution from reading the documentation alone.

I know there has to be a BEST way to do this.

4

What you guys are describing is pretty much the most common scenario for an ionic app.
You can get a good look at the markup by using one of the starter templates, which you can install via command line:

ionic start myApp sidemenu
cd myApp
ionic serve
5

Hello there, mbuster!

This question I will ask before I even bootstrap the sideMenu App myself, so please bear with me,

Do the concepts of a SideMenu mirror those of a Top NavBar?

ramsestom is 100% right, what we both need is an app that behaves like Skype for mobile phones.

(I basically haven’t tried that one because a side menu feels like an entirely different kind of App, ie. the side menu isn’t a persistent UI-component? —maybe I’m wrong.)

Thanks again for replying to all of my questions.

6

Almost every ionic implementation includes the main header/nav-bar at the top.
Look at the nav-bar docs, click around the example. You can see all the markup via the html tab in the example.
http://ionicframework.com/docs/api/directive/ionNavView/

1 Like
7

In this code: http://codepen.io/anon/pen/aKgEo
replace at line 26:
 <ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
by
 <ion-tabs tabs-style="tabs-icon-top tabs-top" tabs-type="tabs-positive">
 
and u will see that actually having a nav-bar on top do not work correctly on ionic…

8

Hello there!

Actually, this here appears to be exactly what we need, http://ionicframework.com/docs/api/directive/ionNavBar/

The code snippet under ‘Usage’ there is very simple, and the comments in it seem to describe exactly what we need as well, the problem is that the Nav-Bar is actually invisible. And apparently that’s why I was confused in the first place, because this really straight-forward example didn’t work. The Nav-Bar seems to be there but it’s invisible.

Don’t know what I’m doing wrong, the templates render well though.

-Jose

9

@ramsestom, in your codepen you have hide-nav-bar="true" in your main view… which hides the nav-bar.

10

Here’s the code for what I am trying to do, and it doesn’t work. The Nav Bar doesn’t show, I’m following the docs verbatim, am I missing something?

Like I mentioned earlier, the Nav-Bar doesn’t show.

Thank you for all your replies,

Kindly,
Jose

11

I am having the exact same problem in a completely empty app.

I posted a thread here, with no response as of yet:

disappearing ion nav bar

12

Because I don’t want a header.
Even without hide-nav-bar=“true” (or hide-nav-bar=“false”), the tabs bar is rendered below the header of the view. Which is not fine either…

13

@jlstr, I don’t see the controller ApplicationController in your gist. Do you see any errors in your console when you run this? If the app is crashing because it’s not finding that controller, it’s not going to render the nag-bar directive.

14

@ramsestom, previously you stated that you DO want a nav-bar. But then you said you are hiding it because you don’t want a header. An ion-nav-bar IS a header. Is your question about a tabs-bar or a nav-bar? These are two different things.

15

I’ve updated the gist, I added the code for ApplicationController, and I moved the buttons to be inside the nav-bar (where they should be). As it is right now, there’s no error on the console.

Thanks for your help! I hope that you can have a look, I’m really clueless,

-Jose

16

Here’s a codepen that is about as stripped down as I can make it.
It has a nav-bar, a main content area, and two-sub-views that each present their own buttons inside the nab-bar. Hopefully you’ll find something useful in the markup there.
codepen

17

Cool! and interesting, but a bit counter-intuitive IMHO (is this how Ionic works??), so basically, If I follow your example correctly, the initial state, and the template it renders is the actual nav-bar?

Why doesn’t it work the way I’m trying to do it? I mean, it resembles what the docs say more than what’s in your code pen. I’m really confused. :frowning:

18

Here is what I want: Top navigation bar and bottom menu bar
So I want a navigation bar with icons on top of my app, that allow to navigates between different views (and that is shared between them).
but I don’t want a header for my views (only some content without a title header bar or whatever).
So I want something rendering like this (which is pure angularjs code, not ionic one):
http://codepen.io/danielemoraschi/pen/deyos
but without having to redefine the top navigation bar (with the friends and favorites icon) in each template view (as it is done in this code. but I assume there must be a way to define it once for all out of the view templates…)

19

BTW, this is what I’m trying to get done…
Not sure if it’s even possible with Ionic; the idea is that the Header elements should be visible at all times, and the icons there should be custom (CSS made or images),

I wanted to share this, so that can get your honest opinion on whether this is possible or not…

20

OK, these illustrations make it much easier to understand what you are both after. It will take a different approach, but should be no problem. I’ll make a little example.

1 Like