MobX Angular 项目教程

MobX Angular 项目教程

mobx-angularThe MobX connector for Angular.项目地址:https://gitcode.com/gh_mirrors/mo/mobx-angular

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

MobX Angular 项目的目录结构如下：

mobx-angular/
├── projects/
│   └── todo/
│       ├── src/
│       │   ├── app/
│       │   │   ├── stores/
│       │   │   │   └── todos.store.ts
│       │   │   └── app.component.ts
│       │   └── ...
│       └── ...
├── .github/
├── .husky/
├── .vscode/
├── .gitattributes
├── .gitignore
├── .npmignore
├── .nvmrc
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── angular.json
├── jest.config.js
├── package-lock.json
├── package.json
├── tsconfig.json
└── tslint.json

目录结构介绍

• projects/: 包含示例项目的目录，例如 todo 示例。
• projects/todo/src/app/stores/: 包含 MobX 存储的目录。
• projects/todo/src/app/app.component.ts: 示例项目的主组件。
• .github/, .husky/, .vscode/: 包含 GitHub 配置、husky 配置和 VSCode 配置。
• .gitattributes, .gitignore, .npmignore: Git 和 npm 的配置文件。
• .nvmrc, .travis.yml: Node 版本管理配置和 Travis CI 配置。
• CHANGELOG.md, LICENSE, README.md: 项目文档，包括变更日志、许可证和自述文件。
• angular.json, jest.config.js, tsconfig.json, tslint.json: Angular 项目配置文件，包括 Jest 测试配置、TypeScript 编译配置和 TSLint 配置。

2、项目的启动文件介绍

MobX Angular 项目的启动文件是 projects/todo/src/app/app.component.ts。这个文件是示例项目的主组件，负责初始化和配置 MobX 存储。

import { Component } from '@angular/core';
import { Todos } from './stores/todos.store';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public todos: Todos) {}
}

启动文件介绍

• import { Component } from '@angular/core';: 导入 Angular 核心模块。
• import { Todos } from './stores/todos.store';: 导入 MobX 存储。
• @Component({...}): Angular 组件装饰器，定义组件的元数据。
• export class AppComponent { constructor(public todos: Todos) {} }: 主组件类，注入 MobX 存储。

3、项目的配置文件介绍

MobX Angular 项目的主要配置文件包括：

• angular.json: Angular 项目的配置文件，包含项目结构、构建选项等。
• package.json: npm 包配置文件，包含项目依赖、脚本命令等。
• tsconfig.json: TypeScript 编译配置文件，包含编译选项、模块解析等。
• tslint.json: TSLint 配置文件，包含代码风格和质量检查规则。

angular.json 配置文件介绍

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "todo": {
      ...
    }
  },
  ...
}

package.json 配置文件介绍

{
  "name": "mobx-angular",
  "version": "3.4.7",
  "description": "The MobX connector for Angular",
  "scripts": {
    "build": "ng build",
    "start": "ng serve",
    ...
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

tsconfig.json

mobx-angularThe MobX connector for Angular.项目地址:https://gitcode.com/gh_mirrors/mo/mobx-angular