该博文的实际练习项目请见: ionicApp
安装ionic相关环境
1、安装node.js
进入node.js官网 找到相应的安装包安装。
配置环境变量:NODE_PATH 到 ~/nodejs/node_modules
2、安装ionic 与 cordova
进入控制台,npm安装:
npm install -g cordova ionic
3、安装sass
命令行安装:
ionic setup sass
新建一个工程
1、下载工程模板(sidemenu为例)
命令行安装:
ionic start myApp sidemenu
会生成一个myApp目录。里边是原始工程文件。另外www文件夹下有可以直接作为web使用的工程文件夹。直接放入tomcat就可以运行了。
2、加入开发平台(Android)
进入目录
cd myApp
加入平台,android 或者 ios
ionic platform add android
此时platforms文件夹下多出对应平台的项目文件夹了。
3、添加cordova插件
这里以camera, barcodescanner为例。
注意!:如果是想拷贝项目文件夹出来另外导入android工程进行开发的话,最好在真正开始开发前就引用好插件,因为引用插件会对java, js,配置文件等进行多处修改,所以不建议中途增加插件。除非用node.js直接在工作工程目录中自动添加插件
命令行方式添加插件:
cordova plugin add cordova-plugin-camera
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
附:barcodescanner 插件通过Git下载,需要系统中有git插件
Git的安装步骤如下:
npm install -g git
安装Git软件, 并设置PATH环境变量
C://Program Files//Git//bin
(假设)
开发
原始项目结构
如下图所示:
其中:
src/com(org) 下边是java相关原声Android代码(Activity,以及插件的配合Activity),无需自己写,node.js自动导入。
assets/www 文件夹下是本地WEB工程(已加入cordova特性),因此不能直接用来作为WEB服务。
assets/www/lib 文件夹用于存放公共库文件,ionic为自动加入;ng-cordova为后期导入(注意:ng-cordova的引用应该在cordova之前)。
assets/www/templates 文件夹用于存放html页面片段
关键js脚本
1、app.js
整个APP的主模块,其余的controller, services模块在这里注入。同时,该模块声明了前端路由。
2、controllers.js 以及 services.js
可以自行声明,并根据后期模块的增加继续拆封。合理的声明与设计controllers, services的代码是AngularJs 作为MVC框架的精髓。写得好的话可以极大的精简代码以及实现更好的代码复用。
常用插件以及注意事项
camera
cordova plugin add cordova-plugin-camera
barcode
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
注意需要配置Git
Dialogs
cordova plugin add cordova-plugin-dialogs
注意,打包成服务使用有问题,会跳过询问窗口,直接执行下一条语句。因此目前先直接在需要用的地方调用$cordovaDialogs比较好
fileTransfer
cordova plugin add cordova-plugin-file-transfer
file
cordova plugin add cordova-plugin-file
注意一些常用的常数
错误代码: cordova-plugin-file / www / android / FileErrors.js
文件位置: cordova-plugin-file / www / android / fileSystemPaths.js(一般使用外置存储中对应APP目录下的data文件夹比较好.externalDataDirectory 对应目录/sdcard/Android/appName/files)
参考资料
ionic doc <- 官方