红色字体

$疑问：后端修改数据库数据时，网络异常，导致修改失败，抛出异常，前端该怎样处理呢？\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.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

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

kazam崩溃（dash）存留文件格式为.mux/movie，有效convert to MP4
整理：How To Convert .mux (Kazam) into .mp4 [Worked] - YouTube...
2024/4/27 23:10:23
基于Java的坦克大战游戏的设计与实现毕业设计
项目介绍游戏由服务器端和客户端两部分组成。在服务器端，ServerModel类主要用来创建主机，ServerView类主要负责服务器端图形界面的面板信息的设置，ServerControler类处理来自服务器视图框架的输入，包括创立通信与帮助信息等&am…...
2024/4/18 14:53:16
操作jQuery
jQuery02 复习 DOM的零散知识阻止默认事件:event.preventDefault() 超链接a标签自带 href属性, 点击之后会进行跳转. 给a标签绑定事件则通常要阻止自带的 href 跳转操作问题点: 书写外部的js文件给其他伙伴使用, 引入时要防御使用者带有href的情况阻止冒泡: event.sto…...
2024/4/20 7:28:46
day_17 集合概述
概述 Java集合是使程序能够存储和操纵元素不固定的一组数据。所有Java集合类都位于java.util包中。通过对比数组和Java集合工具类来解释Java集合工具类的必要性 1.1 继承体系 Collection 是集合,两个直接子接口是List和set List 特性 : 有序可重复,保证数据的添加顺序和…...
2024/4/14 12:55:15
【信号处理】基于数字信号同步压缩变换附matlab代码
1 简介嵌入式音视频混合信号同步编码技术涉及信号的压缩编码技术,尤其涉及音视频混合信号的同步压缩方法,本发明由数据提取,四维矩阵分割,四维矩阵变换,生成数字音频信号纠错码,数字音频信号嵌入视频,量化编码等步骤实现;本发明将视频信号的伴音信号与视频信号作为整体考虑进…...
2024/4/7 5:14:03
2021/1/19 LeetCode 3.无重复字符的最长字串【Java】
一、题目给定一个字符串 s ，请你找出其中不含有重复字符的最长子串的长度。实例1： 输入: s "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。实例2： 输入: s "bbb…...
2024/4/16 23:47:26
windows CMD 命令总结
windows CMD 命令总结帮助文件操作控制台目录操作环境变量磁盘网络系统配置帮助命令作用注释HELP帮助信息文件操作命令作用注释MD创建目录(文件）DEL删除一个或多个文件。ERASE删除一个或多个文件。REN重命名文件。MOVE将一个或多个文件从一个目录移动到另一个目…...
2024/5/3 2:13:10
gensim安装
python3之gensim库的安装 - 生活依旧 - 博客园对于学习自然语言解析的同学，使用python过程中一定用到gensim库，但是安装过程中却很不顺利，在这里，我给大家提供一个办法简介安装gensim的方法： pip install -i https://…...
2024/4/14 12:55:05
Webpack 项目工程化
Webpack优点前端代码模块化开发代码压缩混淆处理浏览器端JavaScript兼容性性能优化 Webpack安装配置 (先安装Node.js) Node.js 了解_编程菜鸟-CSDN博客 Webpack命令： npm i webpack webpack-cli -D 更目录下创建 webpack.config.js 修改 package.json 配置运…...
2024/4/14 12:55:30
【寒假每日算法】—— day.5 接雨水的三种做法
学习目标： 分享寒假每日刷的算法题，冲击4月蓝桥杯！！冲冲冲原题：接雨水题目描述: 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水。示例一&am…...
2024/4/14 12:55:05
小学奥数 7653 地球人口承载力估计 python
http://noi.openjudge.cn/math/7653/ """ 小学奥数 7653 地球人口承载力估计 http://noi.openjudge.cn/math/7653/""" x,a,y,bmap(int,input().split())ans(b*y-a*x)*1.0/(b-a)print("%.2f" %ans)...
2024/4/20 21:30:56
年轻代和老年代比例参数设置
...
2024/4/14 14:45:02
个人博客系统设计(支持hexo和halo同步)
本文主要介绍自己的博客系统是如何设计的，并使用Halo博客同步器将hexo（git pages: https://linshenkx.github.io ）文章自动同步到halo( http://linshenkx.cn )。实现一次编写、两套博客系统并存、多个网址访问的效果。这篇文章已同步至ht…...
2024/4/14 12:55:25
【LeetCode】410. 分割数组的最大值
前言分割数组的最大值给定一个非负整数数组 nums 和一个整数 m ，你需要将这个数组分成 m 个非空的连续子数组。设计一个算法使得这 m 个子数组各自和的最大值最小。示例 1： 输入：nums [7,2,5,10,8], m 2 输出：18 解释&a…...
2024/4/28 0:30:38
将“Elasticsearch“ 和 “SpringBoot“ 做整合，对 “ElasticsearchRestTemplate“ 的一些API做简单的测试。
以下的代码是基本所有的 QueryBuilders. 的方法做解释，并实现了简单测试差缺几个地理位置的查询因为不常用所以没有测试， 有问题的可以评论，我会在周末做处理！ 测试数据直接链接：百度网盘https://pan.baidu.co…...
2024/4/14 12:55:25
Http GET 请求参数中文乱码
Http GET 请求参数中文乱码两种解决方式第1种：代码里转换 String name request.getParamter("name"); String nameUtf8 new String(name.getBytes("ISO8859-1"), "UTF-8");第2种：修改Tomcat配置 TOMCAT_HOME/conf…...
2024/4/14 15:12:14
C语言100题练习计划——求100以内的素数
C语言100题练习计划——求100以内的素数学须志也，才须学也，非学无以广才，非志无以成学。——诸葛亮前言： ✍很高兴你打开了这篇博客,希望你有所收获！😊 🐼Code_流苏的博客，邀您一起…...
2024/5/3 2:50:57
mysql 创建函数
mysql 函数和存储过程区别一般来说，存储过程实现的功能要复杂一点，而函数的实现的功能针对性比较强。存储过程，功能强大，可以执行包括修改表等一系列数据库操作；用户定义函数不能用于执行一组修改全局数据库状态的操作…...
2024/4/18 4:45:15
1.19总结
1.早上一个半小时。完成了并查集、二叉树、快排题组里的快速排序模板。【模板】快速排序 P1177 【模板】快速排序 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路先找到一个基准值key,通过一趟排序把待排序序列分为两部分，左边一部分为小于基准值的元素…...
2024/4/22 16:12:04
BUUCTF-大白(图片宽高问题)
前言刷题平台：BUUCTF yyds 步骤根据提示，屏幕太小，指的是PNG太小了。这时候需要查看PNG的十六进制文件显示CRC校验错误爆破crc校验所需要了解到的PNG文件头知识- (固定)八个字节89 50 4E 47 0D 0A 1A 0A为png的文件头- (固定)四个字…...
2024/4/14 12:56:31

Angular基础知识学习记录

Angular概念简介

基本概念

组件

创建组件

父子组件传值

服务

组件引入服务

模块

组件

组件声明周期

组件交互

组件样式

模板

文本插值

模板语句

管道

属性绑定

attributr 类样式绑定

事件绑定

双向绑定

指令

属性型指令

结构性指令

ngIf

ngFor

模块

项目实战

下载包依赖

国际化

相关文章

最新文章

Angular基础知识学习记录

Angular概念简介

基本概念

组件

创建组件

父子组件传值

服务

组件引入服务

模块

组件

组件声明周期

组件交互

组件样式

模板

文本插值

模板语句

管道

属性绑定

attributr 类 样式绑定

事件绑定

双向绑定

指令

属性型指令

结构性指令

ngIf

ngFor

模块

项目实战

下载包依赖

国际化

相关文章

最新文章

attributr 类样式绑定