Setting up Cordova and Angular from scratch

Datetime:2016-08-23 02:34:45          Topic: AngularJS           Share

Introduction

When it comes to creating hybrid mobile apps using HTML and JavaScript, there’s no better combination than Cordova and Angular. Cordova gives us the tools we need to interact with and compile mobile apps and Angular supplies the design pattern and abstractions we need for a reliable code-base and an enjoyable coding experience.

Setting up a new project using Cordova and Angular is not difficult but there are many different ways of doing it. If you run a quick search on how to marry these two technologies you will find several different articles that propose different approaches but almost all of them rely on scaffolding generators (Yeoman). While generators can be extremely convenient, they usually end up creating a bloated code-base and impose other dependencies you may not be interested in using.

In this article we’ll set up a clean development environment for Cordova and Angular from scratch. The only external tool we’ll be using is npm to download and install the latest version of Cordova CLI and Angular.

Getting started

If you don’t have npm installed on your machine, the recommended way of doing it is using the node.js installer. npm is installed as part of node.

Once you’ve got npm installed, open Terminal and run the following command:

 
npmversion
 

If npm is available, you should be seeing the current npm version installed on your machine.

Next, we need to grab Cordova CLI. Cordova CLI lets us set up new Cordova projects, assign them to different platforms such as iOS and Android and run a virtual server while we’re building our apps. Installing Cordova CLI is a breeze thanks to npm. Simply run the following command in Terminal:

 
sudonpminstall -g cordova
 

To make sure Cordova CLI has been installed successfully, run the following command:

 
cordova -v
 

Much like the test we ran for npm, you should be able to see the current version of Cordova installed on your machine.

Now that we’ve got all the tools we need, it’s time to create a new project.

Creating a new project

To create a new project, navigate to where you want your project installed and run the following command:

 
cordovacreatehellocom.example.helloHelloWorld
 

The cordova create command takes three arguments: The first argument hello specifies a directory to be generated for your project, the second argument com.example.hello provides your project a reverse domain-style identifier, and the third argument HelloWorld provides the application display title.

Let‘s jump into our project folder and initialise a new npm package.json file.

 
cdhello
npminit
 

The npm installer will ask a few questions about your project such as its name, version, description, etc. It’s okay to proceed with the default values. If you want to change anything later, you can simply modify the package.json file.

Now that we’ve got npm initialised in our project directory, we can install angular.

 
npminstallangular --save-dev
 

npm installs new libraries in the /node_modules directory. Let’s copy the Angular library from this folder and onto our Cordova’s project root directory ( www ).

 
mkdirwww/js/vendors
cp -a node_modules/angularwww/js/vendors/angular
 

At this stage we’ve got our project files set up but before we move on, let’s configure a couple of services that will help us run and test our app.

We’re going to install the Browser platform for our Cordova project as well as the BrowserSync plugin for live reload. We can manage this through Cordova CLI. Let’s run the following commands:

 
cordovaplatformaddbrowser
cordovapluginaddcordova-plugin-browsersync
 

If the installation was successful, we should be able to run our project with the following command:

 
cordovarun -- --live-reload
 

This command will run a local and external server for us to test your app on. It should also open up our default browser and run our app. If it doesn’t, simply visit: http://localhost:3000 and you should be able to see the good ol’ familiar Cordova Robot logo and your app’s status underneath it.

Apache Cordova running on Chrome

Now that we’ve got Cordova running, it’s time to create a new Angular app.





About List