Ionic environment configuration and Android packaging

Environment Construction Steps:

1. Install node. js This is to use NPM to install Ant,cordova,ionic

The way to verify that node. JS is installed is to enter "Node-v" at the command prompt to prove that the installation was successful if the version number appears.

Nodejs Chinese website http://nodejs.cn/download installs the installation procedure can refer to http://www.runoob.com/nodejs/nodejs-install-setup.html

2. Download the JDK and configure the Java environment (many online tutorials)
To verify that the installation is a good method, enter "Javac" at the command prompt
If the following appears, it proves the installation was successful.

3, install ant, and configure the appropriate environment (online Search tutorial)

To verify that Ant is installed by entering "ant-v" at the command prompt

If the version number appears, the installation is successful.

4, installation Cordova

The installation was unsuccessful by the following: NPM install-g cnpm--registry=https://registry.npm.taobao.org
After successful execution, enter CNPM install-g Cordova installation

To verify that Cordova is installed by entering "cordova-v" at the command prompt

If the version number appears, the installation is successful.

5. Install Express

CMD input: npm Install Express wait a minute

6. Install the Android SDK configuration environment variable CMD->ADB

7, installation Ionic

To verify that ionic is installed by entering "ionic-v" at the command prompt

If the version number appears, the installation is successful.

Create a Ionic project

Ionic offers three project templates blank, tabs and Sidemenu, see: http://ionicframework.com/getting-started/
We use blank empty template to create one of our applications, and complete a simple tabs navigation small application, open PowerShell CD to the development directory, execute:

Ionic start Myionic Blank  

Where Myionic is the name of our project
Execution process It will download the project source from GitHub, please wait ...
After the execution you go to the development directory to see a more than a folder named Myionic, this folder is the directory of the Ionic project.
The following files are available in the directory:

Because Ionic is developed based on the ANGULARJS framework, it is necessary to have a certain understanding of angularjs before using ionic.
In the initial development of debugging we generally use the browser as our debugging tool, Ionic provides a serve command for our app to create a Web site to

Ionic serve  

　　

After execution ionic will automatically help us Open our default browser and jump to our application page, the browser opens the page ionic has already opened the Livereload mode for us, after opening we edit www After the file is saved Ionic will refresh the page through the WebSocket notification browser, we do not have to manually refresh the page every time we modify, but also greatly improve our efficiency.

PS. After opening livereload Ionic will listen to the www following files by default, if you need to customize, please edit ionic.project watchPatterns to set the range to listen

