专栏首页编程直播室Ionic 2 项目结构./src/index.html./src/./src/app/app.html

Ionic 2 项目结构./src/index.html./src/./src/app/app.html

解剖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,所以它知道它的动作。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

    孙亖
  • Ionic2 Rest 认证1、创建Ionic 2 APP2、创建服务3、创建登陆和注册页面4、登出和token检查

    孙亖
  • Ionic 2 应用剖析0 开始之前1 创建一个新的Ionic 2 应用2 目录结构3. Class 定义Root Components 模版App Module总结

    孙亖
  • Flask框架(二)

    1.app.befor_request装饰过得函数在真正的响应函数之前执行,可以有多个,当有多个的时候,执行顺序是谁在前面谁先执行。

    GH
  • Kubernetes部署策略详解

    在Kubernetes中有几种不同的方式发布应用,所以为了让应用在升级期间依然平稳提供服务,选择一个正确的发布策略就非常重要了。

    胡齐
  • DDR3篇第一讲、MIG用户接口介绍

    核心板搭载了4块镁光DDR3内存,2片与PS相连,另外2片与PL相连,单片DDR3内存大小为512MB,其型号为:MT41K256M16XX-125。

    根究FPGA
  • 一个 2 年 Android 开发者的 18 条忠告

    我仍记得2014年我决定做安卓开发的那天,这是我一生中做出的最好决定之一。到现在已经有2年半了。

    哲洛不闹
  • 一个 2 年 Android 开发者的 18 条忠告

    我仍记得2014年我决定做安卓开发的那天,这是我一生中做出的最好决定之一。到现在已经有2年半了, 最初的时候,并没有人告诉我如何做才是正确的。我犯了很多错误,浪...

    我就是马云飞
  • Python Paste 学习笔记

    这篇文章主要介绍了Python的Paste库的使用,学习过程中主要参考官网文档以及自己的理解,整理成笔记以便后续自己查阅。 如果转载,请保留作者信息。 ...

    py3study
  • Ionic:高级的 HTML5 移动APP(Web App)开发框架

    Ionic 是一个用HTML, CSS 跟JS 开发的一个用于移动设备的混合APP 开发框架,采用 Sass与AngularJS 开发。目前,Ionic 仍然处...

    Jeff

扫码关注云+社区

领取腾讯云代金券