Native Mobile Development
Develop true native mobile applications!
Ionic framework, ionic is a full stack mobile hybrid apps that uses AngularJS framework.
AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.
AngularJS is quite popular, you may find lot of sites with updated documentation, the same applies for Ionic.
We use Cordova to access the mobile device APIs. We try to use only core Cordova plugins but sometimes that's impossible. If we have to use additional plugins (like Webintents, local notifications, custom URL schemes) we use only plugins well-maintained, generally those listed here: http://plugins.telerik.com/
For integrating Cordova plugins we use ngCordova; ngCordova is a collection of AngularJS extensions on top of the Cordova API that make it easy to build, test, and deploy Cordova mobile apps with AngularJS. The main feature of ngCordova is that instead callbacks it uses promises, so it integrate very well with AngularJS.
- http://ionicframework.com - Official Ionic website
- https://www.airpair.com/ionic-framework/posts/the-definitive-ionic-starter-guide - Definitive ionic starter guide
- http://mcgivery.com/100-ionic-framework-resources/ - +100 Ionic resources
- https://github.com/juarezpaf/ionic-adventures?utm_source=mobilewebweekly&utm_medium=email - More ionic resources
- http://codepen.io/ionic/public-list/ - Ionic sample code lists
- https://www.youtube.com/channel/UChYheBnVeCfhCmqZfCUdJQw - YouTube channel from Ionic
- http://www.manning.com/wilken/ - Ionic in action book
- https://angularjs.org - The official documentation for AngularJS
- http://manning.com/bford - AngularJS in Action book
- http://manning.com/aden - AngularJS in Depth book
- http://cordova.apache.org - Official Cordova site
- http://plugins.cordova.io - Cordova official plugin registry.
- http://ngcordova.com - ngCordova AngularJS wrappers for cordova
Structure of an App
controllers/ home.js templates/ home.html lang/ de.json services/ directives/ filters/ scss/ components/ lib/ main.js
The following table is shown the naming conventions for every element:
|Controllers||Functionality + 'Ctrl'|
controllers and templates
The controllers directory contains the module controllers, usually you are going to have there a controller per view and per template.
The lang directory contain the language file with the translated strings.
This directory contains the app services, usually for non-complex addons you will find a single file inside containing all the code logic used for providing the main functionality of the addon like the code for retrieving the home via Web Services.
Directives are special identifiers that can be used to give the compiler extra information about a declaration/definition.
Filters format the value of an expression for display to the user. They can be used in view templates, controllers or services.
SCSS is a special type of file for SASS, a program written in Ruby. (Sass is a CSS pre-processor with syntax advancements)
This is a mandatory file, it:
- Creates the AngularJS module
- Declares all the state routes the plugin is going to user. Attaching a controller and template for each different state.
- Initializes the addon and register it into one or more delegates (this determines where the plugin will be displayed in the app).
There are two options for building the app, aka compile it to different devices:
Phonegap Build is an online service that lets you build the app automatically for different platforms. The main advantage is that it simplifies a lot the process of building.
You just put your www/ folder in a github account and Phonegaps automatically builds the app for different platforms pulling your github code.
Notice that the free version is for open repositories, but you can use the non-free version for private repositories.
In order to build your app using Phonegap Build you need to place a special config.xml file into the www/ folder.
You can also build the app using the Ionic CLI tools, see: http://ionicframework.com/docs/cli/run.html
Testing with task Runners
Gulp provides the following features:
- it's super fast as it's build for concurrency from the start
- it provides a simple to learn API (based on a pipes and filters architecture) that produces some very readable and maintainable code.