Ionic第一个程序HelloWorld

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指令。