In my current project, I've been helping a client develop a native iOS app for their customers. It's
written mostly in Objective-C and talks to a REST API. I talked about how we documented our REST API
a couple days ago. We developed a prototype for this application back in December, using
AngularJS and Bootstrap. Rather than
using PhoneGap, we loaded our app in a UIWebView.

It all seemed to work well until we needed to read an activation code with the device's camera. Since
we didn't know how to do OCR in JavaScript,
we figured a mostly-native app was the way to go. We hired an outside company to do iOS development in January and
they've been developing the app since the beginning of February. In the last couple weeks, we encountered some
screens that seemed fitting for HTML5, so we turned back to our AngularJS prototype.

The prototype used Bootstrap heavily, but we quickly learned it didn't look like an iOS 7 app, which is what our
UX Designer requested. A co-worker pointed out Ionic, developed by
Drifty. It's basically Bootstrap for Native, so the apps you develop
look and behave like a mobile application.

What is Ionic?
Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly
interactive apps. Built with Sass and optimized for AngularJS.

I started developing with Ionic a few weeks ago. Using its CSS classes and AngularJS directives,
I was able to create several new screens in a matter of days. Most of the time, I was learning new things:
how to
override its back button behavior (to launch back into the native app), how to
configure routes with
ui-router, and how to make the
$ionicLoading service look native. Now that
I know a lot of the basics, I feel like I can really crank out some code.

To demonstrate how easy it is to use Ionic, I whipped up a quick example application. You can get the source
on GitHub at https://github.com/mraible/boot-ionic. The app is a
refactored version of Josh Long's x-auth-security that uses Ionic instead
of raw AngularJS and Bootstrap. To keep things simple, I did not develop the native app that wraps the HTML.

Below are the steps I used to convert from AngularJS + Bootstrap to Ionic. If you want to convert a simple AngularJS
app to use Ionic, hopefully this will help.

1. Download Ionic and add it to your project.

Ionic 1.0 Beta was released earlier this week. You can download it from here. Add its files
to your project. In this example, I added them
to src/main/resources/public. In my index.html, I removed Bootstrap's CSS and replaced it with Ionic's.

What about WebJars?
You might ask - why not use WebJars? You can, once
this pull request is accepted and an updated version is
deployed to Maven central. Here's how
the application would change.

2. Change from Angular's Router to ui-router.

Ionic uses ui-router for matching URLs and loading particular pages.
The raw Angular routing looks pretty similar to how it does with ui-router, except it uses a
$stateProvider
service instead of $routeProvider. You'll notice I also added 'ionic' as a dependency.

In contrast to Bootstrap's navbar, Ionic has header and footer elements. Rather than using a ng-view
directive, you use an <ion-nav-view>. It's a pretty slick setup once you understand it, especially since they
allow you to easily override back-button
behavior and
nav buttons.

Screenshots

After making all these changes, the app looks pretty good in Chrome.

Tips and Tricks

In additional to figuring out how to use Ionic, I discovered a few other tidbits along the way. First of all,
we had a different default color for the header. Since Ionic uses generic color names (e.g. light, stable, positive, calm),
I found it easy to change the default value for "positive" and then continue to use their class names.

Modifying CSS variable colors
To modify the base color for "positive", I cloned the source, and
modified scss/_variables.scss.

After making this change, I ran "grunt" and copied dist/css/ionic.css into our project.

iOS Native Integration
Our app uses a similar token-based authentication mechanism as x-auth-security, except its backed by Crowd.
However, since users won't be logging directly into the Ionic app, we added
the "else" clause in app.js to allow a token to be passed in via URL. We also allowed the backend API
path to be overridden.

We also had to write some logic to navigate back to the native app. We used a
custom URL scheme to do this, and the Ionic app simply called it. To override the default back button, I added
an "ng-controller" attribute to <ion-nav-bar> and added a custom back button.

Our Ionic app has three entry points, defined by "stateName1", "stateName2" and "stateName3" in this example. The code for our NavController handles navigating back normally (when in a browser) or back to the native app. The "appName" reference below is a 3-letter acronym we used for our app.

Summary

I've enjoyed working with Ionic over the last month. The biggest change I've had to make to our AngularJS app has been
to integrate ui-router. Apart from this, the JavaScript didn't
change much. However, the HTML had to change quite a bit. As far as CSS is concerned, I found myself tweaking things
to fit our designs, but less so than I did with Bootstrap. When I've run into issues with Ionic, the community has been very helpful on their
forum. It's the first forum I've used that's powered by
Discourse, and I dig it.

If you're looking to create a native app using HTML5 technologies, I highly recommend you take a look at Ionic.
We're glad we did.
Angular 2.0 will target mobile apps and Ionic is already
making them look pretty damn good.

You could just do the camera processing stuff in Java with GC for iOS/Android/Windows Phone etc. We have barcode/QR code scanning builtin as well as a ton of other things with a very Swing like API. I'm guessing its a bit late for this project but if you need another mobile app I'm sure we can help you get started.