随笔分类 - Angular
摘要:一、Effects概念 有些Action改变的是外部状态,比如发送HTTP请求,DOM更改。 把Action看成流的话,跟UI相关的数据处理是Reducer,和UI相关的状态之外的叫Effects。 一个系统就分为Action和Reducer,一个Action出来后可能会改变数据的状态,也可能带来外
阅读全文
摘要:ng g c shared/identity-input ng g c shared/area-list 1,添加领域对象 export enum IdentityType { IdCard = 0, Insurance, Passport, Militory, Other } export int
阅读全文
摘要:ng g c shared/chips-list 用的chips控件。 1,完成自动建议表单控件模板。 <div [formGroup]="form" class="full-width"> <span>{{label}}</span> <mat-chip-list aria-label="Fish
阅读全文
摘要:ng g s services/auth 1,领域对象中增加Auth对象。 基于token的认证。 import { User } from './user.model'; import { Err } from './error.model'; export interface Auth { us
阅读全文
摘要:1,查询用户 根据用户email的前几个字符查找用户。在添加组员,添加任务执行者的时候都会用到。 根据条件查询出用户数组。 searchUsers(filter: string): Observable<User[]> { const uri = `${this.config.uri}/${this
阅读全文
摘要:1,proejcts初始化赋值不需要了。 projects = [ { id: 1, name: "企业协作平台", desc: "这是一个企业内部项目", coverImg: "assets/images/covers/0.jpg" }, { id: 2, name: "自动化测试项目", des
阅读全文
摘要:增删改查嗯ProjectService差不多 import { Task } from './../domain'; import { HttpClient } from '@angular/common/http'; import { Inject, Injectable } from '@ang
阅读全文
摘要:增删改查跟ProjectService很像 import { TaskList } from './../domain'; import { HttpClient } from '@angular/common/http'; import { Inject, Injectable } from '@
阅读全文
摘要:建立领域对象并在domain中建立一个index.ts用于组织文件。在index.ts中导出所有的领域对象。 1,新建project.service,加add方法。 import { Project } from './../domain'; import { HttpClient } from '
阅读全文
摘要:高阶级操作符,拍扁的作用。 一、FlatMap 在Rxjs中FlatMap等价于mergeMap。 二、SwitchMap mergeMap保证所有的订阅。 switchMap一旦有新的外层元素,抛弃掉 mergeMap: switchMap:
阅读全文
摘要:响应式表单也叫模型驱动型表单。 有三个重要元素FormControl,FormGroup和FormBuilder。还有一个FormArray。 验证器和异步验证器。 动态指定验证器。条件改变验证方式改变。 自定义FormControl。用于表单过于复杂之后,逻辑难以理清楚。把复杂问题拆成若干简单问题
阅读全文
摘要:模板驱动型表单:所有逻辑都在html中,包括数据校验逻辑和变量定义都在html中。 响应式表单:把功能性的内容移到了代码里面。 动态表单:表单几乎全部是用代码创建的。 模板驱动表单: #form="ngForm" #password="ngModel" 响应式表单: formBuilder 动态表单
阅读全文
摘要:Angular CLI借助 Amber CLI创建目录, Webpack 测试打包。 使用 1、安装Node 参考:前端构建工具gulp使用 2、安装cnpm npm install -g cnpm --registry $ npm install -g cnpm --registry=https:
阅读全文
摘要:一,结构型指令 *是一个语法糖,<a *ngIf="user.login">退出</a>相当于 <ng-template [ngIf]="user.login"> <a>退出</a> </ng-template> 避免了写ng-template。 <ng-template [ngIf]="item.
阅读全文
摘要:指令 组件是一种带模版的指令。指令是超级。 结构型指令(改变布局)和属性型指令(改变外观和行为)。 Renderer2和ElementRef Angular不提倡直接操作DOM 对于DOM的操作应该通过Renderer2进行。 ElementRef是指向DOM元素的引用 拖拽指令实例 1、新建dir
阅读全文
摘要:ChangeDection 检测程序内部状态,然后反映到UI上。 引起状态变化,引发检查的驱动源:Events,XHR,Timers ApplicationRef监听NgZone的onTurnDone,然后执行检测。 OnPush状态完全由外部决定,内部不会去更改状态。 例子: 把聪明组件proje
阅读全文
摘要:依赖注入:设计模式 依赖:程序里需要的某种类型的对象。 依赖注入框架:工程化的框架 注入器Injector:用它的API创建依赖的实例 Provider:怎样创建?(构造函数,工程函数) Object:组件,模块需要的依赖 依赖性注入进阶=>Angular中依赖注入框架提供父子层次注入型依赖 一、依
阅读全文
摘要:一、Observable的冷和热 Observable 热:直播。所有的观察者,无论进来的早还是晚,看到的是同样内容的同样进度,订阅的时候得到的都是最新时刻发送的值。 Observable 冷:点播。 新的订阅者每次从头开始。 冷的Observable例子: 一开始有个订阅者, 两秒后又有个订阅者,
阅读全文
摘要:一、路由动画 路由动画需要在host元数据中指定触发器。动画注意不要过多,否则适得其反。 内容优先,引导用户去注意到某个内容。动画只是辅助手段。 在router.animate.ts中定义一个进场动画,一个离场动画。 因为进场动画和离场动画用的特别频繁,有一个别名叫:enter和:leave。 im
阅读全文