IT科技圈

0%

Angular学习笔记

更新于 本文字数： 7.4k 阅读时长 ≈ 7 分钟

Angular学习笔记

环境准备

我们如果要开发 Angular 应用, 那么电脑就必须安装好 Nodejs, Nodejs的安装方式自己去百度

Nodejs安装好之后, 接下来我们需要全局安装 @angular/cli , 这是帮我们创建 Angular 工程的脚手架

npm i @angular/cli -g

接下来, 我们需要验证是否安装成功, 在命令行中输入以下命令查看版本号

ng v

注意这个命令, ng + 空格 + 小写字母 v


如果能输出以下信息, 则证明安装成功

PS C:\Users\Admin> ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.2.4
Node: 14.17.0
Package Manager: npm 7.19.1
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1202.4 (cli-only)
@angular-devkit/core         12.2.4 (cli-only)
@angular-devkit/schematics   12.2.4 (cli-only)
@schematics/angular          12.2.4 (cli-only)

创建项目

当我们的脚手架成功安装后, 我们接下来就可以创建一个 Angular 项目了

随便找一个目录, 在当前目录下打开命令行, 执行以下命令

ng new projectName

**语法: **ng + new + 项目名

注意:

  1. 项目名必须小写开头
  2. 项目名不能出现下划线(可以使用中划线)
  3. 不要使用中文

接下来, 终端可能会提示你是否选择路由, 是否使用样式预处理器等等, 你可以自行选择

? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? SCSS

默认情况下, 脚手架给你创建好项目文件后, 会自动给你下载依赖包, 如果你不想让它自动给你下载, 你也可以这样创建项目

ng nwe projectName --skip-install

--skip-install 代表跳过安装依赖的步骤

然后, 你就可以用自己熟悉的包管理器来进行依赖下载了

目录结构

当我们创建好一个项目后, 我们得到的结构是这样的

image-20210907163947029

启动项目

当我们的项目创建完毕, 依赖也安装完毕后, 就可以启动这个项目来查看效果了

执行以下命令

ng serve

或者也可以执行这个

yarn start

VS Code 插件

如果你用的编辑器不是 vscode , 那么这一章你可以不看

这里列出我常用的一些 vscode 插件

插件名称作用
Angular Files提供Angular项目内文件跳转
Angular Snippets (你的 Angular 版本)这是Angular语法提示
Auto Close Tag自动闭合HTML标签
Auto rename Tag自动重命名HTML标签
Bracket Pair Colorizer代码缩进指示

组件

创建组件

在 Angular 中, 如果我们要创建一个组件, 那么, 我们可以在项目根目录中, 打开命令行, 输入以下命令

ng g component components/demo

命令解释 :

  • ng 固定语法
  • g 完整单词是 generate, 代表 生成 的意思
  • component 代表我们要生成的是一个组件
  • components/demo 代表在 components 文件夹下, 创建一个名叫 demo 的组件

components/demo 中如果路径不存在, Angular 的脚手架会自动帮你创建相应的文件夹


当命令执行完毕后, 可以看到我们的src目录中, 多出了这些文件

image-20210908092113436


同时, 我们去看 app.module.ts 发现, 这里产生了一些变化

image-20210908092337351


使用组件

我们先不去理会这些变化有什么作用

接下来, 我们打开 app.component.html ，输入以下内容

<h1>Angular项目</h1>
<hr>
<app-demo></app-demo>

打开浏览器， 你会发现， 页面效果如下

image-20210908092544338


这个时候，有人可能会问， 我上面写的 <app-demo> 是从哪里来的, 为什么这么写?

回答:

  1. app-demo 是demo组件标签的名称
  2. 它在 demo.component.ts 中的 selector 进行定义
  3. 你可以自行去修改这个名称

image-20210908093453019


如果我们需要修改页面内容, 就可以去找到对应的组件 html, 在里面进行修改, 例如我修改 demo.component.html 的内容为

<h1>这是demo组件</h1>
<p>这是我随便写的东西</p>

然后去浏览器, 便可以看到效果了

component.ts

描述: 组件的入口文件，也叫 组件类

作用: 组件中用到的数据, 方法等等, 大多是在这个文件内进行定义的

内容描述如下:

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

// 类装饰器, 往我们的类身上添加一些东西
@Component({
	selector: 'app-demo', // 定义组件名称
	templateUrl: './demo.component.html', // 定义组件的html模板所在路径
	styleUrls: ['./demo.component.scss'], // 定义组件的样式文件所在路径
})

