Create a cross-platform mobile app with AngularJS and Ionic

If you want to create a cross-platform mobile app with AngularJS and Ionic, you have come to the right article! In this article we’ll look at how to set up a new Cordova project for making a cross-platform mobile app.

There are a few options for creating cross-platform mobile apps using HTML5, CSS and JavaScript. In the past, people usually opted for using jQuery Mobile.

However jQuery Mobile was by no means developed with the intention for being used for native apps rather than mobile websites (the origin of jQuery Mobile preceeds the popularity of Responsive Design). Luckily for all of us AngularJS users there is a new kid in town: Ionic

Ionic adds a bunch of new directives and services on top of AngularJS. It also uses ngCordova which provides access to the Cordova library from AngularJS. On top of all that it has a whole CSS framework with several mobile styles.

You could set up a simple base project using only the Ionic Command Line Interface. However this way you will have to either automate a lot of things yourself or do them manually – such as minification, library installation, …

In this article we’ll go over the easiest way to set up a proper and seamless workflow by using some of the tools I have discussed in an earlier article.

What you will need

If you do not have those requirements

  1. Download and install Node.js from the website
  2. Install Cordova CLI by executing npm install -g cordova in your command prompt.
  3. Install the Ionic CLI by executing npm install -g ionic in your command prompt.
  4. Install Yeoman using Node.js by executing npm install -g yo in your command prompt.
  5. Install Grunt by executing npm install -g grunt-cli in your command prompt.
  6. Install Bower by executing npm install -g bower in your command prompt.
  7. Install the Ionic generator by executing npm install -g generator-ionic in your command prompt.

Note: On linux or OS X you may have to prepend the above commands with sudo.

Setting up the mobile app project with Yeoman

  1. Open your command prompt and create a new folder somewhere. This will be your development folder.
  2. cd into the folder you just created.
  3. Execute the following command: yo ionic [app-name]
  4. You will now get several questions for you to answer about how you would like to set up the project.
  5. When asked what kind of starter template you would like, I suggest checking out the starter-tabs template if you have not seen Ionic in action before.
  6. When asked which plugins you would like to include, but you don’t know what some of these plugins do, refer to this documentation
  7. Once the yeomand generator has finished, you can run your project by executing grunt serve in your command prompt.

Your mobile app with AngularJS and Ionic has been set up!

“But what now? What happened and where do I go from here?” – You have now set up a project with the following structure:

├── Gruntfile.js            - Configuration of all Grunt tasks
├── package.json            - Dev dependencies and required Cordova plugins
├── bower.json              - Lists front-end dependencies
├── config.xml              - Global Cordova configuration
├── .gitignore              - Best practices for checking in Cordova apps
├── resources/              - Scaffolded placeholder Icons and Splashscreens
│   ├── ios/
│   ├── android/
├── app/
│   ├── index.html          - Main Ionic app entry point
│   ├── lib/                - Libraries managed by Bower
│   ├── scripts/            - Custom AngularJS Scripts
│   ├── styles/             - Stylesheets
│   ├── templates/          - HTML views
├── platforms/              - Targeted operating systems
├── plugins/                - Native plugins
├── hooks/                  - Cordova lifecycle hooks
├── merges/                 - Platform specific overrides
├── coverage/               - Istanbul reports
├── test/                   - Unit tests
│   ├── spec/
├── www/                    - Copied from app/ to be used by Cordova

By executing grunt serve a number of things happened. First of all your code will be checked by a JS linter (syntax/style error checking) after which your JavaScript files get injected into your index.html, everything is copied over into the www directory and then ran from there.

A webserver will be started on your localhost and the files in your app folder (where you will be developing) will be watched for changes. Once a change happens, grunt will automatically refresh your browser (or if you only changed CSS, re-inject the CSS into your page without the need for a full refresh, which is a real treat!).

Go ahead and open Gruntfile.js to have a look at the inner workings of all that automation if you are not familiar with it yet.

bower.json contains all the JavaScript libraries that are in use by your project. You can later use bower to install, remove or update your Libraries.

Some tips

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+0Share on StumbleUpon0Share on Reddit3Share on LinkedIn0Share on TumblrBuffer this pageDigg this


You may also like...

Stay updated