Building an app with the download (not using the command line tools) and issuing PhoneGap Build (not PhoneGap)

ionic-v1
1

Yesterday I build my first Ionic App. This is how I did it:

I downloaded the beta and created an index.html file in the folder thus:

index.html
js/
css/
fonts/

I then used the todo tutorial and built the todo app. I created a config.xml file as per my usual method on PhoneGap Build, and targeted iOS and Android with PhoneGap 3.4.0.

I uploaded my project to GitHub, pulled it into PGB, built it and deployed it onto my iPhone 4 and Nexus 4. Note: I already had a working iOS development key from another app I’m building so erased the test version from my iPhone 4 before getting the todo app.

It works, almost. In the browser it works fine, but the apps (both of them) are missing one thing - styling and colours of the project list in the slideout panel. They are still there (you can select them) but the text is white and the background is white. And the dividing lines are white too.

So it seems promising and if I can build Ionic apps this way (what’s up with that lack of colour?) I’d be happy to write a tutorial for this entire process (getting keys, PhoneGap Build and all).

2

hey i build my apps this way, too.

I have no problems with that.

I’m using scss instead of css to overwrite ionic-scss-variables to style fast and flexible my apps.
(no need to overwrite whole css classes or attributes with !important -> only change the scss variable)

But if you include the ionic.bundle.js and ionic.min.css everything should work fine.

Maybe you can debug your android version with chrome device debugging?
There you will get information, if css file not found or something else failed.

greetz, bengtler.

3

Hi bengtier,

Good to see someone else doing the same thing.

Shouldn’t they have a tutorial for this? I use jQuery Mobile and PhoneGap Build at the moment but I want to switch to Ionic.

I’ve a question (I’m doing some tests). I’m building a basic app - it has a header and footer but I can’t work out how to get scrolling content in that doesn’t float under the header.

What tag do I use?

4

You could add an ion-scroll container in the bars.
I have a horizontal scroll-able subheader in one app.

Keep in mind, that header/footer bars have a fixed height.

5

So I can place an ion-scoll but I have to position it below the header somehow, unlike in jQM where this is done automatically? Is a margin a suitable solution for this?

PS. You don’t know how relieved/happy I am to find I can use ionic this way. :smile:

6

bengtler, I wonder if you could do me a favour?

Could I see the basic layout of your app? At the moment mine doesn’t scroll properly. It has a header and footer and an ion-content filled will elements from the css demo page (which all look and work fine).

7

Ähm no this project is for a customer ;).

Why you do not put the ion-scroll on top of the the ion content?

or you could add a sub-header bar

<ion-header-bar class="bar-subheader">
    // subheader
</ion-header-bar>
8

You see, this is the problem with the documentation. If I use what you posted it doesn’t do anything. If I use

<div class="bar bar-subheader">
<h2 class="title">Sub Header</h2>
</div>

I get a subheader, but I still can’t scroll - the footer is no longer fixed.

I need a template to show me how it works and the docs don’t explain it.