(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

这样,咱们就能够经过在菜单中选择不一样的菜单项来决定显示不一样的页面(这些页面一般是写在同一个文件里的不一样元素中),