ionic項目結(jié)構(gòu)
接下來我們就要通過分析ionic項目結(jié)構(gòu)箱叁，從而正式進入ionic項目中了驼卖，在此之前筏餐，大家得先掌握基礎(chǔ)的web前端開發(fā)知識：html+css+js，如果沒有基礎(chǔ)或者基礎(chǔ)不牢捂寿，建議大家去菜鳥教程或者w3school學(xué)習(xí)一下口四，學(xué)完html+css+js之后，還可以學(xué)習(xí)一下angular js秦陋，掌握了angular js的語法后使用ionic將事半功倍蔓彩。
注：angular js已經(jīng)發(fā)布了4.0版本，菜鳥教程還停留在1和2驳概，所以上面給的鏈接是官網(wǎng)的赤嚼，大家也可以去angular的中文社區(qū)，http://www.angularjs.cn/及中文文檔https://angular.cn/
注：本人走過的一點彎路的總結(jié)：在進行學(xué)習(xí)的時候顺又，大家沒有必要一開始強迫自己把所有知識點都記住更卒，然后再去開發(fā)，這是極其不高效的稚照！
舉個例子蹂空，學(xué)html5的時候，想一次性就把所有標簽都給記住是不現(xiàn)實的果录，就算真的花費時間去做到了上枕，可能在實際開發(fā)時仍然無法具體而靈活地使用它，這就很虧了弱恒。
而對于開發(fā)者來說辨萍，最快的成長路徑就是實際開發(fā)一個項目，看再多遍背再多遍返弹，都不如實際開發(fā)中使用一次锈玉。
所以我們要做的，就是快速地瀏覽琉苇、學(xué)習(xí)一遍嘲玫，知道html5能做什么，之后就可以直接進行實際開發(fā)并扇。
當(dāng)開發(fā)遇到實際需求的時候，比如抡诞，在頁面的某個地方需要插入一張圖片穷蛹，因為我們看過一遍土陪，所以我們知道html本身就有插入圖片的標簽。去菜鳥教程一搜肴熏，一看鬼雀，一用，立馬就連用法都記住了蛙吏，甚至還會連帶著掌握路徑的概念源哩。
接下來正式講一下ionic項目結(jié)構(gòu)：
注：在剖析項目結(jié)構(gòu)的時候，希望大家能打開自己之前start出來的firstApp項目鸦做，并跟著本文檔不斷地打開目錄與文件励烦。
不然只看本文檔的話，可能會非常非常的暈泼诱。
./根目錄
注：這里我使用的編輯器是Visual Studio Code坛掠，對于編輯器的選擇，大家用自己習(xí)慣的就好治筒。如果還沒有找到習(xí)慣的屉栓，我推薦這款編輯器。Linux和Windows都可以去VS Code官網(wǎng)直接下載安裝）
上圖便是我們之前建立出來的firstApp項目的根目錄（可能有微微的不同耸袜，不用太在意）
根目錄中除了各個文件夾友多，主要是一些配置文件，這里提一下這個package.json
隨著項目的進行堤框，我們可能還會通過npm再給項目安裝一些別的軟件包夷陋，那如果有別的小伙伴在之后加進來，難道我們還要讓他們一個個地安裝嗎胰锌？
當(dāng)然不是骗绕，那樣不僅麻煩，而且太容易出錯了资昧。
這便是package.json的作用了酬土。
package.json是描述依賴包的json文件
當(dāng)我們在開發(fā)時，想給項目添加一些必要的包格带，只需要執(zhí)行 npm install <name> --save 撤缴，就能將這個包名及對應(yīng)的版本添加到 package.json中。
注：這里ionic在start一個項目的時候自動幫我們創(chuàng)建并更新了package.json
而之后的小伙伴叽唱，只需要在package.json所在的目錄中屈呕，打開命令行執(zhí)行 npm install 或者 cnpm install，就會自動解析package.json 棺亭，并將其中提到的依賴包都安裝下來虎眨，項目就能正常跑起來了。
注：還是那個觀點，大家沒必要第一次看文檔就試圖把它記住嗽桩，在之后的項目開發(fā)中岳守，大家結(jié)合文檔使用一次，立刻就能掌握了碌冶。
而且這里關(guān)于添加依賴時還有一個npm install <name> --save -dev湿痢，具體用法與不同大家可以在之后用到的時候再百度一下。
./src/
在src目錄的內(nèi)部扑庞，便是原始的譬重，未編譯的代碼，也是我們重點剖析的對象罐氨。
這就是Ionic應(yīng)用程序的大部分工作臀规。
當(dāng)我們運行ionic serve，我們的代碼里的src/會轉(zhuǎn)換成瀏覽器能正確理解的JavaScript版本岂昭。
src目錄中app目錄一般存放的是項目的入口與切入點
assets目錄存放的是項目所需的各類資源
pages目錄存放的是各個頁面
theme目錄則是樣式調(diào)整
./src/index.html
src/index.html是應(yīng)用程序的主要入口點以现，其目的是設(shè)置腳本，CSS和引導(dǎo)约啊，或開始運行我們的應(yīng)用程序邑遏。
我們不會花太多時間在這個文件中。
不過也有值得注意的地方：
<ion-app></ion-app>附近（上下）有兩個較為重要的腳本：
<script src="cordova.js"></script>
<script src="build/main.js"></script>
cordova.js 將在本地開發(fā)期間404恰矩，因為它在Cordova的構(gòu)建過程中被注入到您的項目中记盒。
build/main.js 是一個包含Ionic，Angular和您的應(yīng)用程序JavaScript的連接文件外傅。
src/app/app.module.ts 是我們的應(yīng)用程序的切入點纪吮。
在文件中，我們應(yīng)該看到：
每個應(yīng)用程序都有一個根本的模塊萎胰，它可以控制其余的應(yīng)用程序碾盟。這也是我們引導(dǎo)我們的應(yīng)用程序的地方。
在本模塊中技竟，我們將根組件設(shè)置為MyApp src/app/app.component.ts冰肴。這是在我們的應(yīng)用程序中加載的第一個組件，通常它是一個空的shell榔组，可以加載其他組件熙尉。在app.component.ts，我們正在設(shè)置我們的模板src/app/app.html搓扯，所以讓我們來看看检痰。
注：這里調(diào)用的其他四個組件AboutPage，ContactPage锨推，HomePage铅歼，Tabspage其實是與上圖中pages目錄中的about公壤，contact，home谭贪，tabs一一對應(yīng)的境钟。
至于具體的對應(yīng)方式（或者說控制方式）锦担，請不要著急俭识，我們會在之后的學(xué)習(xí)中詳細講解。
./src/app/app.html
在這個模板中洞渔，我們設(shè)置一個ion-nav組件作為主要內(nèi)容區(qū)域套媚。看起來只有短短的一行代碼磁椒，但卻是必不可少的堤瘤。
接下來，我們來看看如何創(chuàng)建更多的頁面并執(zhí)行基本的導(dǎo)航浆熔。
添加頁面
我們對一個Ionic應(yīng)用程序的布局有一個基本的了解本辐，現(xiàn)在我們來看看如何在項目中創(chuàng)建和導(dǎo)航到頁面的過程。
首先還是./src/app/app.html
注意[root]屬性綁定医增。這將為ion-nav組件基本上設(shè)置第一個或“根”頁面慎皱。當(dāng)ion-nav加載時，由變量引用的部分rootPage將是根頁面叶骨。
在其中src/app/app.component.ts茫多，MyApp組件在其構(gòu)造函數(shù)中指定了這一點
第12行，rootPage:any = TabsPage;這就指定了rootPage是TabsPage忽刽。
那TabsPage是怎么來的呢天揖？
將目光上移，我們注意到：
第6行跪帝，import { TabsPage } from '../pages/tabs/tabs';
原來Tabs是從./src/pages/tabs目錄中的tabs.ts導(dǎo)入進來的
那我們先將目光轉(zhuǎn)到與tabs.ts綁定的tabs.html
與app.html今膊，也是[root]屬性綁定，且因為它有切換作用伞剑，所以定義了三個[root]屬性綁定斑唬。
那我們再看看tabs.ts是怎么樣的。
怎么樣纸泄？是不是似曾相識赖钞？這寫法和之前的app.component.ts非常相近
12,13,14行定義了三個頁面，HomePage聘裁，AboutPage雪营，ContactPage
而這三個頁面正是在第3,4,5行引入的./src/pages目錄下其他幾個文件夾下的ts文件。
現(xiàn)在來簡單梳理一下衡便，當(dāng)我們ionic serve出一個項目后献起，我們先進入的是app.html洋访，然后因為[root]屬性綁定，加載了tabs.html頁面谴餐，而在tabs.html頁面中的[root]屬性綁定姻政，導(dǎo)致我們點擊Home，About岂嗓，Contact就會加載相應(yīng)的HomePage汁展，AboutPage，ContactPage頁面厌殉。
注1：細心的同學(xué)可能已經(jīng)發(fā)現(xiàn)app.html和tabs.html寫法很像食绿，app.component.ts和tabs.ts的寫法很像，實際上不止如此
pages_detail.png
拉開pages里的各個目錄公罕，你會發(fā)現(xiàn)他們的結(jié)構(gòu)都是一樣的器紧，點進去會發(fā)現(xiàn)代碼也是驚人的相似
這就是我們之后要學(xué)的組件的概念，學(xué)會組件之后楼眷，再回顧今天的內(nèi)容铲汪，基本就很清楚明了了。
而ionic之所以簡單易上手罐柳，也是因為它這一特性掌腰。
等理解了組件的概念和用法，基本就可以開始上手開發(fā)了硝清。
注2：這一部分大家看到一連串的代碼可能會有點暈辅斟，不過不要急。
暈除了你還沒理解組件的概念之外芦拿，也因為你還不懂它的語法士飒。
上圖中帶.ts后綴的文件，其實是typescript文件蔗崎。TypeScript是JavaScript的一個超集酵幕，只是擴展了JavaScript的語法，最終會被自動編譯成為JavaScript缓苛。
這里給兩個鏈接芳撒，大家在學(xué)完js后可以去快速瀏覽一遍，之后結(jié)合項目未桥，很快就能讀懂了
帶.scss后綴的是SCSS笔刹，是Sass的一種語法，同樣冬耿，最終也是自動編譯成正常的CSS文件舌菜。為CSS增加一些編程的特性，無需考慮瀏覽器的兼容問題亦镶，讓CSS更加簡潔日月，適應(yīng)性更強袱瓮，可讀性更佳，更易于代碼的維護等諸多好處爱咬。
這里給個鏈接尺借，大家在學(xué)完css后可以去快速瀏覽一遍，之后結(jié)合項目精拟，很快就能讀懂了
