(一) Ionic 环境搭建

Ionic 环境搭建

一. Ionic介绍以及学习ionic前为什么要学习Angularjs

  ionic是一个强大的HTML5应用程序开发框架,号称Advanced HTML5 Hybrid Mobile App Framework 是AngularJS 移动端解决方案,可以帮助你使用Web技术,比如HTML,CSS和Javascript构建接近原生体验的移动应用程序.Ionic主要关注外观和体验,以及和你的应用程序的UI交互,特别适用Hybird模式的HTML5移动应用程序开发.

  Ionic 官网:http://www.ionicframework.com/

  AngularJs 官网:http://docs.angularjs.cn/api

  PhongGap 官网:http://phonegap.com/

  NgCordova 官网:http://ngcordova.com/docs/plugins/

  学习交流论坛 地址:http://ionichina.com/ 

二. 环境搭建

  1.安装node环境

   Ionic的安装和后续的许多前端工具的安装都依赖于node的包管理器npm

   下载地址:https://nodejs.org/en/

  2.安装jdk

   安装链接:http://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html

  3.安装ant

   下载地址http://ant.apache.org/

    解压到一个文件夹,如：D:/ANT/apache-ant-1.9.4接着配置环境变量

  ANT_HOME   D:/ANT/apache-ant-1.9.4
  path       D:/ANT/apache-ant-1.9.4/bin

  4.安装adt

   安装链接:http://jingyan.baidu.com/article/63f23628ea4d480209ab3d4d.html

   下载安装好各个版本的sdk

  5.安装cordova

  ngCordova是在Cordova Api基础上封装的一 系列开源的AngularJs服务的扩展,让开发者可以方便的在HybridApp开发中调用设 备的能力, 即可以在    AngularJs代码中访问设备的能力Api

  npm install -g cordova

   安装时间可能会比较长,安装成功后输入下面代码显示版本号则安装成功

  cordova -version

  6.安装ionic

  npm install -g ionic

    输入下面代码显示版本号则证明安装成功

  ionic -v

   7.安装开发工具WebStorm

    个人建议新手使用WebStorm开发工具

三. 运行第一个项目

    创建项目

    cmd切换到任意目录下运行

   ionic start myapp

    myapp就是你的项目名称,接着cd到myapp项目下

cd myapp

    构建不同的运行版本,这里选择cordova platform add android 运行安卓版本

cordova platform add ios
cordova platform add amazon-fireos
cordova platform add android
cordova platform add blackberry10
cordova platform add firefoxos

    编译

cordova build

    运行模拟器,如果电脑插入手机可以直接在手机上面运行

ionic run

    游览器运行

ionic serve

运行成功!

四. 常见错误解决

  1.在运行构造平台版本时cordova platform add android这个可能会报错

[error] Please install Android target 22 (the Android 5.1 SDK). Make sure you have the latest Android tools installed as well.

 这个主要是没有安装和当前cordova对应要求的Android平台adk,解决办法:

 打开ADT,打开Android SDK manager,安装对应平台的SDK

 2.在添加cordova插件时报如下错误:

internal error Error: EXDEV, cross-device link not permitted 'C:\Users\asus\AppData\Local\Temp\git\1435546557383\APACHE_LICENSE' at Error (native) at Object.fs.renameSync (fs.js:636:18)

 这是由于无权限等原因解决办法有两种:
 ①把项目移动到C盘再执行 cordova plugin add ...添加插件

 ②进入该插件的github,把插件下载到本地再执行 cordova plugin add G:\cj\cordova-imagePicker-master  即可

 3.在真机调试中Android环境下导航在最上面解决办法

  进入项目www-->js-->app.js文件config方法中添加如下代码,记得在括号中添加$ionicConfigProvider

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
        $ionicConfigProvider.platform.ios.tabs.style('standard'); 
        $ionicConfigProvider.platform.ios.tabs.position('bottom');
        $ionicConfigProvider.platform.android.tabs.style('standard');
        $ionicConfigProvider.platform.android.tabs.position('standard');
        $ionicConfigProvider.platform.ios.navBar.alignTitle('center'); 
        $ionicConfigProvider.platform.android.navBar.alignTitle('left');
        $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
        $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');        
        $ionicConfigProvider.platform.ios.views.transition('ios'); 
        $ionicConfigProvider.platform.android.views.transition('android');
}