How to Create a Mobile App with Angular and Cordova – a Brief Tutorial

READ WHOLE ARTICLE

Angular is the second most popular JS framework used for building one-paged applications and many other mobile development solutions.

Along with Apache Cordova, which provides wrapper capabilities, Angular allows to create crossplatform software matches all the benefits of native looks, accessibility, and functionality. That’s why we decided to create a Cordova Angular tutorial to help you begin a basic cycle of work based on these two prominent software tools.

What is Apache Cordova in Essence?

In a nutshell, Apache Cordova is a platform collecting a set of APIs that open wide access to the mobile functionality embedded in the hardware of mobile devices. Combined with Angular, this tool allows you to write applications in the “universal” JS language (plus HTML and CSS), instead of using complex native platform languages (Objective-C, Swift, Kotlin, Java, etc.).

The main advantages of Cordova include a steep learning curve (all you need to start working with it is some JS knowledge and CLI skills), high performance, easy access to native functionality (camera, contacts, geolocation, media, SMS, etc.), an open-source core (which means that the world community of the best developers makes a material contribution to this project), as well as a huge online community.

Today, Cordove is used by such corporate and software giants as Walmart, Adobe, and Edools in their mobile solutions.

So how does Cordova work?

The user interface of Cordova is in the webview format – a kind of tab in the browser. When you compile the application, Cordova doesn’t involve your HTML, CSS, and JavaScript code, but converts it to its own code, which will subsequently be defined for each platform. In this way, Cordova acts as a wrap for an application in which you use further web technologies.

When the application is compiled, your code remains unchanged. The compiler simply takes the code written by the developers and makes it available for rendering in the web view.

Starting to Work with Cordova & Angular Combination

For starters, before creating Apache Angular Cordova app, you have to install the CLI Cordova. Just go according to the manual on the official Apache website.

After that, you will need to also install Angular CLI and create a new Angular project (this tutorial is meant for figuring out version 2 and higher), as shown in this video tutorial.

Also, install the SDK for those mobile platforms you plan to create an application for (for Android or for iOS).

How to Use Cordova Plugin in Angular – Getting to Developing

These are 12 easy steps to help you figure out how to create mobile apps with Angular and Cordova. We based them on a particular Angular Cordova example of an app.

Step #1

First, create a new project in Cordova with the help of the following line:

cordova create hello com.example.hello HelloWorld

Step #2

Now, you need to connect the required mobile platform (Android/iOS). This also takes a single specification line:

cordova platform add[platform]

Step #3

Next, the Angular project you created earlier will need to be connected to your Cordova project. All you need to do is just import all the files of the Cordova project into the root folder of the Angular project (except for package.json – you just need to open this file in both projects and copy all the contents from the Cordova project to the package.json file in the Angular project).

Step #4

Now, launch the testing and build process in your Angular project.

Step #5

Next, go to the http://localhost:4200/ to launch the ng serve in local mode. Doing  this, you ensure the validation of changes and all updates in the application will be automatically displayed as you change the code.

Step #6

This is where you’ll need to connected the Cordova plugin. For this, simply add the following line to the HTML-file code of your Angular project:

<script type="text/javascript" src="cordova.js></script>"

Note that you will see an error after that if you decide to test the application on the local server.

This is how you connect one of Angular Cordova plugins:

cordova plugin add cordova-plugin-device

Step #7

At this point, you need to connect the OnInit component and execute the plugin callback. This is done using the following code:

import {Component, OnInit) from '@angular/core';
....
....
export class AppComponent implements OnInit{
ngOnInit(){
	document.addEventListener("deviceready", function(){
		alert(devicy.platform);
		}, false);
	}
}

Step #8

Lastly, in order for the compiler to be able to identify the ‘device.platform’ operator, enter the following command after the import line:

declare var devica;

Step #9

The application is now created, we managed to convert Angular to Cordova, and now we need to make a few changes. For instance, it makes sense to replace <base href = “/”> from the index.html file located in the src folder of your Angular project with <base href = “./”>. This is necessary to pave access to the project files on Cordova.

Step #10

You will also need to update your Angular project so that it builds in the www folder.

To do this, simply open .angular-cli.json / angular.json in the main folder and:

  • if you work with Angular younger than version 6, replace the outDir parameter with “dist” and “www”;
  • if you work with Angular version 6 and higher, replace the outputPath parameter from “dist / {project_name}” to “www”.

Step #11

Everything in your Angular Cordova project is almost ready for launch. A final prep step is checking how correctly the software works – just use this line:

cordova build android|ios|[platform]

Step #12

If everything you did manually is correct, you will see a console window with text indicating the platform for which you are creating software.

How to Сonvert Angular Code Using Cordova – Summary

If you want to engage in building Angular Cordova app that boasts more than basic “hello world” capabilities (as indicated in our guide), you are unlikely to do without the help of professionals.

You can turn to us as one of the most experienced companies in the field of Cordova Angular mobile app development in the Eastern European market. We will create a highly reliable, competitive, and scalable product with a high level of UX. 

Contact us right now to find out the terms of development and clarify the estimated budget for the implementation of your business idea.

For ClientsJune 10, 2020
Have a project in mind?
We are ready to do it!
LET’S TALK ABOUT IT
Do you like this article?Please rate
1 stars
POD
Reasons of Why Your Pod Business is not Sustainable yet and How to Resolve Them
The last decade has become a landmark in the awareness of consumption principles. That has prompted the emergence of a new model of the fashion industry, namely sustainable fashion. Its concept focuses on workers' rights and operating conditions in manufacturing and monitors the industry's impact on the environment. Almost every year, negative emotions storm arises in public from heartbreaking shots with the mass market production secrets. As a result, the trust level in the brand falls, and all it can do is rethinking its behavior towards sustainability. The elimination of some toxic agents, materials, household items, and technologies recycling are basic sustainability ingredients. Print on demand is one of the few eco-friendly types of clothing production. And this is not only because it doesn't imply replication or uses digital image analogs. Such printing advantage lies primarily in materials: non-toxic toners and plant-based inks, fabrics, glass, and even plastic. What can we say about a lack of warehouses, automated energy-efficient equipment, and minimal emissions? Online stores using POD services don't need physical warehouses - the item comes to the end consumer directly from the supplier. That significantly reduces our carbon footprint. At the same time, the suppliers' location varies depending on the customers' region/country [...]
E-Learning
Learning Management System Design Ideas
Functionality and content are usually the main priority when it comes to setting yourself and your software for success. However, the design is not something to be taken for granted. It has a particular way to promote uniqueness while enhancing a product’s user experience and functionality. In terms of purpose - the design of the learning management system (LMS) is not that different. LMS is an essential aspect of the eLearning industry - for higher education or corporate training. It allows students or employees to elevate their learning experience, provides convenient and easy access to knowledge, and helps teachers prepare, manage, and track courses and curriculum. Imagine the frustration of both sides provoked by crappy (read: inferior and overly complicated) design. To avoid such a nuisance, the LMS design must, above all, be easy on the eyes and undemanding of a user [...]
POD
Top Digital Marketing Tools That Could Help Your POD Business Succeed
Given the dizzying pace of technological progress, it's not surprising that all industries should move as rapidly. Digital marketing is no exception. With the new methods and algorithms arrival, marketers can keep up with trends and thus stay at the top of the game. The global T-shirts print on demand services market is estimated at the US $3.64 billion in 2020. Moreover, such a phenomenal industry development won't slow down soon! This article will discuss the best digital marketing tools that will help the POD business succeed [...]
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Read More