angular初体验

项目初始化：

• 1 安装脚手架：npm i -g @angular/cli

• 2 初始化项目：ng new my-app

  • my-app 是项目名称，可以修改为自己喜欢的名称

• 3 进入目录：cd my-app

• 4 启动项目：ng serve --open

目录结构：

.
├── e2e                 端到端测试目录
├── src                 源文件（开发目录）
├── .editorconfig       编辑器统一风格工具配置文件
├── .gitignore          git忽略文件
├── angular.json        Angular CLI 脚手架配置
├── README.md           说明文件
├── package.json        npm配置文件
├── tsconfig.json       TypeScript编译器配置
└── tslint.json         TypeScript语法检查器配置

.
├── src
│   ├── app                 项目源文件( 重点 )
│   ├── assets              存放图片等资源文件
│   ├── browserslist        浏览器支持列表
│   ├── environments        运行环境配置：开发 or 生产
│   ├── favicon.ico         出现在浏览器标签上的应用图标。
│   ├── index.html          项目首页
│   ├── karma.conf.js       karma 测试运行器的配置
│   ├── main.ts             项目入口
│   ├── polyfills.ts        导入JS，兼容老版本浏览器
│   ├── styles.css          全局样式
│   ├── test.ts             测试入口
│   ├── tsconfig.app.json   TypeScript编译器配置
│   ├── tsconfig.spec.json  单元测试文件
│   └── tslint.json         额外的 TypeScript 语法检查器配置

.
├── app
│   ├── app.component.css       app组件样式
│   ├── app.component.html      app组件模板
│   ├── app.component.spec.css  app组件单元测试
│   ├── app.component.ts        app组件JS（TS）代码
│   ├── app.module.ts           根模块

tslint 的配置

• 目的：修改为自己的代码风格

• 1 在 /tslint.json 中找到要修改的配置文件

• 2 将其添加到 src/tslint.json 文件中（或者直接在 /tslint.json 中修改）

组件的使用

组件的组成部分

• 1 [组件内容].component.html

• 2 [组件样式].component.css

• 3 [组件业务].component.ts

• 单元测试文件（可选）[组件名称].component.spec.ts

使用 json-server 提供接口

Get a full fake REST API with zero coding in less than 30 seconds (seriously)

• json-server

• 1 安装：npm i -g json-server

• 2 新建一个 json 文件：db.json

• 3 运行 json-server：json-server db.json

请求接口如下：

GET    /posts
POST   /posts
PATCH  /posts/1
DELETE /posts/1

Ant Design of Angular（NG-ZORRO）

• 安装：ng add ng-zorro-antd

HMR 接口文档说明

使用说明

• 1 npm i

• 2 npm run dev

• 接口地址

JWT Authorization

with jsonwebtoken

 

# LOGIN：create token
POST /tokens
{ username: 'zqran', password: '123456' }

# check token
GET /tokens
{
  header: { Authorization: 'Bearer <jsonwebtoken>' }
}

# LOGOUT：revoke token
DELETE /tokens
{
  header: { Authorization: 'Bearer <jsonwebtoken>' }
}

员工管理

• 注意：所有接口都需要添加 Authorization 请求头

# 查询
GET /employees

# 添加
POST /employees

# 删除
DELETE /employees/1

# 修改
PATCH /employees/2

模块：

每个应用至少有一个 Angular 模块，称为根模块

它通常命名为 AppModule

根模块的作用：启动应用 模块是独立、封闭的

模块之间的引用通过 导入 和 导出 来完成

模块中包含的内容：

组件

服务

指令

注意：这些内容必须在模块中配置后才有效

根模块：

@NgModule 装饰器

装饰器是一个函数

作用：修饰紧随其后的类或属性

装饰器是 JavaScript 的一种语言特性，处于语法提案的stage 2阶段，是一个试验特性

装饰器又叫做注解

@NgModule是Angular提供的装饰器 用来告诉Angular将这个类当作 模块 来处理

