ionic2入門教程（四）解讀目錄結構

ionic2入門教程（四）解讀目錄結構

系列教程看這裏
Ionic2入門教程（一）安裝和環境配置
Ionic2入門教程（二）進階配置：Android打包
ionic2入門教程（三）高仿網易公開課（1）

0、新建一個ionic項目

這一步建立了一個名爲startProoject的blank項目，運行起來的話只有一個home頁面，是官方提供的最簡潔的ionic項目。

ionic start startProject blank

大家也能夠試着將blank換成tabs和sidemenu，以下圖所示

一、VSCode編輯器打開

目錄結構以下，（第一眼看到這樣的目錄結構，我是驚呆了的，滿腦子問號，帶個人導師和我說，這些目錄結構一開始不理解其實也不要緊，多用用慢慢就知道到了。可是大概有個印象仍是會好不少，因此這裏給你們分析一下每一個文件夾的內容和做用吧。）

按順序來吧

1.hooks

hooks文件夾包含了在應用程序的生命週期事件中自動執行的操做，大多數時候你不須要修改其中的任何文件。

2.node_modules & package.json

node_modules文件夾是當你執行 npm install 命令後自動生成的，裏面安裝了所須要的npm依賴項，這一步在你start一個Ionic項目時已經自動執行了。這個命令會讀取package.json中因此須要被安裝的包，是一個典型的Node.js文件

3.resources

是一個Ionic文件夾，能夠包含你的app圖標和啓動畫面。

4.src

這是最重要的一個文件夾，你幾乎全部的工做都是在這個文件夾中完成的，它實際上就是包含了Angular代碼的文件夾。

5.www

www文件夾是自動生成的，當你在你的瀏覽器中運行ionic預覽時，它包含你當前的構建。記住必定不要在這裏修改代碼。

6.config.xml

config.xml用於使用Ionic項目建立原生項目時。
若是您須要本機應用程序的特殊權限或更改其餘內容，它將在這個文件中設置。

7.ionic.config.json

包含了一些關於你的項目的基本信息，若是你將你的應用上傳至Ionic.io platform，它就會被使用。

8.tsconfig.json, tslint.json

與TypeScript以及它如何編譯有關。基本上不用去管。

二、重要的src

1.src/index.html

index.html 是 Ionic應用的主入口文件，其目的是設置腳本和CSS引導，而後開始運行咱們的應用程序。這是咱們項目的加載入口：

根組件，應用加載入口

<ion-app></ion-app>

主要的腳本引用，自動生成

<script src="cordova.js"></script>
  <script src="build/polyfills.js"></script>
  <script src="build/vendor.js"></script>
  <script src="build/main.js"></script>

2.src/app

入口文件夾
/app.component.ts
應用入口文件，每一個應用程序都有一個根組件，用於控制應用程序的其他部分。將HomePage頁面賦值給rootpage變量，在ap.html中使用這個變量。

/app/app.html
設置根頁面：

<ion-nav [root]="rootPage"></ion-nav>

3.src/pages

放置咱們生成的頁面

4.src/assets

存放icon、img等資源

5.src/resources

包含你的app圖標和啓動畫面，分安卓和ios

6.src/theme/variables.scss

覆蓋默認樣式的位置，記住哦~