(3)ionic2-项目结构-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

进入我们刚建立的项目文件夹中,我们会发现这是一个典型的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

这样,我们就可以通过在菜单中选择不同的菜单项来决定显示不同的页面(这些页面通常是写在同一个文件里的不同元素中),

转载于:https://my.oschina.net/boogoogle/blog/538022