Ionic3-Chat 项目教程

Ionic3-Chat 项目教程

ionic3-chat ionic3 chat example项目地址:https://gitcode.com/gh_mirrors/io/ionic3-chat

1. 项目的目录结构及介绍

Ionic3-Chat 项目的目录结构如下：

ionic config json
├── package json
├── resources
├── src
│ ├── index html
│ ├── app
│ │ ├── app component ts
│ │ ├── app html
│ │ ├── app module ts
│ │ ├── app scss
│ │ └── main ts
│ ├── assets
│ │ └── mock
│ │ └── msg-list json * mock json
│ │ └── icon
│ │ └── favicon ico
│ │ └── to-user jpg
│ │ └── user jpg
│ ├── components/emoji-picker * emoji-picker component
│ │ └── emoji-picker html
│ │ └── emoji-picker module ts
│ │ └── emoji-picker scss
│ │ └── emoji-picker ts
│ ├── providers
│ │ └── chat-service ts * chat-service
│ │ └── emoji ts * emoji-provider
│ ├── pipes
│ │ └── relative-time ts * relative time pipes
│ ├── pages
│ │ ├── home
│ │ │ ├── home html
│ │ │ ├── home scss
│ │ │ └── home ts
│ │ ├── chat * chat page
│ │ │ ├── chat html * chat template
│ │ │ ├── chat scss * chat

目录结构介绍

• ionic config json: Ionic 项目的配置文件。
• package json: 项目的依赖管理文件。
• resources: 项目资源文件，如图片等。
• src: 源代码目录。
  • index html: 项目的入口 HTML 文件。
  • app: 应用的主要代码目录。
    • app component ts: 应用的根组件。
    • app html: 应用的根组件模板。
    • app module ts: 应用的根模块。
    • app scss: 应用的样式文件。
    • main ts: 应用的启动文件。
  • assets: 静态资源目录。
    • mock: 模拟数据目录。
      • msg-list json: 消息列表的模拟数据。
    • icon: 图标目录。
      • favicon ico: 网站图标。
      • to-user jpg: 用户头像。
      • user jpg: 用户头像。
  • components/emoji-picker: 表情选择组件。
    • emoji-picker html: 表情选择组件模板。
    • emoji-picker module ts: 表情选择组件模块。
    • emoji-picker scss: 表情选择组件样式。
    • emoji-picker ts: 表情选择组件逻辑。
  • providers: 服务提供者目录。
    • chat-service ts: 聊天服务。
    • emoji ts: 表情服务。
  • pipes: 管道目录。
    • relative-time ts: 相对时间管道。
  • pages: 页面目录。
    • home: 主页。
      • home html: 主页模板。
      • home scss: 主页样式。
      • home ts: 主页逻辑。
    • chat: 聊天页面。
      • chat html: 聊天页面模板。
      • chat scss: 聊天页面样式。

2. 项目的启动文件介绍

项目的启动文件是 src/app/main.ts，它负责引导 Angular 应用的启动。以下是 main.ts 文件的内容：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

启动文件介绍

• platformBrowserDynamic: 用于在浏览器中动态引导 Angular 应用。
• AppModule: 应用的根模块，包含了应用的所有组件、服务和其他模块。
• bootstrapModule(AppModule): 引导 AppModule 启动应用。

3. 项目的配置文件介绍

项目的配置文件主要包括 ionic config json 和 package json。

ionic config

ionic3-chat ionic3 chat example项目地址:https://gitcode.com/gh_mirrors/io/ionic3-chat