语法：@NgModule({ 元数据对象 })

app.moudle.ts中的@NgModule 装饰器的元数据对象：

declarations    该模块所拥有的组件

imports        该模块依赖的模块，比如：BrowserModule （引入外部模块）

providers     该模块所拥有的服务提供商 创建的服务需要在此中进行声明

bootstrap    指定根组件，只有根模块需要该配置项Angular 创建它并插入 index.html 宿主页面。

exports        公开该模块其中的一部分，以便外部模块使用它们（导出模块内容）

app.component.ts中的@Component装饰器

selector        选择器（组件名称），对应HTML中的组件名称

template        组件的内联模板

templateUrl    组件模板文件的 URL

styleUrls        组件样式文件数组

数据绑定

1 插值表达式     {{}}

2 属性绑定    [href]=””

3 事件绑定    (click)=””

4 双向数据绑定    [(ngModel)]=””  需要导入表单模块 在根模块中导入

import { FromsModule } from '@angular/forms'

// 导入之后需要在improts中声明指定 

Angular 语言服务 （编辑器插件 --Angular Language Service ）

让你能在模板内获得以下功能：

1 自动完成

2 错误检查

3 给出提示

4 内部导航

等功能

指令

[(ngModel)]    在表单元素中实现双向数据绑定的指令

(click)        事件绑定指令

[href]        属性绑定指令

指令分类

组件        拥有模板的指令

属性型指令    改变元素外观和行为的指令

结构型指令    添加和移除 DOM 元素改变 DOM 布局的指令

属性型指令

[ngClass]        动态添加或移除CSS类

[ngStyle]        动态设置内联样式

结构型指令

*ngIf        控制元素的展示和隐藏

*ngFor        重复器，遍历数据，批量生成元素

let team of teams;trackBy:trackBy()
// teams 是需要遍历的数组   team 是遍历数组的每一项
trackBy() {
    return team.id
}

*ngFor添加trackBy

目的：提升渲染对象数组的性能

语法：trachBy: trackBy方法名称

组件交互

父组件 传递数据给 子组件

子组件 传递数据给 父组件

父组件 -> 子组件

首先创建子组件个父组件，在angular中创建组件直接使用脚手架提过的命令 

ng g c 组件名称

如果子组件要展示在父组件中，需要在父组件的app.component.html 中引入子组件的@Component修饰器中的selector的名字

传值：在子组件中首先要导入Input组件  公开@Input()数据  @Input()后的名字自定义

import { Component, OnInit, Input } from '@angular/core'

传递的数据在父组件中进行设置，参考如下：

 <app-child [skill]="parentData"></app-child>

子组件 -> 父组件

传值：在父组件中首先要导入Output, EventEmitter组件  公开@Output()数据  @Input()后的名字自定义

import { Component, OnInit, Output, EventEmitter } from '@angular/core'

 // 1 创建事件  getMoney名字自定义
  @Output()
  getMoney = new EventEmitter()

 在父组件中绑定getMoney的方法使用$event进行数据的接收，然后在父组件中提供绑定的方法的函数

最后在子组件中触发事件this.getMoney.emit("需要传递的值")，实现子组件传值给父组件

模块创建：命令格式：ng g m 模块名称

组件创建：命令格式：ng g c 组件名称（创建组件在某个文件夹下方使用命令：ng g c 文件夹名称/组件名称）

在一个组件中使用另外一个组件，需要把使用的组件的模块中进行暴露

模块和模块之间互相使用需要 进行导入和导出

FormsModule模块每个模块的导入都是独立的，不同的模块使用都需要重新导入

使用TypeScript的好处

Angular的最佳实践

增强了项目的可维护性

有利于多人协作开发

降低了开发人员的沟通成本

TypeScript语法

1 类型注解    为函数或变量添加约束

2 接口        对值所具有的结构进行类型检查

3 泛型        <> 泛型类EventEmitter约定参数类型

4 类成员修饰符    public 公共（默认） 、 private 私有