Angular基础知识学习记录
红色字体
疑问：后端修改数据库数据时，网络异常，导致修改失败，抛出异常，前端该怎样处理呢？\textcolor{red}{疑问：后端修改数据库数据时，网络异常，导致修改失败，抛出异常，前端该怎样处理呢？}疑问：后端修改数据库数据时，网络异常，导致修改失败，抛出异常，前端该怎样处理呢？
Angular概念简介
基本概念
index.html
新建 angular4 项目之后，默认会有一个Index.html文件。如同前后端不分离项目一样，访问 localhost:4200 首先会跳到初始页 index.html 。该文件中引用了根组件 ，因此可以加载根组件。
<head><meta charset="utf-8"><title>AngularTourOfHeroes</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body><app-root></app-root>
</body>
package.json
管理项目所需的npm包
组件
组件是构成应用的砖块。组件包括三个部分：带有 @Component() 装饰器的 TypeScript 类、HTML 模板和样式文件。@Component() 装饰器会指定如下 Angular 专属信息：
- 一个 CSS 选择器，用于定义如何在模板中使用组件。模板中与此选择器匹配的 HTML 元素将成为该组件的实例。
- 一个 HTML 模板，用于指示 Angular 如何渲染此组件。
- 一组可选的 CSS 样式，用于定义模板中 HTML 元素的外观。
创建组件
Angular CLI 是创建angular 项目的脚手架，可以用其提供的命令创建组件。在webstorm 中打开控制台窗口，在你想建立组件的目录，运行下面的命令可以创建组件
ng generate component component-name
当然也可以手动以创建文件的方式创建组件，不推荐。
父子组件传值
服务
我觉得类似于springboot 的controller， angular 组件中的 ts 文件聚焦于校验数据和展示数据，不应该直接获取和保存数据。可把数据访问的职责委托给某个服务，这和 springboot 中的服务层很像。这种分层方式在业务的实现方式发生变化时很有用，可以更有针对性地修改某些文件。
可用 Angular CLI 创建服务
ng generate service service-name
小给服务类添加 @Injectable() 装饰器，它把这个类标记为依赖注入系统的参与者之一，类似于 springboot的@Service 注解。官方教程中 @Injectable({provided两年：‘root’,}) 的方式好像已不再支持，无需指定providedln，服务就可全局使用。
组件引入服务
ts 文件头引入服务
import {UserInfoService } from '../user-info.service';
注入服务
服务需要注册到组件才能在组件中使用。要将服务依赖项注入到组件中，可在组件类的 constructor() 中，提供具有此依赖项类型的构造函数参数。下面是一个在组件中注入服务的例子
constructor(private userInfoService : UserInfoService){}
模块
由根模块直接管理所有组件，容易混乱。一组相关的组件。比如单单主页用到的组件，可以新建一个主页Module来管理它们。我理解的根组件如同将军，模块如同百夫长，模块如同士兵。一个模块中的组件，需要引入的第三方依赖，可以放在模块中，没必要全都堆积在根组件中了。
新建模块
ng generate module module-name
会新建一个文件夹，里面包含一个 module.ts 文件
模块也负责管理子组件的路由。根据url，根组件把请求路由到模块，模块在把请求路由到对应的子组件，这样就可以请求的组件的页面了。
模块也负责管理组件的国际化，在根模块中配置的国际化，子模块中的组件并无法使用translate管道。子模块中需要单独引入国际化服务。
组件
组件声明周期
组件交互
组件样式
组件样式的用的也是css，有多重配置方式，我们默认选择在创建组件时生成的css文件中写样式即可，这总方式已经够我用了。
模板
文本插值
angular中，模板就是一个html文件。最常用的插值方式就是文本插值——把ts中的值插入到模板页面，他利用了模板表达式 {{ }}
<p>{{title}}</p>
<div><img src="{{itemImageUrl}}"></div>
插值表达式具有上下文，通常是组件实例。这句话的意思是说，模板表达式中的变量值只能来自与该组件的ts文件，不能引用到其它组件中的变量值。
模板语句
模板语句是可在 HTML 中用于响应用户事件的方法或属性。使用模板语句，可以对数据做一些操作。模板语句通常是 js 和 ts 函数，当然也可以在模板语句中直接写代码，不调函数。
模板语句格式 事件=“模板语句”，即(event)="statement"
<button (click)="onSave($event)">Save</button>
<button *ngFor="let hero of heroes" (click)="deleteHero(hero)">{{hero.name}}</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
语句上下文
语句只能引用语句上下文中的内容，通常是组件实例。例如，(click)=onSave($event) 中的 onSave($event) 就只能位于该组件的 ts 文件中。
事件
事件可为 html 元素绑定一个 js 函数，触发事件之后，js 函数就会执行，可以修改 html 元素内容或样式。Angular提供了事件绑定机制，可以响应任何DOM事件，Angular 的事件绑定语法由等号左侧带圆括号的目标事件和右侧引号中的模板语句组成。 像函数deleteHero(hero)通过调用 ts 代码，修改 hero 的原始数据，此时 hero 展示内容也就变了。
但是 $event 这个参数给我搞晕了。
$event 是指当前触发的是什么事件（鼠标事件，键盘事件等）。搞不懂，记住 $event 可以获取当前dom元素的值。 $event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素。
网页的事件对象都是集成自Event 对象，该对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的。
绑定会通过名叫 $event 的事件对象传递关于此事件的信息（包括数据值）。
事件对象的形态取决于目标事件。如果目标事件是原生 DOM 元素事件， $event 就是 DOM 事件对象，它有像 target 和 target.value 这样的属性。
管道
管道用来对字符串、货币金额、日期和其他显示数据进行转换和格式化。管道是一些简单的函数，可以在模板表达式中用来接受输入值并返回一个转换后的值。
我们配置国际化用的就是 translate 管道。
属性绑定
attribute 和 property
你可以在HTML标签上面定义attribute，当浏览器编译完HTML代码，会生成与之对应的一个个DOM节点，每个DOM节点是一个对象，所以它拥有很多property。
当一个HTML标签元素解析成一个DOM节点对象时，这个节点对象上有很多property属性名和HTML标签元素上的attribute相同或相似，但不一定是一一映射关系。比如：
<input id="the-input" type="text" value="Name:">
对于上述HTML标签，其对应的DOM节点对象的property包括id、type、value，当然还有别的。
html标签属性绑定
Angualr中使用属性绑定，可以执行诸如切换按钮、以编程方式设置路径，以及在组件之间共享值之类的功能。要绑定到元素的属性，请将其括在方括号 [] 内，该括号会将属性标为目标属性。
<img [src]="itemImageUrl">
<button [disabled]="isUnchanged">Disabled Button</button>//给button绑定可点击属性
不用方括号不行吗？
插值和 Property 绑定只能设置 Property，不能设置 Attribute。例如下面的代码就是错误的，<td> 元素没有 colspan Property，因为 colspan 是一个 Attribute ，colSpan（带大写 S）才是相应的 Property。
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
指令属性绑定
我们以nagular中自带的指令ngClass举例，下面是模板代码
<p [ngClass]="classes">[ngClass] binding to the classes property making this blue</p>
其实就是动态把css样式绑定到标签的class选择器，这里我们用的源属性的值是classes。需要在对应组件类中声明它
classes = 'special';
此时如果css文件中有 .special ，浏览器就能把文字渲染成红色。
.special{color:red;
}
为什么需要 指令属性绑定呢？因为这样绑定之后，我们可以用 ts 代码修改classes变量的值，比如点击按钮，调用函数，执行赋值 classes = ‘black’，文字就能变成黑色。这样就能实现 html 样式的动态变化了。
父子组件传值属性绑定
发现没，我们在父子组件传值时也用了 [] ，这表明父子组件之间传值实际上就是设置自定义子组件的模型属性。
attributr 类 样式绑定
html Attribute
前面说的属性绑定只适用于 property 这种 js 对象属性，不适用 attribute 属性。首先先介绍一下 aria-label 这个属性
<input type="text" aria-label="用户名"/>
此时，当焦点落到该输入框时，读屏软件就会读出aria-label里的内容，即“用户名”。这个标签是为不方便的人士提供的功能，利用屏幕阅读器将 “用户名" 转换成语音及/或点字的软件。
ng 中Attribute 绑定语法类似于 Property 绑定，但不是直接在方括号之间放置元素的 Property，而是在 Attribute 名称前面加上前缀 attr，后跟一个点 .。然后，使用解析为字符串的表达式设置 Attribute 值。
<!-- create and set an aria attribute for assistive technology -->
<button [attr.aria-label]="actionName">{{actionName}} with Aria</button>
class Attribute绑定
style样式绑定
可以用样式绑定来动态设置样式。下面是一个给元素动态绑定背景颜色的例子
<nav [style.background-color]="expression"></nav>
事件绑定
通过事件绑定，你可以侦听并响应用户操作。要绑定到事件，请使用 Angular 的事件绑定语法。此语法由等号左侧括号内的目标事件名和右侧引号内的模板语句组成。
<button (click)="onSave()">Save</button>
自定义事件
想要自定义事件，需要使用 EventEmitter 。这和父子组件传值讲的其实一样，暂时不表。
双向绑定
b站大地老师说 ngModel 只能用于Form表单，我待验证
有三种情况（ngModel）、[ngModel]、([ngModel])
以input框为例子：
1、
<input type='text' (ngModel)='username' />
这种时候数据的传递方向是 input ----> 组件
一般使用单括号的绑定方式会出现在一些操作行为上
比如 <button (click)=‘buttonClick()’>点击 ———当button触发点击事件的时候调用组件的buttonClick()方法
2、
<input type='text' [ngModel]='username' />
这种时候数据的传递方向是 组件 -----> input
这是单向绑定，就是说在组件中给username赋了值可以影响到input的值，但input的值发生改变的时候，不会影响组件中username的值
3、
<input type="text" id = 'username' [(ngModel)]="peopleInfo.username"/>
这种时候数据的传递方向是 组件 -----> input , input --------> 组件
这是双向绑定，就是说在组件中給username赋了值可以影响到input的值，并且input的值发生改变的时候组件中的username的值也会随之变化。
注意我们上述的举例中，组件中必须有username这个field才能和 ngModel 进行绑定。例如情况3中，ts文件中定义了变量peopleInfo.username
public peopleInfo:any = {username:'libai'}
指令
指令是为 Angular 应用程序中的元素添加额外行为的类。使用 Angular 指令，你可以管理表单、列表、样式以及要让用户看到的任何内容。按照官网说法，组件也是一种指令，不太懂这一点，先别纠结。、
从用途上，指令主要分为属性型指令和结构性指令。
从定义方来说，指令可分为内置指令和自定义指令，内置指令是angular官方提供，用户可以直接使用的指令。常用的内置指令我们放在下面的属性型指令和结构型指令中细讲。自定义指令是用户自己遵循angular规范实现的指令。
属性型指令
更改元素、组件外观或行为的指令。
结构性指令
通过添加和删除 DOM 元素来更改 DOM 布局的指令。
ngIf
如果 NgIf 为 false，则 Angular 将从 DOM 中移除一个元素及其后代。然后，Angular 会销毁其组件，从而释放内存和资源。
<app-item-detail *ngIf="isActive" [item]="item"></app-item-detail>
当 isActive 表达式返回真值时，NgIf 会把子组件 ItemDetailComponent 添加到当前组件的 DOM 中。当表达式为假值时，NgIf 会从 DOM 中删除 ItemDetailComponent 并销毁该组件及其所有子组件。其中，子组件用[item] 接收父组件传来的参数。
ngFor
ngFor 会为 items 中的每个条目生成一个html 元素
<div *ngFor="let item of items">{{item.name}}</div>
复写组件
要复写某个组件元素，请将 *ngFor 应用于其选择器。在以下示例中，组件选择器为 <app-item-detail>。对于items中每个item，都会渲染一个app-item-detail组件。
<app-item-detail *ngFor="let item of items" [item]="item"></app-item-detail>
可以获取 *ngFor 的 index，并在模板中使用它。
<div *ngFor="let item of items; let i=index">{{i + 1}} - {{item.name}}</div>
模块
angular中我们常用NgModule 类来管理一组组件，每个 Angular 应用都至少有一个 NgModule 类，也就是根模块，它习惯上命名为 AppModule，并位于一个名叫 app.module.ts 的文件中。NgModule 是一个带有 @NgModule() 装饰器的类，其中最重要的属性如下。
declarations（可声明对象表）： 那些属于本 NgModule 的组件、指令、管道。- imports（导入表）：用来导入外部模块。
- exports：导出组件or指令管道等，引用此模块的模块可以使用被导出的组件。
- providers：需要使用的 Service 都放在这里。
- bootstrap：定义启动组件。一般只有根模块才应该设置这个
bootstrap属性。
由根模块直接管理所有组件，容易混乱。一组相关的组件。比如单单主页用到的组件，可以新建一个主页Module来管理它们。我理解的根组件如同将军，模块如同百夫长，模块如同士兵。一个模块中的组件，需要引入的第三方依赖，可以放在模块中，没必要全都堆积在根组件中了。
使用下面命令新建模块，会新建一个文件夹，里面包含一个 module.ts 文件
ng generate module module-name
模块也负责管理子组件的路由。根据url，根组件把请求路由到模块，模块在把请求路由到对应的子组件，这样就可以请求的组件的页面了。
模块也负责管理组件的国际化，在根模块中配置的国际化，子模块中的组件并无法使用translate管道。子模块中需要单独引入国际化服务。
项目实战
下载包依赖
下载material官方组件依赖，在idea的终端运行即可
ng add @angular/material
ng add @angular/cdk
我在下载 cdk 时出现错误
9 error cb() never called!
10 error This is an error with npm itself. Please report this error at:
11 error <https://npm.community>
最后是通过删除npm代理的方式解决的
npm config rm proxy
npm config rm https-proxy
国际化
国际化依赖一些包
npm install @ngx-translate/core --save
npm install @ngx-translate/http-loader --save
Angular基础知识学习记录相关推荐
- Python基础教程第1章：基础知识---学习记录
1.python官方学习相关资料 (1) 下载安装python,见python官网:https://www.python.org/downloads/ (2) python官方文档 1)chm格式,安 ...
- DDR3 基础知识学习记录
1 参考网址 SDRAM原理(强烈推荐) - 百度文库 [SDRAM/DDR结构]之一 逻辑-bank_xue_faye的博客-CSDN博客 DDR结构理解_hunan4222的博客-CSDN博客_ ...
- python基础知识学习记录，day4
字典 字典是键值对的无序可变序列,键值对是成对存储的键对象和值对象,可以通过键对象快速改变或删除值对象,键对象必须是不可改变且不能重复的. 字典的核心对象是散列表,一个稀疏数组 字典创建:dict( ...
- oracle数据库基础知识总结,oracle数据库基础知识学习笔记
oracle数据库基础知识学习笔记 一.oracle数据库类型: Char: 字符型(最大长度2000,定长.不足时以空格补充) Varchar2:字符型 最大长度 4000,变长,实际长度由存储的 ...
- 1. C++基础知识学习及其深入理解(面向对象部分还没学) -- 课程1完成
C++基础知识学习到深入理解及其部分算法学习 一.基础知识 现在把 北京大学 程序实际与算法一 视频刷了一遍,记录自己不懂的知识,所以知识点记录很零碎.这里使用的运行环境为Code::blocks ...
- 2021-7-19-OpenStack基础知识学习
OpenStack基础知识学习 参考文献:Wolf_Coder,百度百科 1,云计算 1.1,出现原因 由亚马逊公司提出.1.随着业务增加公司内部的服务器不够使用,进行虚拟化技术->2.随着公司 ...
- Oracle：ADG基础知识学习一20230515
作者 | 夜说 个人公众号 | 夜说的数据库笔记 原文链接 | Oracle:ADG基础知识学习一20230515 目录 01前言 02ADG基础知识一 01前言 以下为20230515所学习的adg ...
- K8s基础知识学习笔记及部分源码剖析
K8s基础知识学习笔记及部分源码剖析 在学习b站黑马k8s视频资料的基础上,查阅了配套基础知识笔记和源码剖析,仅作个人学习和回顾使用. 参考资料: 概念 | Kubernetes 四层.七层负载均衡的 ...
- uniapp 基础知识学习
uniapp 基础知识学习 uniapp 基础知识学习 [uniapp 介绍](https://uniapp.dcloud.io/README) 有哪些uni-app的作品 uni-app的社区规模 ...
最新文章
- java 默认焦点_按钮活动焦点阴影默认问题
- 百度前端技术学院html任务,重回百度前端技术学院第一天 HTML复习
- 数据结构（严蔚敏）之五——循环队列（c语言实现）
- Cocoapods pod update执行失败报错CocoaPods was not able to update the `master` repo.2019的解决...
- c ++查找字符串_C ++类和对象| 查找输出程序| 套装4
- bat 两个文本字符替换_Excel中最全最实用的文本函数公式大全
- Win7安装 Rational Rose软件
- 智慧酒店雷达传感方案，人体存在感应技术应用，雷达探测模块
- 五色电阻在线计算机,色环电阻（5色环在线电阻计算器）
- VMware workstation环境下opnsense的安装
- Mac软件打开时闪退怎么办？苹果电脑软件崩溃解决办法
- 30.kafka数据同步Elasticsearch深入详解(ES与Kafka同步)
- POI 单元格垂直居中，相同内容的单元格合并
- spring boot and php
- 创新实验室实习生每周工作总结【实习第七周】
- 计算机网络双语chapter4答案,计算机网络题库chapter4
- Blender雕刻模块：如何在雕刻过程中无缝合并物体
- 建行找不到服务器或DNS错误,建行浏览器打不开，提示域名解析错误，代码105，怎么解决？谢谢...
- RGB、Lab等颜色空间的区别
- SpringCloud和SpringCloudAlibaba的区别