// 导出一个类, 并按照 OnInit 接口的要求来进行实现
export class DemoComponent implements OnInit {
    // OnInit 要求必须定义这个 ngOnInit 方法, 哪怕你这个方法啥也不做
	ngOnInit(): void {}
}

上面的写法是 typescript 写法, 因为在导出类的时候, 按照 onInit 的要求, 往类的身上添加了 ngOnInit 方法

但是呢, 你也可以不遵循它们的要求, 例如

import { Component } from '@angular/core';

// 类装饰器, 往我们的类身上添加一些东西
@Component({
	selector: 'app-demo', // 定义组件名称
	templateUrl: './demo.component.html', // 定义组件的html模板所在路径
	styleUrls: ['./demo.component.scss'], // 定义组件的样式文件所在路径
})

// 直接导出一个类, 诶, 就是玩
export class DemoComponent {}

不过这种方式不建议的哈, 既然用了 Angular, 那么就尽量按照人家的要求来咯

component.scss

这是组件的样式文件, 由于我创建项目的时候, 选择了 scss , 所以这里显示的就是 .scss 结尾

如果你在创建项目的时候选择了其它的预处理器, 则组建的样式文件也会有所不同

常见的有

xxx.component.sass
xxx.component.scss
xxx.component.less
xxx.component.stylus
xxx.component.css

这里没啥好说的, 你以前怎么写的样式, 现在就怎么写

component.html

这是组件的模板文件, 你也可以理解为组件的内容文件, 看后缀就知道了, 它就是用来写 html 的

你以前怎么写的html, 现在就怎么写

Angular 只是在普通 html 的基础上, 增加了一些自己的东西而已, 至于增加了什么, 我们后面再说

component.spec.ts

这是组件的单元测试文件, 就是用来测试组件功能效果的

感兴趣的话可以自行去了解, 本篇文章不会去探讨测试相关内容

组件结构总结

组件的三大组成部分：

  1. 组件类(component.ts)，存放组件所用到的数据和方法
  2. 样式(css/sass/scss/stylus)，决定组件外观
  3. 组件视图模板(component.html)，决定组件视图的结构

组件类(class)

我们上一节中已经说了, component.ts 是组件的入口文件, 也是组件数据和方法所定义的地方

那么, 我们可以来给这个类添加一些属性和方法

import { Component, OnInit } from '@angular/core';
@Component({
	selector: 'app-demo',
	templateUrl: './demo.component.html',
	styleUrls: ['./demo.component.scss'],
})
export class DemoComponent implements OnInit {

	today = '今天是2021年9月8号';

	list = [
		{ song: '最炫民族风', singer: '凤凰传奇' },
		{ song: '套马杆', singer: '乌兰图雅' },
		{ song: '大悲咒', singer: '母鸡呀' },
	];

	ngOnInit(): void {}
}


上面我添加了 today 和 list 两个变量, 其中 list 是一个数组

假设我们组件的页面上需要显示它们, 我们该如何做呢

插值表达式

如果我们想要在组件页面中展示某个变量的值, 那么我们就需要借助插值表达式来帮助我们

其实, 它跟 Vue 中的插值表达式几乎是一样的

语法: {{ 变量名 }}

例如我们上一章节提的需求, 我想要将 today 这个变量显示到 demo 组件的页面上, 那么, 我们就需要在 demo.component.html 中这么写

<h1>这是demo组件</h1>
<!-- 使用插值表达式, 将 today 这个变量展示到页面中 -->
<p>today = {{ today }}</p>

在浏览器中查看效果, 可以发现 today 这个变量已经能正常的显示出来了

image-20210908104506842


然后, 我们还有一个 list 的数组需要显示到页面中, 这个该怎么做呢?

我们可以这么写

<h1>这是demo组件</h1>
<p>today = {{ today }}</p>

<ul>
	<li *ngFor="let item of list">{{item.song}} --- {{item.singer}}</li>
</ul>

继续回浏览器查看我们的效果, 可以发现, 它也帮我们给渲染出来了

image-20210908110212924


这时大家可能会问了, 我上面写的 *ngFor 是啥东西?

这就涉及到了我们接下来要讲的 指令 了

指令

