Today, let’s learn how to install Ionic to build a simple small application on your computer. Many websites write very complicated installation methods. In fact, beginners who are just starting to learn ionic, especially those who do not have much programming experience, will they be scared away? It feels so complicated, what kind of node.js environment is needed to install, and install the latest version of cordova... Actually, it doesn't need to be so troublesome. Let me tell you how I use ionic when I am working on projects.
The first method: introduce it directly
Step 1: Download Ionic first
The latest version of ionic is downloaded at: http://ionicframework.com/docs/overview/#download.
After downloading, unzip the compressed package, including the following directories:
The code copy is as follows:
css/ => style file
fonts/ => Font file
js/ => Javascript file
version.json => version update instructions
You can also download the following resource file on Github: https://github.com/driftyco/ionic (in the release directory).
Step 2: Introduce files
Next, we only need to introduce the css/ionic.min.css and js/ionic.bundle.min.js files in the above directory into the project to create an ionic application.
<ion-header-bar><h1>Hello World!</h1></ion-header-bar><ion-content><p>My first ionic app. </p></ion-content>
Note: In mobile applications such as phonegap, we only need to add the corresponding js and css files to the resource library.
The second method: command line installation
First you need to install Node.js. Then install the latest versions of cordova and ionic through the command line tool. Install by referring to the official Android and iOS documentation.
Open the command line tool on Window and Linux to execute the following command:
The code copy is as follows:
$ npm install -g cordova ionic
Use the following commands on your Mac system:
The code copy is as follows:
sudo npm install -g cordova ionic
Tip: IOS needs to be installed and used under Mac Os X. and Xcode environments.
If you have installed the above environment, you can execute the following command to update the version:
The code copy is as follows:
npm update -g cordova ionic
or
The code copy is as follows:
sudo npm update -g cordova ionic
Create an application
Create an ionic application using the ready-made application template provided by ionic, or a blank project:
The code copy is as follows:
$ ionic start myApp tabs
Run the ionic project we just created
Create, test, run your apps using ionic tool (or create directly via Cordova).
Create android app:
The code copy is as follows:
$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android
Create an iOS app:
The code copy is as follows:
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios