(3)ionic2-項目結構

進入咱們剛創建的項目文件夾中,咱們會發現這是一個典型的Cordova項目結構.在這裏咱們能夠安裝一些native插件,針對特殊平臺建立不一樣的文件.

幾乎全部跟咱們的項目有關的文件都是在app文件夾下,咱們先看看其餘文件

./www/index.html

index.html是app的主要入口,它主要是來引入script和CSS文件,還有bootstrap/啓動咱們的app.可是咱們看看就好了,不用放太大精力在這個文件上

引入文件

<script src="cordova.js"></script>
<script src="build/js/app.bundle.js"></script>

app.bundle.js文件把ionic,Angular和你本身寫的js文件聯繫起來

cordova.js不會在本地起做用,它會在你build跨平臺app的時候注入你的項目當中

在這個例子中,ionic會從index.html文件中尋找ion-app標籤,來啓動你的app

<ion-app></ion-app>

./app/app.js

    app文件夾中存放的是未編譯的JS代碼.一個ionic2應用的全部功能都將在此實現.當咱們運行 ionic serve 的時候,app下的代碼將會被編譯成符合ES5標準的JS代碼.這意味着咱們能夠用高性能的TypeScript和ES6編寫app,而後按照瀏覽器的須要把他們編譯成符合舊標準(es5)的文件.

app/app.js 是app的入口

app.js的前幾行是這樣的

@App({
  templateUrl: 'build/app.html'
})
class MyApp {  
 constructor() {
  }
}

每個app都會有一個根組件,它控制着整個app全部文件,這就像是Angular1種的ng-app.在這兒咱們用@App聲明一個ionic2項目的根組件

在這個組件裏,咱們設置build/app.html爲模板文件,它是app/app.html的編譯以後得來的,咱們先看一下

./app/app.html

這是app的主要模板

<ion-menu id="leftMenu" [content]="content">
<!--這裏的[content]是angular2的語法,實現'屬性綁定'-->
  <ion-toolbar>
    <ion-title>Pages</ion-title>
  </ion-toolbar>

  <ion-content>
    <ion-list>
      <button ion-item *ng-for="#p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content></ion-menu>
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

在這裏,咱們用<ion-menu>來實現一個側邊欄(side menu),而後用一個導航控制器來做爲主要的內容區域.ion-menu元素有一個content屬性,咱們能夠從ion-nav中傳遞這個變量#content

這樣,咱們就能夠經過在菜單中選擇不一樣的菜單項來決定顯示不一樣的頁面(這些頁面一般是寫在同一個文件裏的不一樣元素中),