Ionic 目录:https://blog.csdn.net/dkbnull/article/details/87937179
上一篇文章中,我们创建了第一个ionic应用。本篇文章主要介绍下ionic应用的目录结构和ide。
上篇文章中创建的HelloWorld应用目录结构如图。
├── hooks //Cordova安装自动生成的文件夹,该文件夹有脚本可以定制Cordova命令
├── plugins //放置Ionic扩展文件的文件夹
├── scss //scss文件,发布时编译这个目录下的文件输出到www的css目录中
├── www //主要目录,这个目录下是使用html、js、css等技术实现的要在app中展现的页面
├── css //css样式文件
├── img //图片资源
├── js //js文件
├── app.js //主要应用程序文件
├── controllers.js //可用于任何类型的js文件,可被添加到应用程序的不同部分
├── services.js //设计应用程序所需的相关数据
├── lib //用于存放项目需要用到的库文件和资源文件
├── templates //放置angularjs模板文件,设计的应用程序会使用里面的模板
├── index.html //核心文件,该文件被ionic载入浏览器
├── manifest.json
├── service-worker.js
├──bower.json //bower配置文件
├── config.xml //ionic配置文件,可以配置app的名称、起始页等
├── gulpfile.js //控制ionic自动重载浏览器,实现编译scss、css、js优化,处理文件等
├── package.json //定义了项目所需的模块,以及项目的配置信息。
上篇文章中,我们在模拟器或真机进行测试。
在开发初期,我们一般使用浏览器进行调试程序。
ionic提供了 ionic serve 指令为我们创建一个web站点来调试程序,使用该指令调试程序时,修改程序文件后,无需重新编译,浏览器页面即可实现同步刷新。
<span style="color:#000000"> ionic serve</span>
通过访问http://192.168.1.106:8100/#/tab/chats即可打开应用程序。
我们使用谷歌浏览器来调试程序,F12打开开发者工具,可以选择模拟相关设备,如图为galaxy s5,这样就和真机调试无二。
上一篇我们说过,ionic基于AngularJS语法,而eclipse对于HTML5、JS的支持并不是很好,所以这里我们最好选择一款HTML5编辑器,这里要注意,选择的编辑器不能占用adb端口。这里,博主选择了WebStorm,因为WebStorm集成了AngularJS的代码提示功能。
打开WebStorm,依次选择 File--Open... 将我们的应用程序导入ide
使用WebStorm还有一个好处,可以直接在WebStorm控制台中执行相关ionic指令。