preface

The company has a project written using the mixed development model of Cordova+Ionic+Angular. Since our department took over the project, we had to get familiar with the model of Cordova+Ionic+Angular.

I first got into mixed development at the end of 2016. At that time, the team considered using RN for project development, so I read some RN technologies and tried to do some small projects in my spare time… The advantages of hybrid development are obvious. It is well known that a code runs in multiple ways and the development cost is low, etc. The disadvantages of hybrid development are mainly user experience and slightly poor performance, but with the update of technology, it is believed that hybrid development will gradually improve in this aspect.

Getting started with Cordova+Ionic+Angular

Environment Building (Mac Version) :

1. Install NPM and Node.js

You are advised to install Brew first. Enter brew-v on the terminal to check whether Homebrew is installed. If not, install homebrew according to the instructions on the official website. If yes, run brew install NPM and Brew Install node and check whether the installation is successful:

Install ionic and Cordova

NPM install -g cordova ionic command line. If you cannot install it, try installing CNPM. Perform NPM install – g CNPM – registry=https://registry.npm.taobao.org command to install. Run CNPM install -g Cordova ionic to install ionic and Cordova. Then check whether the installation is successful.

Creating an Ionic Project

Create an Ionic project

Ionic start <name> <template> [options] example: // Generate a tabbed ionic start project with the name ionic test-app Ionic start ionic test-app sidemenu // generate a project named ionic test-app with a sidemenuCopy the code

Terminal run ionic Serve to open the project in a browser:

2. Create an Android app

$ cd ionic-test-App
$ ionic cordova platform add android
$ ionic cordova build android
$ ionic cordova emulate android
Copy the code

Ionic Cordova emulate Android: Ionic Cordova emulate Android will fail to find the emulator. The final run is as follows:

3. Create an iOS application

$ cd ionic-test-App
$ ionic cordova platform add ios
$ ionic cordova build ios
$ ionic cordova emulate ios
Copy the code

If ios-sim was not found, run the NPM install -g ios-sim command. The final run is as follows:

Learning documentation: Ionic Framework

Create iOS and Android projects with Cordova, Ionic and Angular

For more Articles, see Articles