这里的指令呢, 其实也跟 Vue 中的指令差不多, 指令拥有某种特定功能, 可以作用在某些 html 标签上

书写位置: html 元素的开始标签上

在 Angular 中, 可分为以下三种指令

  1. Angular - 内置指令
  2. Angular - 属性型指令
  3. Angular - 编写结构型指令

其中, 我们在上一节中渲染 list 到页面中, 用到了 *ngFor 指令, 这就是 Angular 的内置指令之一, 它的作用就是以循环的方式来渲染我们的DOM元素

除此之外, 还有其他如 *ngIf 、*ngSwitch 之类的指令

我们常用的指令大多是 *ngFor、*ngIf

指令的内容相对简单, 大家可直接查看官方文档即可

属性绑定

假设我有这么一个需求，我的页面上有一个 a 标签，我想给它绑定一个 title 属性，那么我们需要这么来写

首先，你的 component.ts 中需要定义 title 这个属性

// demo.component.ts
export class DemoComponent implements OnInit {
    // 定义一个title属性
	title: string = '我是一个title';

	ngOnInit(): void {}
}

然后，在你demo组件的html中这么写

<a [title]="title">我是一个超链接</a>

这样就完成了


我们来分析一下，这个语法是什么意思

[key] = "value"：代表这个 key 属性是动态绑定的，它的值来自 value 这个变量（实际是实例的属性）

我们再来写几个例子就明白了

  1. 给img绑定动态src

    <img [src]="mySrc"/>

  1. 给input绑定value

    <input [value]="myValue"/>

  1. 给radio绑定disable

    <radio [disable]="isDisable">单选按钮</radio>

然后我们的类里面是这么写的

// demo.component.ts
export class DemoComponent implements OnInit {
    
	mySrc: string = 'https://www.xxx.com/1.jpg';
	myValue: string = '这是一个默认显示的value';
	isDisable: boolean = true;

	ngOnInit(): void {}
}

双向绑定

双向绑定也叫双向数据绑定，指的是 当数据发生变化时，界面会跟着变化，当界面发生变化时，数据也会跟着同步变化

这里我需要着重强调，只有表单元素才能使用双向数据绑定！因为只有表单元素可以让界面数据发生变化，如果没有表单元素，你怎么让界面数据发生变化？你连输入没有，变你个大头鬼啊

好，回归正题！

在 Angular 中，如果要使用双向数据绑定，首先需要在你的 app.module.ts 使用 FormsModule

// app.module.ts
// 就是这里，FormsModule
import { FormsModule } from '@angular/forms';

// ...

@NgModule({
   // ...
  imports: [
    // 然后在这里使用
	FormsModule
  ],
})
// ...

接下来，我们就可以使用双向数据绑定的功能了，来把我们的 html 改造一下

<h1>这是demo组件</h1>

<input [(ngModel)]="keyword">
<button (click)="setKeyword()">设置keyword</button>
<hr>
<p>{{keyword}}</p>

[(ngModel)] 是用来对表单元素进行双向数据绑定的，这是固定写法。

等号右边是要绑定的目标属性，目标属性发生变化时，input会更新；input发生变化时，目标属性也会同步更新


然后，在来我们的类组件里，添加 keyword 这个属性

export class DemoComponent implements OnInit {
	public keyword: string = '';

	setKeyword(): void {
		this.keyword = '我是黄某人';
	}

	ngOnInit(): void {}
}

大功告成！打开浏览器查看效果，可以看到，当我在input中输入数据时，底下的p标签也会跟着变化，当我点击按钮设置keyword的值时，input框也会发生变化，这就完成了我们的双向数据绑定

image-20210908143946261


其他说明：

我们上面只演示了 input 文本框的双向数据绑定，其实呢，select、radio、checkbox等标签都是可以进行双向数据绑定的，如下

<select [(ngModel)]="selectValue">
    <option value="1">1</option>
</select>

<div>
	<input type="radio" name="sex" value="男" [(ngModel)]="sex" /> 男
	<input type="radio" name="sex" value="女" [(ngModel)]="sex" /> 女
</div>

<div>
    <!-- 注意，checkbox 选中与取消是以 true || false 来决定的，因此你获取到的也是布尔值 -->
	<input type="checkbox" [(ngModel)]="level" /> 小学
</div>
-------------本文结束    感谢阅读-------------
坚持原创技术分享，您的支持将鼓励我继续创作！