# angular-material **Repository Path**: d7c/angular-material ## Basic Information - **Project Name**: angular-material - **Description**: Angular 和 Material 搭建的后台管理平台。 - **Primary Language**: NodeJS - **License**: AGPL-3.0 - **Default Branch**: master - **Homepage**: http://www.d7c.top/ - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-12-12 - **Last Updated**: 2024-09-05 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # angular-material ## 介绍 Angular 和 Material 搭建的后台管理平台。 ## 软件架构 ### Angular Angular 中文官网地址：[https://angular.cn/](https://angular.cn/)，Angular GitHub 地址：[https://github.com/angular/angular](https://github.com/angular/angular)，[开发文档](https://angular.cn/docs)。 ### Material Material 中文官网地址：[https://material.angular.cn/](https://material.angular.cn/)，Material GitHub 地址：[https://github.com/angular/components](https://github.com/angular/components)。 ### RxJS RxJS 官网地址：[https://rxjs.dev/](https://rxjs.dev/)，RxJS 中文官网：[https://cn.rx.js.org/](https://cn.rx.js.org/)，RxJS GitHub 地址：[https://github.com/ReactiveX/rxjs](https://github.com/ReactiveX/rxjs)。 ### NgRx 状态管理 NgRx 官网地址：[https://ngrx.io/](https://ngrx.io/)，NgRx GitHub 地址：[https://github.com/ngrx/platform](https://github.com/ngrx/platform)。 @ngrx/store 是基于 RxJS 的状态管理库，其灵感来源于 Redux。在 NgRx 中，状态是由一个包含 Action 和 Reducer 的函数映射组成的。Reducer 函数经由 Action 的分发以及当前或初始状态而被调用，最后由 Reducer 返回一个不可变的状态。 核心概念： Store：负责保存应用状态、提供访问状态的方法、派发 Action 的方法，以及对状态订阅者的注册和取消等。 Action：所有的会引发状态更新的交互行为都必须通过一个显性定义的 Action 来进行。Store 和 Reducer 之间的通信靠 Action。 Reducer：用来维护状态。 ## 安装教程 ### 1. 安装开发依赖模块 ``` ``` ### 2. 安装项目依赖模块 ``` 1、material ng add @angular/material 2、@ngrx/store 全局状态管理模块 ng add @ngrx/store@14.3.2 3、@ngrx/effects 一个 RxJS 支持的用于 Store 的副作用模型 ng add @ngrx/effects@14.3.2 4、@ngrx/router-store 关联 Angular 路由器和 Store ng add @ngrx/router-store@14.3.2 5、@ngrx/entity 管理记录集合的实体状态适配器，提高开发者在 Reducer 中操作数据的效率 ng add @ngrx/entity@14.3.2 6、@ngrx/component-store 帮助管理本地/组件状态的独立库 ng add @ngrx/component-store@14.3.2 7、@ngrx/data 简化实体数据的管理 ng add @ngrx/data@14.3.2 8、@ngrx/component 用于构建响应式 Angular 模板的库 ng add @ngrx/component@14.3.2 9、@ngrx/store-devtools Store 开发调试工具 ng add @ngrx/store-devtools@14.3.2 10、@ngrx/schematics 在 Angular CLI 之上构建的命令行工具，用于快速生成 NgRx 文件 ng add @ngrx/schematics@14.3.2 ``` ## 使用 NgRx ### 创建根模块 store ``` ng generate store State --root --module app.module.ts --state-path store --state-interface RootState ``` ### 创建 auth 模块 action、reducer、selector、effect ``` ng generate action store/actions/auth ng generate reducer store/reducers/auth --reducers=../index.ts --skip-tests=true ng generate selector store/selectors/auth --skip-tests=true ng generate effect store/effects/auth --root --module app.module.ts --skip-tests=true ``` ## 使用说明 ### 1. 克隆并安装项目，在项目根目录下执行 ``` npm install ``` ### 2、启动数据服务 ``` npm install -g json-server json-server ./docs/data.json --port 3000 --watch ``` ### 3. 运行服务并自动重新加载修改的原文件 ``` ng serve ``` ### 4. 编译项目，编译后工件存储在 /dist 目录 ``` ng build ``` ## 参与贡献 1. Fork 本仓库 2. 新建 Feat_xxx 分支 3. 提交代码 4. 新建 Pull Request ## 特技 1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md 2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) 3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目 5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) 6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)