Ionic入门

ionic环境搭建

1. 安装nodejs
2. 在命令行，安装angular.js
3. 安装ionic
4. 安装ant
5. 编译：如果出错那么采用:cordova build android – –ant。
   这个网址介绍的比较详细，它没有提到。http://www.runoob.com/ionic/ionic-install.html，如果出现环境问题，那么99.9999%的情况下都可以通过谷歌解决。

常用命令

早些时候，官方出了一个图形化IDE—Ionic Lab，但是因为种种原因，官方不再支持。个人认为不好用，总是出现反应不够快的bug，而且大部分的命令行其实非常简单，尤其是Ionic Creator兴起后，IDE更显得鸡肋。

ionic start myApp blank（空项目）
ionic start myApp tabs（带导航条）
ionic start myApp sidemenu（带侧滑菜单）

ionic platform add android（添加android平台）
ionic build android（编译项目apk）
ionic emulate android（运行项目apk 手机连接在手机运行 模拟器连接在模拟器运行）
ionic run android （相当于build + emulate）
ionic serve （开启服务调试）

ionic serve –lab（在浏览器中查看ios和android应用）

Demo

由于Ionic的语法是封装的angular，其自然而然也集成了angular的MVC。

项目结构

将项目导入想要的编辑器，我这里用的sublime，在“项目”栏，点击“将文件夹添加到”，添加项目即可。项目结构如下，源代码都存储在www文件夹内，其他的文件均为系统自动生成，可以不用管。

查看www文件夹，可以看到这是一个标准的web程序结构，其中：index是入口函数，相当于android中的MaincActivity和iOS中inial launcher；css：控制样式；js：控制着逻辑；templates：则是详细的页面内容。

界面

在书写界面时有两种选择：
1.按照ionic项目的结构，在h5页面中写ionic控件
2.在Ionic Creator中用可视化的方式，构造布局，然后再导出，导出的目录是一个www的文件夹，替换项目的相应文件夹即可。

逻辑

主要由控制器控制，相信熟悉angular项目的人都不会觉得陌生。

调试

输入ionic serve，将可以实时看到代码的变动的效果，调试起来相当方便。

输入ionic serve –lab，将可以整体的效果。

测试

当你需要在真机上进行测试的时候，你可以运行ionic run android（各个平台的命令不一样，自行脑补）。然后在刚才的源代码根目录下会多出一个platform文件夹，里面分别有android和ios的安装包，拖入模拟机或者真机即可，如果没找到相应的apk或者ipa，那么多找几次。

未完待续。