angular 9

angular 9打造用户系统 - 7使用ngrx router store管理路由

本篇要做什么 本系列最后一篇 本文将使用ngrx router store来绑定angular路由到ngrx,同事使用CustomRouteStateSerializer github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 原教程视频连接 https://www.youtube.com/watch?v=XHw4hYkGsHM&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=9 安装文档文档位置 https://github.com/ngrx/platform/tree/master/docs/router-store 安装 npm install @ngrx/router-store --save 新建src\app\shared\utils.ts, customer-route-state-serializer。这段代码是上面文档提供的 import { StoreModule, ActionReducerMap } from "@ngrx/store"; import { Params, RouterStateSnapshot} from '@angular/router'; import { RouterStateSeria...

angular 9打造用户系统 - 6使用ngrx entity完成CRUD操作

本篇要做什么 本文将使用effect entity来实现CRUD操作,需要用到ReactiveForm github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 原教程视频连接 https://www.youtube.com/watch?v=XHw4hYkGsHM&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=8 步骤 src/app/app.module.ts导入ReactiveFormsModule 不在给出全部代码,需要的话,参照前一篇文章。 // 导入ReactiveFormsModule import { ReactiveFormsModule } from '@angular/forms'; imports: [ BrowserModule, StoreModule.forRoot({}), StoreDevtoolsModule.instrument(), EffectsModule.forRoot([]), HttpClientModule, AppRoutingModule, ReactiveFormsModule, // 加入ReactiveFor...

angular 9打造用户系统 - 5使用ngrx entity

本篇要做什么 本文将使用effect entity库来管理数据集,减少CRUD操作代码量,通过id来查找user github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 安装ngrx entity npm install @ngrx/entity 原教程视频连接 https://www.youtube.com/watch?v=igc5rBN50wk&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=7 步骤 修改src\app\users\state\user.reducer.ts import * as userAction from './user.actions'; import {createFeatureSelector, createSelector, Store} from '@ngrx/store'; // 加入 import {EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity'; import * as fromRoot from '../../state/app-state'; import { User } from '...

angular 9打造用户系统 - 4使用ngrx effect从http api加载数据

本篇要做什么 本文将使用effect从http api加载数据来显示,user-list.component改用action对象发布事件 github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 原教程视频连接 https://www.youtube.com/watch?v=1dQVJ1DaFWU&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=6 步骤 新建src\app\app.models.ts 通用的抽象response接口 export interface Response<T> { code: number, msg: string, data: T } 实现UserService, src\app\users\user.service.ts import { Injectable } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { Observable } from "rxjs"; import { Response } from './../app.mode...

angular 9打造用户系统 - 3 使用ngrx action和devtools

本篇要做什么 本文将在上一篇基础上增加ngrx/store-devtools和actions github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 上一篇已经安装依赖 npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools @ngrx/router-store 原教程视频连接 https://www.youtube.com/watch?v=1dQVJ1DaFWU&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=5 步骤 浏览器安装redux devtools插件,我使用chrome浏览器 修改src\app\app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { StoreModule } from '@ngrx/store'; //加入这行,引用StoreDevtoolsModule impor...

angular 9打造用户系统 - 2使用ngrx store和reducer来加载用户列表

angular 9打造用户系统-2 本片使用ngrx store和ngrx reducer加载用户列表 github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 原教程视频连接 https://www.youtube.com/watch?v=ChiAZJiX3v0&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=4 步骤 安装ngrx依赖 npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools @ngrx/router-store 创建第一个action和reducer 创建src\app\users\user.model.ts import { Time } from '@angular/common' export interface User{ id?: number; username: string; cnname: string; enname: string; password?: string; role_id: number; email: string; t...

angular 9打造用户系统 - 1搭建一个用户管理界面

做什么 本文使用angular搭建一个客户管理页面,包含添加客户,修改客户信息,客户列表。本文内容只涵盖展示页面,没有业务逻辑。业务逻辑将在下一篇中实现,最终效果在页面底部 github代码:https://github.com/shyandsy/angular-9-ngrx-user-mamagement 感谢教程原作者 https://www.youtube.com/watch?v=QlzX_gKixa4&list=PLaMbwDs23r4KXoMucJEyUAvamQ-kFNBvC&index=3 https://github.com/angulardeveloper-io/ngrx-store-app 步骤 创建项目,项目名user ng new user 加入bootstrap4的css,文件: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>User</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> ...
执行时间: 1710834240512.9 毫秒