Please please help me, frustration is mounting!

ionic-v1
1

Hello,

First of all, greetings to everyone, and very good Christmas to all of you!
I have spent the last 2 days trying to achieve a simple 2 page layout with ionic, with no success and TONS of frustration. Please, there must be someone experiences on this framework that can put me out of my misery. I really need it!

I want to have two pages, one containing nothing with a background image and some buttons, and a second one with a header and side menu.

image
forum.jpg703×522 38.2 KB

  1. How should the ion-nav-view structure look like for this? Do I need 2 ion-nav-views for this? Could someone point me to the right structural approach to do this please?

  2. How do I navigate between the two if they are in two separate ion-nav-views? Especially since one will be in a side menu ion-nav-view, that will itself be in a parent ion-nav-view?

Sorry if this seems like a newbie question, I tried solving this for over two days now, and I can’t figure it out.

Thanks in advance,

Michael

2

I wouldn’t use separate nav-views. You could but it just makes things more complex.

Here’s a sample to get you rolling. You’ll need to tidy up the code and styling : http://codepen.io/calendee/pen/VYjVLB

3

Thank you for your reply, I appreciate your help!
I actually managed to do this at some point, the problem I have with this approach is that if I animate the transition between the tho views, then the header just shows or hide abruptly, and is not part of the page animation as a whole. I would like for the details page to slide in with the header, and not as a simple show / hide of the header on the same container. This is why I thought that using two different nav-views would probably solve my problem, but then I faced some other issues of navigating back and forth between the nav-views. Not sure if I explained myself properly, any enhancement of the already very close and useful code you provided to achieve a perfect visual experience?

Thanks in advance!

Michael

4

First screen does not have a header bar, click on check-in there is a header bar.

5

Here you go. I changed the ng-click on the buttons to ui-sref. That takes care of the animation issues. http://codepen.io/calendee/pen/VYjVLB?

6

Edit, one problem with this is the change to the content when the header bar shows and hides.

@siddhartha solution doesn’t have this; so, it could be better. However it means you have to include an ion-nav-bar in every view. That’s not really a big deal though.

UPDATE : Here’s a another solution : http://codepen.io/calendee/pen/JoKeZa
With this one, you have a single site-wide nav-bar so you don’t have to create one in every every. However, the “home” view has a dummy one styled to not appear. NOTE : I had to enable the menu on back views. You may not want that.

7

I don’t quite get your point of view.

8

Thanks to both of you, I have it down now. I much appreciate your help!

Michael

9

Glad I was of help to you. Nice day