1. 程式人生 > >Ionic從零單排(二)——HelloWorld

Ionic從零單排(二)——HelloWorld

        上一篇文章中,我們建立了第一個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指令