Window under Ionic environment installation

Description: This article describes the installation process for installing the ionic-android development environment under the Windows platform.

1. First to install the node environment, ionic installation and subsequent installation of many front end tools depend on node's package manager NPM.

Nodejs environment installation is very simple, to the official website to download the latest version of the Nodejs directly installed. Node Website: https://nodejs.org/

Baidu Cloud Address: Http://pan.baidu.com/s/1jGAEQVW

The node environment variable is automatically configured during installation and enters Npm-v enter in cmd after the installation is complete. If the version number appears, the installation succeeds.

Node Installation reference: Http://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

2. Install the JDK and configure the environment variables to skip this step if the JDK is already installed.

Jdk:http://www.oracle.com/technetwork/java/javase/downloads/index.html

Configure environment variables after installation is complete:

Java_home:

JDK installation path, the environment variable itself does not exist, need to create, you can use%java_home% as a unified reference path, the value is: JDK on your computer installation path.

PATH:

The PATH property already exists and can be edited directly. The function is used to configure the path, simplifying the input of the command with a value of:%java_home%\bin.  　

CLASSPATH:

For the path of the Java class at compile time, note that the two values are set here (.;) Indicates that the JVM searches the current directory first. The value is:.; %java_home%\lib\tools.jar.

After the configuration is complete, run the following command through CMD: Java-version,javac If the return message appears, the setting succeeds.

3. Install the Android SDK.

: http://developer.android.com/sdk/index.html This address has been wall. Need to use FQ.

Baidu Cloud Address: Http://pan.baidu.com/s/1sj7cL8T

Here you can download only Android SDK without having to download Android Studio. Download complete and install and then add two values to the system PATH environment variable. is the path to the tools directory in the Android SDK and the path to the Platform-tools, respectively. For example:

C:\Program Files (x86) \android\android-sdk\tools;

C:\Program Files (x86) \android\android-sdk\platform-tools;

If you find that the Android SDK installation directory does not have the "Platform-tools" folder, you should run the Android.bat file in the Tools directory, then the following screen appears, tick the Android SDK Platform-tools and install it.

After the environment variable configuration is complete, enter Android in CMD and return. If the Android SDK Manager appears, the installation is successful.

4. Install Apache ant.

ant:http://ant.apache.org/bindownload.cgi

Baidu Cloud Address: http://pan.baidu.com/s/1eQxpN8m

Environment Variables :

There are 2 main environment variables used by Windows ANT: Ant_home and PATH.
eg
1. Set the ant_home point to the ant's installation directory.
Setting method: Ant_home = D:\apache_ant_1.7.0

2. Set the bin and Lib directories into the path variable. Will%ant_home%\bin; The%ant_home%\lib is added to the path of the environment variable.
Setup method: PATH =%ant_home%\bin; %ant_home%\lib

%ant_home% can be replaced with a real path.

After the installation is complete, enter ant-version in CMD to verify that the installation was successful.

5. Install the ionic and download the demo project.

1. Download Ionic using NPM

   NPM install-g Ionic

2. Select a ionic template project to download locally. There will be some inquiries in the middle, such as whether to use Sass.app naming.
   
   MD myApp

   CD MYAPP  //Create a folder and enter.

   

3. Add the Android platform to the project.
     
   Ionic Platform Android

4. Run the project in the emulator

   Ionic emulate Android

Description: The APK is generated under the platforms directory when running the Emulate/run command.
      
       In the process of executing the platform and emulate commands, most of the errors occur because the Android environment is not fully installed. Please enter Android in CMD to open Android SDK Manager to check if the related package has been installed completely.
    
       In general, both tool and emulator must be installed. Then select a version of the Android API to install.
  

Reference:

6. After the above steps we have actually installed the Ionic development environment successfully. We can also use Yeoman to build Ionic project frameworks that others have built.

1. Installing Yeoman
    
   NPM Install-g yo

2. Installing Gulp
   

   NPM Install--global Gulp  //Global installation, install CLI
    
   NPM Install--save-dev Gulp//cmd into the project file location after installation.

3. Installing the Yeoman Ionic-gulp generator

   NPM install-g-generator-ionic-gulp

4. Go to the project folder and run the generator

   Yo Ionic-gulp
  
   Or go directly to yo, then install the prompt to run the generator in step. If you run yo after step 3, you cannot find the Ionic-gulp generator in the options in run a generator. Then install the generator locally in the project directory

   NPM Install  -generator-ionic-gulp

5. After the installation is completed, enter in cmd
   Gulp

   That is, you can start the default tasks defined in Gulpfile.js.

   ---Mix JS file compression, inject references in index.html, launch project in Browser, and open watch task to listen for file changes.
   

7. Ionic-gulp generated project directory Description:

When the build parameter in the. Tmp:gulpfile.js is false, running the Gulp default task confuses the resources under the app folder and creates it in the. tmp directory.

App: Development directory.

Related references are declared only once in the Index.html portal file. The HTML fragment is stored in the templates.

Bower_componets: Use Bower to install the package directory.

Node_modules: The package directory installed with NPM.

Platforms:cordova related directories containing the APK that is packaged each time a gulp or ionic command is run.

When the parameter in the build in the Www:gulpfile.js file is true, the resources under the app folder are merged to create the WWW directory. That is, compressed packaging to form the APK file directory.

Vendor.json: Declares a link to external resources that should be introduced.

Corresponding in app/index.html:

Gulpfile.js: Defining Gulp Tasks

Window under Ionic environment installation