(3)ionic2-项目结构
在我们刚建立的ionic2的项目下面,可以看到一个Cordova文件夹--这个文件夹存放的是一些原生的插件,和不同平台(ios,android)的特殊文件.但是几乎所有跟我们的项目有关的文件都是在www文件夹下.所以我们这里主要介绍一下www文件夹
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的时候注入你的项目当中
app的具体功能需要靠一些组件来实现,他们在index.html文件中就像这样
<ion-app></ion-app>
www/app/app.js
app文件夹中存放的是未变异的JS代码.一个ionic2应用的所有功能都将在此实现.当我们运行 ionic serve 的时候,app下的代码将会被编译成符合ES5标准的JS代码.这意味着我们可以用高性能的TypeScript和ES6编写app,然后按照浏览器的需要把他们编译成符合旧标准(es5)的文件.
app.js的前几行是这样的
@App({
templateUrl: 'app/app.html'
})
class MyApp {
constructor() {
}
}
每一个app都会有一个根组件,它控制着整个app所有文件,这就像是Angular1种的ng-app.在这儿我们用@App声明一个ionic2项目的根组件
app/app.html是模板文件,这是Angular2的书写形式,如果你没有学过Angular2的话(其实我也没学过).那就先记住吧
www/app/app.html
这是app的主要模板
<ion-menu [content]="content"> <ion-toolbar> <ion-title>Pages</ion-title> </ion-toolbar> <ion-content> <ion-list> <button ion-item *ng-for="#p of pages" (click)="openPage(p)"> </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
这样,我们就可以通过在菜单中选择不同的菜单项来决定显示不同的页面(这些页面通常是写在同一个文件里的不同元素中),