{    "name": "Myionic",    "app_id": "",    "Watchpatterns": [          "www/js/*",          "www/js/*/*",          "www/*". HTML ",          " www/templates/*.html ",          " Www/css/*.css "     ]  }  

　　www/index.htmlAs our program entry file, first edit this file and add it to the body tag

<ion-nav-bar class= "bar-positive" >    <ion-nav-back-button>    </ion-nav-back-button>  </ion-nav-bar>  <ion-nav-view></ion-nav-view>  

This tag may be a bit unfamiliar to people unfamiliar with Ionic, ionic a set of style libraries for the mobile side, and uses angular directives to encapsulate each module, which is the ion-nav-bar navigation page header and ion-nav-view navigation content page. inde.htmlwe have finished the entry page and we are going to create two of our own pages. We www create a new folder in the directory templates , store our page and create a new page: tabs.html as the main page of our tab app:

<ion-tabs class= "Tabs-icon-top tabs-positive" >      <ion-tab title= "Home" icon= "Ion-home" href= "#/tab/home ">      <ion-nav-view name=" Home-tab "></ion-nav-view>    </ion-tab>    <ion-tab Title= "About" icon= "ion-ios-information" href= "#/tab/about" >      <ion-nav-view name= "About-tab" ></ ion-nav-view>    </ion-tab>    </ion-tabs>  

ion-tabThe bottom menu item for the tab app title is the text displayed by the menu button, which is the icon menu button icon, the href jump address of the Click menu, the child element is the position of the ion-nav-view sub-page displayed after the click of the menu, the ion-nav-view property name is the name of the tab, Additional sub-pages are described in detail later.

Then app.js add the route to the page in

Ionic Starter App//Angular.module is a global place for creating, registering and retrieving angular modules//' Starter ' is the name of this angular module example (also set in a <body> attribute in index.html)//the 2nd param Eter is an array of ' requires ' angular.module (' starter ', [' Ionic ']). config (function ($stateProvider, $urlRouterProvider {$stateProvider. State (' tabs ', {url: "/tab", Abstract:true, Templateurl: "Templates/tabs . html ",}). State (' Tabs.home ', {url: '/home ', Views: {' Home-tab ': {Template          URL: "templates/home.html"}}). State (' tabs.facts ', {url: "/facts", Views: {  ' Home-tab ': {templateurl: "Templates/facts.html"}}}). State (' Tabs.about ',         {URL: "/about", Views: {' About-tab ': {templateurl: "templates/about.html"} }}) $urlROuterprovider.otherwise ("/tab/home"); }). Run (function ($ionicPlatform) {$ionicPlatform. Ready (function () {if (Window.cordova && Window.cordov A.plugins.keyboard) {//Hide the accessory bar by default (remove this to show the accessory bar above the Keyboar          d//For form inputs) Cordova.plugins.Keyboard.hideKeyboardAccessoryBar (true); Don ' t remove this line unless your know what is doing. It stops the viewport//from snapping when text inputs is focused.        Ionic handles this internally for//a much nicer keyboard experience.      Cordova.plugins.Keyboard.disableScroll (TRUE); } if (window.      StatusBar) {statusbar.styledefault ();  }    });   })

Well, the way we look at the tab app has come out, but now we're not reacting to the menu below and we're going to start adding our sub-pages, creating new ones in the templates folder: home.html facts.html about.html

Home.html Home

<ion-view view-title= "Home" >      <ion-content class= "padding" >        <p>          <a class= "button Icon icon-right ion-chevron-right "href=" #/tab/facts ">scientific facts</a>        </p>      </ Ion-content>  </ion-view>  

Facts.html

<ion-view view-title= "Facts" >      <ion-content class= "padding" >        <p>          <a class= " button icon icon-right ion-chevron-right "href=" #/tab/home ">Home</a>        </p>      </ Ion-content>  </ion-view>  

About.html

<ion-view view-title= "About" >      <ion-content class= "padding" >        <p> about          Us        </p >      </ion-content>  </ion-view>  

ion-viewis the content of our child page, the property view-title can set the title name of the page header, after adding the good file we need to app.js join each page in the route, and need to make an adjustment to the previous tabs route.

It is found that the tabs route adds a abstract field that is interpreted in angular as an abstract page and cannot be displayed as a page only as a parent page of other pages when the parent page is loaded before the child page is loaded.
The Routing and routing configuration of the other sub-pages differs in the tabs form of name naming, 父路由.子路由 and a dictionary is added, and the views key value of the field corresponds to the tabs.html ion-nav-view attribute in the previous section name . The page that indicates that the route jumps belongs to a sub-page of a tab, and modifies our otherwise default page as /tab/home .
After saving the browser automatically refresh, we look at the effect.

OK, let's have a look, page switch Ionic has helped us achieve a similar native app switching animation effect, is there a bit of native app feel? In the following chapters we will implement the deployment on the mobile side

Deployment to mobile phones and the use of Cordova plugins

A simple Web application has been developed, and we will have to do some preparation before deploying it to the mobile side.
Ionic support two platforms iOS, Android, the default Ionic project does not add these two platforms, we need to manually add, CD to the development directory to execute the command:

Ionic platform Add Android   Ionic Platform add iOS  

General projects require two platforms to be deployed at the same time, so we add two, execute the command to see the list of platforms you have added:

Ionic Platform List  

Results:

Installed Platforms:android 4.0.0, iOS 3.8.0  

The next deployment we tell separately:

Android
Android deploys the telepresence and virtual machines in a similar way, before deploying the JDK, Android SDK into the development environment, configuring the JDK JAVA_HOME and Android SDK to the ANDROID_HOME environment variables, and adding the Android SDK installation directory to the Paththe.

Once configured, the Open PowerShell input command is returned correctly:

ADB version  

Now it's easy, connect your phone to your computer, and turn on the USB debug mode to execute the command:

Ionic run Android   

Is it easy for ionic to start compiling the project build apk and automatically open the app after installing it remotely on the phone?

Debugging

As we have said earlier, in the early stages of development we will generally debug in the Web, and Ionic provides us with a very web debugging environment, just to implement the ionic serve Lievereload can be implemented, and after deployment to the mobile side can also open livereload, We only need to modify the following parameters of our Run command:

Ionic run Android--livereload-c-S  

This is the debug mode of Android, whether on the virtual machine or on the phone can be implemented livereload, not every development to complete the compilation and deployment! -cis to turn on the client log output, which -s is to turn on server-side log output.

Android Pack

The ability to use ionic to develop apps is probably not very familiar with the iOS and Android app packaging release process, which I'll briefly explain below:
Android
Android's package comparison simple execution command:

Ionic Build Android-release   

Found www/platform in the directory generated APK package, at this time the APK can not be installed on the phone, but also need a step signature operation, we can refer to:
Http://www.cnblogs.com/qianxudetianxia/archive/2011/04/09/2010468.html

To create the key, you need to use the Keytool.exe (located in the Jdk1.6.0_24\jre\bin directory), using the resulting key to the APK signature is Jarsigner.exe (located in the Jdk1.6.0_24\bin directory), After adding the directory where the two software is located to the environment variable path, open the cmd input

D:\>keytool -genkey -alias demo.keystore -keyalg RSA -validity 40000 -keystore demo.keystore/*说明：-genkey 产生密钥       -alias demo.keystore 别名 demo.keystore       -keyalg RSA 使用RSA算法对签名加密       -validity 40000 有效期限4000天       -keystore demo.keystore */D:\>jarsigner -verbose -keystore demo.keystore -signedjar demo_signed.apk demo.apk demo.keystore/*说明：-verbose 输出签名的详细信息       -keystore  demo.keystore 密钥库位置       -signedjar demor_signed.apk demo.apk demo.keystore 正式签名，三个参数中依次为签名后产生的文件demo_signed，要签名的文件demo.apk和密钥库demo.keystore.*/

Note: The demo.apk in the bin directory of the Android project is signed by default with the debug user, so you cannot use the above procedure to sign the file again. The correct step should be: In the project right click->anroid tools-export Unsigned Application package exported APK takes the above steps to sign.

Ionic environment configuration and Android packaging