Ionic 入门

关于 Ionic

Ionic 是基于 HTML5 与 AngularJs 的一个开发框架。Ionic 更多的是是基于 WebView 的开发模式，因为其本身提供了一系列的前端控件与 JS 控件。更多的详情可以查看：Ionic 官网（相关的教程可以 Google，中文教程还是比较多的，不过其实也不大需要教程，嘿嘿）

与 React Native 的对比

1. React Native 是基于 Native 实现的，Ionic 依然还是 Hybrid 模式。
2. React Native 基于 JSX 的，而 Ionic 则基于 AngularJs。
3. React Native 目前只支持 Mac 的开发环境（傲娇脸），React Native for Android 是9月15号发布的，相对来说，Ionic 对开发环境的支持更加丰富，但是 React Native 的社区更加庞大，所以……我们还是先了解 Ionic 吧。

Ionic 入门

安装 Ionic

• Ionic 是基于 NodeJS 的，所以要使用的话，需要安装 NodeJs，安装包请从官网下载。
• 安装完 node 后在控制台执行：npm install -g cordova ionic

安装过程需要从网络下载大量的数据，安装过程可能比较慢，请耐心等候。

如果安装过程中出现错误，可以尝试通过管理员运行来安装。

运行 Ionic

Ionic 支持了 Android 与 iOS 平台的开发。初始化工程需要在控制台执行如下命令：
ionic start myApp tabs

该命令会下载相应的数据，用于初始化工程，生成工程目录:
- myApp 是对应的工程名称，生成目录的根目录名称。
- tabs 是生成工程的类型，根据官网的资料 Ionic 提供了 tabs,blank,sidemenu这三种类型。对应的效果。

blank

tabs

sidemenu

以下命令来运行工程。
cd myApp
ionic platform add android // 添加平台相应的数据
ionic build android //创建工程
ionic emulate android //打开模拟器

要创建 Android 工程需要配置环境变量：ANDROID_HOME！！！

开发环境搭建

编辑器

推荐 Github 官方开发的 Atom
- 软件安装与相关插件推荐

API

官网提供了详细的教程供大家学习，请自行访问官网。其实 Ionic 这个方案更多的是对这些控件的使用。而官网的文档还是比较给力的，所以大家通过官网来学习就可以了，因为常用的控件就那几个。
- CSS 控件
- JS 控件

相应知识储备

Ionic 属于新事物，所以学习它你需要了解这些东西。。。

HTML、CSS

Ionic 框架封装比较完整，我们使用的时候，可以像编写 Android 中的 Layout 那样来开发。不过有些地方还是需要了解 HTML 相应的知识。

AngularJS

Ionic 是基于 AngularJS 实现的，所以要使用的话，需要学习 AngularJS。
- 官网
- 中文教程

Thanks For Visit

David Lin

参考资料

• Ionic 官网
• React 官网
• AngularJS 官网
• Ubuntu 下 Ionic 环境配置
• Ubuntu 下安装 Atom 与 Atom 插件
• Atom下 Emmet 插件使用的简单指南
• Ionic 与 React Native 对比