Angular学习笔记
环境准备
我们如果要开发 Angular 应用, 那么电脑就必须安装好 Nodejs, Nodejs的安装方式自己去百度
Nodejs安装好之后, 接下来我们需要全局安装 @angular/cli
, 这是帮我们创建 Angular 工程的脚手架
npm i @angular/cli -g |
接下来, 我们需要验证是否安装成功, 在命令行中输入以下命令查看版本号
ng v |
注意这个命令,
ng
+ 空格 + 小写字母v
如果能输出以下信息, 则证明安装成功
PS C:\Users\Admin> ng v |
创建项目
当我们的脚手架成功安装后, 我们接下来就可以创建一个 Angular 项目了
随便找一个目录, 在当前目录下打开命令行, 执行以下命令
ng new projectName |
**语法: **ng + new + 项目名
注意:
- 项目名必须小写开头
- 项目名不能出现下划线(可以使用中划线)
- 不要使用中文
接下来, 终端可能会提示你是否选择路由, 是否使用样式预处理器等等, 你可以自行选择
? Would you like to add Angular routing? No |
默认情况下, 脚手架给你创建好项目文件后, 会自动给你下载依赖包, 如果你不想让它自动给你下载, 你也可以这样创建项目
ng nwe projectName --skip-install |
--skip-install
代表跳过安装依赖的步骤
然后, 你就可以用自己熟悉的包管理器来进行依赖下载了
目录结构
当我们创建好一个项目后, 我们得到的结构是这样的
启动项目
当我们的项目创建完毕, 依赖也安装完毕后, 就可以启动这个项目来查看效果了
执行以下命令
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目录中, 多出了这些文件
同时, 我们去看 app.module.ts
发现, 这里产生了一些变化
使用组件
我们先不去理会这些变化有什么作用
接下来, 我们打开 app.component.html
,输入以下内容
<h1>Angular项目</h1> |
打开浏览器, 你会发现, 页面效果如下
这个时候,有人可能会问, 我上面写的 <app-demo>
是从哪里来的, 为什么这么写?
回答:
app-demo
是demo组件标签的名称- 它在
demo.component.ts
中的 selector 进行定义 - 你可以自行去修改这个名称
如果我们需要修改页面内容, 就可以去找到对应的组件 html, 在里面进行修改, 例如我修改 demo.component.html 的内容为
<h1>这是demo组件</h1> |
然后去浏览器, 便可以看到效果了
component.ts
描述: 组件的入口文件,也叫 组件类
作用: 组件中用到的数据, 方法等等, 大多是在这个文件内进行定义的
内容描述如下:
import { Component, OnInit } from '@angular/core'; |
上面的写法是 typescript
写法, 因为在导出类的时候, 按照 onInit 的要求, 往类的身上添加了 ngOnInit 方法
但是呢, 你也可以不遵循它们的要求, 例如
import { Component } from '@angular/core'; |
不过这种方式不建议的哈, 既然用了 Angular, 那么就尽量按照人家的要求来咯
component.scss
这是组件的样式文件, 由于我创建项目的时候, 选择了 scss , 所以这里显示的就是 .scss
结尾
如果你在创建项目的时候选择了其它的预处理器, 则组建的样式文件也会有所不同
常见的有
xxx.component.sass |
这里没啥好说的, 你以前怎么写的样式, 现在就怎么写
component.html
这是组件的模板文件, 你也可以理解为组件的内容文件, 看后缀就知道了, 它就是用来写 html 的
你以前怎么写的html, 现在就怎么写
Angular 只是在普通 html 的基础上, 增加了一些自己的东西而已, 至于增加了什么, 我们后面再说
component.spec.ts
这是组件的单元测试文件, 就是用来测试组件功能效果的
感兴趣的话可以自行去了解, 本篇文章不会去探讨测试相关内容
组件结构总结
组件的三大组成部分:
- 组件类(component.ts),存放组件所用到的数据和方法
- 样式(css/sass/scss/stylus),决定组件外观
- 组件视图模板(component.html),决定组件视图的结构
组件类(class)
我们上一节中已经说了, component.ts 是组件的入口文件, 也是组件数据和方法所定义的地方
那么, 我们可以来给这个类添加一些属性和方法
import { Component, OnInit } from '@angular/core'; |
上面我添加了 today 和 list 两个变量, 其中 list 是一个数组
假设我们组件的页面上需要显示它们, 我们该如何做呢
插值表达式
如果我们想要在组件页面中展示某个变量的值, 那么我们就需要借助插值表达式来帮助我们
其实, 它跟 Vue 中的插值表达式几乎是一样的
语法: {{ 变量名 }}
例如我们上一章节提的需求, 我想要将 today 这个变量显示到 demo 组件的页面上, 那么, 我们就需要在 demo.component.html 中这么写
<h1>这是demo组件</h1> |
在浏览器中查看效果, 可以发现 today 这个变量已经能正常的显示出来了
然后, 我们还有一个 list 的数组需要显示到页面中, 这个该怎么做呢?
我们可以这么写
<h1>这是demo组件</h1> |
继续回浏览器查看我们的效果, 可以发现, 它也帮我们给渲染出来了
这时大家可能会问了, 我上面写的 *ngFor
是啥东西?
这就涉及到了我们接下来要讲的 指令
了
指令
这里的指令呢, 其实也跟 Vue 中的指令差不多, 指令拥有某种特定功能, 可以作用在某些 html 标签上
书写位置: html 元素的开始标签上
在 Angular 中, 可分为以下三种指令
其中, 我们在上一节中渲染 list 到页面中, 用到了 *ngFor
指令, 这就是 Angular 的内置指令之一, 它的作用就是以循环的方式来渲染我们的DOM元素
除此之外, 还有其他如 *ngIf
、*ngSwitch
之类的指令
我们常用的指令大多是 *ngFor
、*ngIf
指令的内容相对简单, 大家可直接查看官方文档即可
属性绑定
假设我有这么一个需求,我的页面上有一个 a 标签,我想给它绑定一个 title 属性,那么我们需要这么来写
首先,你的 component.ts 中需要定义 title 这个属性
// demo.component.ts |
然后,在你demo组件的html中这么写
<a [title]="title">我是一个超链接</a> |
这样就完成了
我们来分析一下,这个语法是什么意思
[key] = "value"
:代表这个 key 属性是动态绑定的,它的值来自 value 这个变量(实际是实例的属性)
我们再来写几个例子就明白了
给img绑定动态src
<img [src]="mySrc"/>
给input绑定value
<input [value]="myValue"/>
给radio绑定disable
<radio [disable]="isDisable">单选按钮</radio>
然后我们的类里面是这么写的
// demo.component.ts |
双向绑定
双向绑定也叫双向数据绑定,指的是 当数据发生变化时,界面会跟着变化,当界面发生变化时,数据也会跟着同步变化
这里我需要着重强调,只有表单元素才能使用双向数据绑定!因为只有表单元素可以让界面数据发生变化,如果没有表单元素,你怎么让界面数据发生变化?你连输入没有,变你个大头鬼啊
好,回归正题!
在 Angular 中,如果要使用双向数据绑定,首先需要在你的 app.module.ts
使用 FormsModule
// app.module.ts |
接下来,我们就可以使用双向数据绑定的功能了,来把我们的 html 改造一下
<h1>这是demo组件</h1> |
[(ngModel)] 是用来对表单元素进行双向数据绑定的,这是固定写法。
等号右边是要绑定的目标属性,目标属性发生变化时,input会更新;input发生变化时,目标属性也会同步更新
然后,在来我们的类组件里,添加 keyword 这个属性
export class DemoComponent implements OnInit { |
大功告成!打开浏览器查看效果,可以看到,当我在input中输入数据时,底下的p标签也会跟着变化,当我点击按钮设置keyword的值时,input框也会发生变化,这就完成了我们的双向数据绑定
其他说明:
我们上面只演示了 input 文本框的双向数据绑定,其实呢,select、radio、checkbox等标签都是可以进行双向数据绑定的,如下
<select [(ngModel)]="selectValue"> |