Ionic 2 项目结构

解剖Ionic 2 app。进入项目创建的文件夹,这里有一个典型的Cordova项目结构,我们可以安装原生插件,创建平台定义工程文件。

./src/index.html

src/index.html是app的主入口, 设置脚本和CSS,引导、启动我们的应用。对于app的应用,Ionic在HTML中寻找<ion-app>标签。

<ion-app></ion-app>

下面的代码接近底部:

<script src="cordova.js"></script>
<script src="build/main.js"></script>
  • build/main.js
    包含了Ionic、Angular和App自己的JavaScript的综合文件。

  • cordova.js
    本地开发时404,Cordova构建过程中会注入你的项目。

./src/

在src目录中含有我们原始的未经编译的代码。也是我们编写Ionic 2 APP的主要工作目录。当我们运行 Ionic serve,我们在src目录下的代码编译成浏览器可以理解的(当前是ES5)正确JavaScript版本。这意味者我们可以使用TypeScript的高级特性,但是编译会使用浏览器需要的低级版本。src/app/app.module.ts 是我们app的入口点,接近文件顶部的地方,我们可以看到如下代码:

@NgModule({ 
  declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage],
  imports: [IonicModule.forRoot(MyApp)], 
  bootstrap: [IonicApp],
  entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage], 
  providers: []
})
export class AppModule {}

每个app都有一个根模块控制应用。这很像Ionic和Angular1的ng-app。这同样也是我们使用ionicBootstrap引导我们app的地方。
这个模块中,我们设置跟组件到src/app/app.component.ts里面MyApp。这个我们的app加载的第一个组件,通常这是用于其他组件加载的空壳。在app.component.ts中,我们设置了src/app/app.html的模版,来看一下:

./src/app/app.html

这里是app中src/app/app.html的主要模版:

<ion-menu [content]="content">

  <ion-header>
    <ion-toolbar>
      <ion-title>Pages</ion-title>
    </ion-toolbar>
  </ion-header>
  
  <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,所以它知道它的动作。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ./src/index.html app的主入口,也就是进入app时的主页 ./src/ 存放未被编译的代码,当我...
    歇歇阅读 192评论 0 0
  • ionic项目结构 接下来我们就要通过分析ionic项目结构,从而正式进入ionic项目中了,在此之前,大家得先掌...
    leezerofly阅读 4,165评论 1 7
  • 0 开始之前 通过本教程之前,您应该至少了解一些基本的Ionic 2概念。您还必须已经安装了Ionic 2 在您的...
    孙亖阅读 1,672评论 2 10
  • 基于ionic2的跨平台项目(iOS) 一、技术背景 为了开发html5,除了最新使用React Native等之...
    庆华_8f67阅读 1,435评论 1 3
  • 完成Ionic安装后,你可以创建第一个App了。本章内容将指导你新建一个App,添加一个页面,并且实现页面间的导航...
    全栈弄潮儿阅读 475评论 0 2