一、概述
一套完整的Ionic生态系统分为5个部分
1、html5,静态页面,这个不用多说;
2、scss,样式,这个也不多说
3、结合上面最近的一张图,他有一个app.module.ts文件,用来导入Module的,你可以理解为Java后端代码的导包工作;
4、app.component.ts表示前端的逻辑,可以理解为typeScript或者js逻辑控制层;
5、main.ts,这里一般命名未service.ts,专门用来和后端做交互的,去后端查询数据;app.component.ts如果要去后端查一个用户的记录,先调用main.ts里面的接口,main.ts再和后端交互,查询到数据后返回给app.component.ts
他们的逻辑关系如下:
二、几种常用的module组件
首先我们区分一个module和component概念,看了上面的图,你就知道了,module和component都是元件或者组件的意思,但是module要比component大一级,前者包含后者,为了区分,我们把module翻译为组件,component翻译为元件;;module像一个管理员一样或者接口一样,管理或者插入component;
这里,列举常用的三种module
1、系统组件:设置根页面组件
imports: [ RouterModule.forRoot(routes) ]
2、系统组件:分页组件
imports: [IonicPageModule.forChild(LeaveListComponent)],
记得要导入Ionic的分页包
3、自定义组件
我们最常做的,就是自定义一个module,这个直接定义一个component.ts文件,定义一个module.ts,然后在module.ts里面引用这个component.ts元件即可;定义组件module要按照以下格式:
@NgModule({
declarations: [LeaveListComponent],
imports: [IonicPageModule.forChild(LeaveListComponent)],
providers: [LeaveService]
})
@NgModule表示你接下来要自定义一个组件(module)了;
1、declarations:用来声明管辖的Component;
2、Imports:引用到的其它的组件(Module)
3、providers:调用了哪些service文件去后台查询的service文件
4、bootstrap;表示装饰的是哪个元件(component)了
一般,第一个不可能没有;第二个,一般也不可少;第三个,如果没有要去后台查询,可以没有;第四个,也可以没有;这四个的顺序颠倒没有影响;