上一篇文章中，我們建立了第一個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開啟開發者工具

        上一篇我們說過，ionic基於AngularJS語法，而eclipse對於HTML5、JS的支援並不是很好，所以這裡我們最好選擇一款HTML5編輯器，這裡要注意，選擇的編輯器不能佔用adb埠。這裡，博主選擇了WebStorm，因為WebStorm集成了AngularJS的程式碼提示功能。

        開啟WebStorm，依次選擇 File--Open... 將我們的應用程式匯入ide

        使用WebStorm還有一個好處，可以直接在WebStorm控制檯中執行相關ionic指令