让我们来解剖一下lonic2的应用程序,在我们创建的文件夹中,有一个典型的cordova项目结构,我们可以安装插件,并创建特定于平台的项目。
一、./www/index.html
这是应用程序的主要入口点,但是他的主要目的是设置脚本和css,或者运行我们的应用程序,所以我们不会花太多时间在这上面。
lonic会在html的<ion-app>标签寻找app的功能。
在靠近底部的脚本附近;
<script src="cordova.js"></script>
<script src="build/js/app.bundle.js"></script>
cordova.js在开发过程中将会找不到,因为在创建过程中被注入你的项目中。
二、./app/app.ts
在我们文件目录中的预编译代码,这是大部分ionic2工作发生的地方,当我们运行ionic serve时,在app目录下的代码将会转变为合适的javascript版本来让浏览器理解。
app/app.ts是我们应用程序的入口点。
在文件中靠近顶部的地方,我们会看到:
@Component({
templateUrl: 'build/app.html'
})
class MyApp {
constructor() {
}
}
ionicBootstrap(MyApp)
每个应用程序都有一个根组件来控制应用程序的其余部分,这也是我们用ionicBootstrap来引导程序的地方。
在这组件中,我们在build/app文件中设置模版文件。
三、./app/app.html
这是应用程序的主要模板文件。
<ion-menu [content]="content">
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
在这里面,我们设置了ion-menu来做为滑动菜单的功能,并且ion-nav部分来做为主要内容区域,ion-menu的[content]属性绑定了ion-nav中的本地变量content,所以