【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'}   ">  ngStyle
        input.#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的管道

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?:string
        
        html {{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

@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拦截

posted @ 2024-12-14 13:41 KooTeam 阅读(51) 评论(0) 编辑收藏举报

刷新页面返回顶部

KooTeam

学知识,少无知!-Knowledge makes humble,ignorant makes proud!

【2024年最受欢迎Angular课程】零基础自学的前端框架完整版教程

【2024年最受欢迎Angular课程】零基础自学的前端框架完整版教程

14、动态表单控件组

17、Angular管道

18、组件生命周期以及属性传递

19、组件交互

20、Angular服务的讲解

22、路由基础以及路由配置

25、路由传参

13_require动态引入图片

https://www.bilibili.com/video/BV1864y1i7n8

路由守卫

公告