【2024年最受欢迎Angular课程】零基础自学的前端框架完整版教程
https://www.bilibili.com/video/BV1FZ42127cd/ 1
-10 15+ 19
01、angular介绍
angular.cn
ng serve --open
vite...
angular 11
2.2 主要特性
1.Angular CLI 可以快速搭建框架，创建module，service，class，directive等
2.具有webipack的功能，代码分割，按需加载：
3.代码打包压缩：
4.模块测试：
5.热部署，有改动立即重新编译，不用刷新浏览器；而且速度很快
6.有开发环境，测试环境，生产环境的配置，不用自己操心；
7.sass，less的预编译Angular CLI都会自动识别后缀来编译；
8.typescript的配置，Angular CLI在创建应用时都可以自己配置；
9.在创建好的工程也可以做一些个性化的配置，webpack的具体配置还不支持，未来可能会增加；
10.Angular CLI创建的工程结构是最佳实践，生产可用
ng g c xx 创建组件
<div [style.width]="'300px'">
<div [style.width.px]="'300'">
<div [style]="'color:#fff;'">{'color':'red'} <div [ngClass]="{'color':'red'} "> ngStyleinput.#use+ <input #use>(click)="fun($events)" (input)[ngSwitch] *ngSwitchCases*ngif="flag"[ngIf]='flag'-ng-template use*ngFor="let color of colors let i=index let odd=odd"/ item of arr
<div [class]="{'flag':true}" [class]='xx' [class.h3-dom]="trues" [id]="'box'"/>
3.3.7 模板引用变量 #use 类似ref
模板变量可以帮助你在模板的另一部分使用这个部分的数据。使用模板变量
你可以执行某些任务，比如响应用户输入或微调应用的表单
在模板中，要使用井号#来声明一个模板变量，下列模板变量#userName语法在<input>元素上声明了一个名为userName的变量
<input#userName placeholder="请输入用户名"/>
可以在组件模板中的任何地方引用某个模板变量
<button（click）="calluserName（userName.value）">call</button>
export class AppComponent{
calluserName（v）{
console.1og（v）
}}
双向数据 [(ngModel)]= 引入
02、Angular CLI安装和使用
03、项目解构介绍
04、组件介绍以及创建方式讲解
05、模板讲解
06、插值语法
07、属性绑定
08、条件判断
09、循环语句
10、事件绑定
11、模板引用变量
12、数据双向绑定ngModel
13、动态表单控件
14、动态表单控件组
注册响应式表单模块
要使用响应式表单控件，就要从@angular/forms包中导入 ReactiveFormsModule，并把它添加到你的NgModule的imports数组中。
<input type="text" [formControl]="age">
<button (click)="changeAge()">change age</button>
<p>{{age.value}}</p>age:FormControl=new FormControl(18)
changeAge(){this.age.setValue(19)}
@Component({selector: 'app-foo',imports: [NgIf,FormsModule,NgFor,ReactiveFormsModule],templateUrl: './foo.component.html',styleUrl: './foo.component.scss'
})
import {FormsModule,FormControl,ReactiveFormsModule} from '@angular/forms';
15、表单验证
import { FormGroup, FormControl } from '@angular/forms';
分组 里面分别new control
[formGroup] forControlNmae
16、自定义表单验证
input #name="ngModel" require
{{name.valid}}
import { FornGroup, FormBuilder,Validators } from '@angular/forms';
实现自定义表单验证
17、Angular管道
3.3.12管道管道的作用就是传输。不同的管道具有不同的作用。（其实就是处理数据）angular中自带的pipe函数管道功能日期管道，格式化日期DatePipe将输入数据对象经过JSON.stringifyo方法转换后输出对象的字符串JsonPipe将文本所有小写字母转换成大写字母UpperCasePipe将文本所有大写字母转换成小写字母LowerCasePipeDecimalPipe将数值按照特定的格式显示文本将数值进行货币格式化处理CurrentcyPipe将数组或者字符串裁剪成新子集SlicePipe将数值转百分比格式PercentPipepipe用法·{输入数据|管道：管道参数]}}（其中是管道操作符）·链式管道{{输入数据|date|uppercase}}·管道流通方向自左向右，逐层执行体田脚王加
类似 vue2 的过滤器 nest的管道
{{data | date}}
ng g p pipes/test 自定义创建管道
18、组件生命周期以及属性传递
3.2.2 组件生命周期
Angular会按以下顺序执行钩子方法，你可以用它来执行以下类型的操作。
ngonchanges ()
ngonInitO
ngDocheck()
ngAfterContentInitO
ngAfterContentCheckedO
ngAfterviewInitO
ngAfterviewCheckedO
ngOnDestroy
传值
<app-title [title]='xxx'>title compontent @input()title?:stringhtml {{title}}19、组件交互
@Input
父组件通过“@Input'给子组件绑定属性设置输入类数据
@Output父组件给子组件传递一个事件，子组件通过@output 弹射触发事件
相当vue $emit
parent
export class AppComponent {title = 'app';print(){console.log(this.title)}
}
<app-foo [title]="'xx'" (print)="print()"></app-foo>child
@Output() print:EventEmitter<string>=new EventEmitter()changeTitleFun=()=>{this.print.emit('title')}
<button (click)="changeTitleFun()">parent</button>
@ViewChild（）
通过“Viewchild"获取子组件实例，获取子组件数据
parent
print(){console.log(this.title)this.children.add()}@ViewChild('child') children:any;
<app-foo #child [title]="'xx'" (print)="print()"></app-foo>
20、Angular服务的讲解
3.4服务
angular中，把从组件内抽离出来的代码叫服务，服务的本质就是函数官方认为组件不应该直接获取或保存数据，它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。而服务就充当着数据访问，逻辑处理的功能。把组件和服务区分开，以提高模块性和复用性。通过把组件中和视图有关的功能与其他类型的处理分离开，可以让组件类更加精简、高效。
使用命令ng g s xx创建一个服务，通过@Injectable（）装饰器标识服务。
访问获取保存数据 业务逻辑
ng g s xxx/xx
s
@Injectable()
模块过来各个模块 组装起来
21、依赖注入
服务手动...加入app
组件 用在construtor 加入
服务 类似 vuex
22、路由基础以及路由配置
<a [routerLink]="['/foo']">foo</a>
RouterLink标签
export const routes: Routes = [{path: 'foo',component:FooComponent,// children/}
];
imports: [RouterOutlet,FooComponent,RouterLink],
<！--路由组件渲染的位置-->
path:'' 默认 path:"**" 全部
23、通配路由配置以及路由执行机制讲解
24、路由嵌套
import Router
this.router.navigate(['/home'])
高亮 routerlinkActive 同 react
25、路由传参
query
this.router.snapshot.queryParams['name']<a [routerLink]="['/foo',88]" [queryParams]="{'name':'koo'}">foo</a>params
export const routes: Routes = [{path: 'foo/:id',component:FooComponent,// children/}
];<a [routerLink]="['/foo',88]">foo</a>constructor(private http: HttpClient,private appService: AppService,private router:ActivatedRoute) this.router.params.subscribe(params=>{console.log(params['id'],111111111)})
http://fastmock.site/#/
26、案例巩固
自带http axios
01_vue社区生鲜团购功能介绍
02_项目的环境搭建
03_相关文件的配置
04_vue项目框架结构介绍
05_路由定义
06_组件的引用
07_引入外部css文件
08_底部导航结构
09_底部导航样式
10_模似后端返回数组对象处理数据
11_首页头部展示
12_首页头部样式
13_require动态引入图片
require('xx') 在data
14_vue实现轮播图
15_轮播图小圆点的展示
16_导航栏的展示
17_导航栏通过数据动态处理
18_优惠券模块结构定义
19_优惠券模块样式
20_商品展示区结构分析
22、Vue2 VS Vue3 差异化对比--速度更快
23、Vue2 VS Vue3 差异化对比--体积减小
24、Vue2 VS Vue3 差异化对比--更易维护
25、Vue2 VS Vue3 差异化对比--原生支持度更高
https://www.bilibili.com/video/BV1864y1i7n8
路由守卫
用CanActivate来处理导航到某路由的情况
用CanActivateChild来处理导航到某子路由的情况
用CanDeactivate来处理从当前路由离开的情况
用Resolve在路由激活之前获取路由数据
用CanLoad来处理异步导航到某特性模块的情况
路由守卫使用步骤
1 创建：ng g gurd auth
同理 会 同样其他 http 路由等....少用....ds用查看做
qjdgh ...跳重
http-拦截器..
守卫+http拦截器做 login拦截
