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.
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
- Node.js: https://nodejs.org/
- Ionic CLI: https://www.npmjs.com/package/ionic
- Cordova: https://cordova.apache.org
- Yeoman: http://yeoman.io/
- Ionic generator for Yeoman: https://github.com/diegonetto/generator-ionic
- Grunt: http://gruntjs.com/
- Bower: http://bower.io/
If you do not have those requirements
- Download and install Node.js from the website
- Install Cordova CLI by executing npm install -g cordova in your command prompt.
- Install the Ionic CLI by executing npm install -g ionic in your command prompt.
- Install Yeoman using Node.js by executing npm install -g yo in your command prompt.
- Install Grunt by executing npm install -g grunt-cli in your command prompt.
- Install Bower by executing npm install -g bower in your command prompt.
- 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
- Open your command prompt and create a new folder somewhere. This will be your development folder.
- cd into the folder you just created.
- Execute the following command: yo ionic [app-name]
- You will now get several questions for you to answer about how you would like to set up the project.
- 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.
- When asked which plugins you would like to include, but you don’t know what some of these plugins do, refer to this documentation
- 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
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.
- Ionic can generate splash screens and icons for you for both iOS and Android without you having to manually resize each image in a million different formats. (I’m especially looking at you, Apple!)
- Ionic provides a platform for you to upload your apps to as well as providing other services.
- You can easily set up SASS in your ionic project, even after creating it. (I highly recommend using SASS).
- Ionic comes with an awesome icon font called Ionicons.