Complete Cordova App with Angular JS tutorial
In part 1 we setup Angular, build the views and route to navigate through pages with a menu.
In part 2 we continue with controllers and services to show data from a backend.
In part 3 we created the environment to build apps with Cordova
In this part we will actually build the apps.
Create a new Cordova project
To build an app from the angular code we created in step 1 and 2, a new Cordova project has to be created. First create a new folder to start with the Cordova project. On Windows open a command line or, on OS X, open a terminal and go to the new folder and execute the following command to create a new Cordova project:
cordova create . nl.hollebm.angularjscordovaapp 'Angular JS Cordova App'
- ‘.’ represents the current folder, but could be any folder of your choice
- ‘nl.hollebm.angularjscordovaapp’ is the reversed domain app identifier to identify different projects build by the same company. Your own reversed domain should be used here. This way the identifier is unique on the web.
- ‘Angular JS Cordova App’ is the name of the app
Inside the current Cordova folder a www folder exists. Go to this folder and replace all files inside this folder with the Angular files created in step 1 and 2.
Build for Android
Before building the app for Android, the platform first needs to be added to the project by entering the following command inside the new Cordova folder on the command line / terminal:
cordova platform add android
Adding platforms has to be done only once for each project. Now we can build the app for Android with:
cordova build android
This creates an .apk file inside /platforms/android/build/outputs/apk/android-debug.apk or inside /platforms/android/ant-build/Angular JS Cordova App-debug.apk, depending on your Cordova installation.
Make sure the device you are going to install the app on has developer options enabled. Find the build number under settings of your device. Tap several times on the build number, until it mentions ‘developer options are enabled’. Go to developer options and enable USB-debugging.
Make sure an Android device is connected to your computer via USB and check if the device is detected by your system with:
The detected device should be printed with its id and the word ‘device’ after it. If no device is listed, try remove the device and connect it to a different USB port.
Now install the apk on Windows with:
adb install -r path\to\APK-file\apk-file-name-debug.apk
adb install -r path/to/APK-file/apk-file-name-debug.apk
Build for iOS
Building iOS apps is not possible on Windows, only on OS X.
Before building the app for iOS, the platform first needs to be added to the project by executing the following command inside the cordova folder:
cordova platform add ios
Now we can build the app for iOS.
cordova build ios
This command creates an Xcode project file inside /platforms/ios/ which can be opened with Xcode. Clicking the ‘play’-button in Xcode will install and open the app in a simulator. To deploy on a real device a Apple iOS Developer membership is required, which you can get here.
And that’s it!
We have an Angular JS app, with a menu with which we can navigate (route) to 3 different pages.
We can get data with AJAX from a server backend and show this in a page.
We now have an environment to build apps with Cordova
And we can actually build apps for Android and iOS
These are the basics to create hybrid apps. What’s left to do and not covered in this tutorial:
- Create some real content and functionality for your app
- Setup some styling to improve the looks of your app
- Install Cordova plugins to enable native functionality inside your angular app, such as gps, camera, notifications, etc.
- Add the app to the store Android or iOS
« Part 1: How to setup Angular
« Part 2: How to use Angular controllers and services
« Part 3: How to setup an environment for Cordova