# fed-e-task-04-06

**Repository Path**: frontend_site/fed-e-task-04-06

## Basic Information

- **Project Name**: fed-e-task-04-06
- **Description**:         通过企业实战带你领略最具规模的前端框架 Angular，包括：NG 数据绑定及实现原理、组件封装及父子组件通信、服务模块及服务注入，以此应对不同团队或者不同项目的技术选型；除此之外，我们还会学习 RxJS 响应式编程的库;
        
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-03
- **Last Updated**: 2021-03-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AngularGuide

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.4.

https://angular.cn/guide/component-overview

```sh
npm install -g @angular/cli

ng new angular-guide
```



## 1.Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. 

```sh
ng serve --open
```



## 2.Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

```sh
ng g c components/itemSelector
ng g c components/itemSelector --skipTests # Use '--skip-tests' instead of '--skipTests'
```



## 3.Coding note

```typescript
// 在使用ngrx时，对Observable对象进行数组长度判断时必须添加上 || []，否则校验不通过
*ngIf="((schedule | async) || []).length; else empty"
```



## 4.Style import

**全局引用样式的3种方式：**

1. 在 `angular.json` 中引入使用

   ```json
   {
     "styles": [
       "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
     ]
   }
   ```

   

2. 在 `style.css` 中引入预构建样式文件

   ```css
   @import "~ng-zorro-antd/ng-zorro-antd.min.css";
   
   // 即可在样式预处理文件中通过该方式引用
   ```

   

3. 在`index.html`中引入使用（不推荐使用）

   ```html
   <link rel="stylesheet" href=https://xxxx.cn/xx.css""></link>
   ```

   

## 5.Usage notes

https://ng.ant.design/docs/getting-started/zh

```shell
ng add ng-zorro-antd
```

在 `angular.json` 中引入了

```json
{
  "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}
```

### 1.引入组件模块

最后你需要将想要使用的组件模块引入到你的 `app.module.ts` 文件和[特性模块](https://angular.cn/guide/feature-modules)中。

```typescript
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';

@NgModule({
  declarations: [
    AppComponent,
    ItemSelectorComponent,
    InputSelectorComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    NzButtonModule,
    NzInputModule,
    NzCheckboxModule
  ],
  providers: [{ provide: NZ_I18N, useValue: zh_CN }],
  bootstrap: [AppComponent]
})
export class AppModule { }
```



## 6. Modules

```shell
npm install --save @types/uuid uuid
```



## 7.NgRx Usage

### 1.安装NgRx依赖模块

```shell
ng add @ngrx/store
ng add @ngrx/store-devtools
ng add @ngrx/effects
ng add @ngrx/entity # 不必要模块
ng add @ngrx/router-store # 与路由信息相关模块
ng add @ngrx/schematics # ngrx cli 工具模块
```



### 2.配置NgRx cli信息

```shell
ng config cli.defaultCollection @ngrx/schematics #在安装@ngrx/schematics时可以通过选项配置
```



### 3.创建状态管理对象

```shell
ng g store State --root --module app.module.ts --state-interfac store --state-interface AppSate
```



### 4.创建Action模块

```shell
ng g action store/actions/schedule --skip-tests=true
```



### 5.创建Reducer模块

```shell
ng g reducer store/reducers/schedule --skip-tests=true --reducers=../index.ts
```



### 6.创建Selector模块

```shell
ng g selector store/selectors/schedule --skip-tests=true
```



## 8.添加动画效果

```typescript
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
    ItemSelectorComponent,
    InputSelectorComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
  ],
  providers: [{ provide: NZ_I18N, useValue: zh_CN }],
  bootstrap: [AppComponent]
})
export class AppModule { }
```



### 1.添加重用动画

```typescript
// src\app\animations\index.ts

import { animate, trigger, transition, style, keyframes, animation, useAnimation } from '@angular/animations'

export const slideAnimationEnter = animation([
  style({
    opacity: 0,
    transform: 'translateY(40px)'
  }),
  animate(250, style({
    opacity: 1,
    transform: 'translateY(0px)'
  })),
])

export const slideAnimationLeave = animation([
  // animate('500ms 0.1s ease-out', style({
  //   opacity: 0,
  //   transform: 'translateX(100%)'
  // })),
  // 关键帧动画
  animate('{{ duration }} {{ delay }} {{ easing }}', keyframes([
    style({ offset: 0.3, transform: 'translateX(-10px)', opacity: 1 }),
    style({ offset: 0.6, opacity: 0.6 }),
    style({ offset: 1, transform: 'translateX(100%)',opacity: 0 })
  ])),
], {
  params: {
    duration: '500ms',
    delay: '0.1s',
    easing: 'ease-out'
  }
})

export const slideAnimation = trigger('slide', [
  transition(':enter', useAnimation(slideAnimationEnter)),
  transition(':leave', useAnimation(slideAnimationLeave, {
    params: {
      duration: '500ms',
      delay: '80ms',
      easing: 'ease-out'
    }
  })),
])
```