Angular快速入门(angular 初学者快速上手教程)

Angular快速入门 Angular1.框架背景2.Angular CLI2.1 安装2.2 主要特性2.3 创建module，component，service，class3.架构3.1 模块3.2 组件3.2.1 创建组件3.2.2 组件生命周期3.2.3 组件交互3.3 模板3.3.1 插值语法3.3.2 属性绑定3.3.3 条件判断3.3.4 循环语句3.3.5 事件绑定3.3.6 双向绑定3.3.7 模板引用变量3.8 表单控件3.3.9 表单控件分组3.3.10 表单验证3.3.11 自定义表单验证3.3.12 管道3.4 服务3.5 依赖注入3.6 路由3.6.1 路由基本使用3.6.2 路由嵌套3.6.3 路由传参1.框架背景

推荐整理分享Angular快速入门(angular 初学者快速上手教程)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:angular视频教程,angular 初学者快速上手教程,angular 初学者快速上手教程,angular1教程,angular1教程,angular 初学者快速上手教程,angular入门教程,angular 初学者快速上手教程,内容如对您有帮助，希望把文章链接给更多的朋友！

Angular 是一个由 Google维护的开源JavaScript框架，用于在HTML和JavaScript中构建Web应用程序，是三大框架之首。

不管是1还是2，Angular最显著的特征就是其整合性。涵盖了M、V、C/VM等各个层面，不需要组合、评估其它技术就能完成大部分前端开发任务。这样可以有效降低决策成本，提高决策速度，对需要快速起步的团队是非常有帮助的。

由于它是从一个用来做原型的框架演化而来的，加上诞生时间很早（2009年，作为对比，jQuery诞生于2006年），当时生态不完善，连模块化机制都得自己实现。

但Angular 2就不同了，发布于2016年9月份，它是基于ES6来开发的，它的起点更高，整合了现代前端的各种先进理念，在框架、文档、工具等各个层面提供了全方位的支持

在Angular 中最具特色的就是依赖注入系统了，它把后端开发中用来解决复杂问题、实现高弹性设计的技术引入了前端

2.Angular CLI2.1 安装

​ Angular CLI用于简单，快速构建Angular2项目，只要掌握几行命令就能扣减前端架构。依赖于NodeJs和npm。

//安装脚手架npm install -g angular-cli//创建项目ng new project_name(项目名称)//启动项目cd project_nameng serve --open 2.2 主要特性Angular CLI 可以快速搭建框架，创建module，service，class，directive等；具有webpack的功能，代码分割，按需加载；代码打包压缩；模块测试；热部署，有改动立即重新编译，不用刷新浏览器；而且速度很快有开发环境，测试环境，生产环境的配置，不用自己操心；sass，less的预编译Angular CLI都会自动识别后缀来编译；typescript的配置，Angular CLI在创建应用时都可以自己配置；在创建好的工程也可以做一些个性化的配置，webpack的具体配置还不支持，未来可能会增加；Angular CLI创建的工程结构是最佳实践，生产可用；2.3 创建module，component，service，class

​

3.架构3.1 模块

模块组件的特征在于可以用于执行单个任务的代码块。 您可以从代码(类)中导出值。 Angular应用程序被称为模块，并使用许多模块构建您的应用程序。 Angular 的基本构建块是可以从模块导出的组件类。

export class AppComponent { title = 'dsc';}3.2 组件

组件是拥有模板的控制器类，主要处理页面上的应用程序和逻辑的视图。 组件可以拥有独立的样式。 注册组件，使用 @Component 注释，可以将应用程序拆分为更小的部分。

3.2.1 创建组件

使用ng命令ng generate component <component-name>创建的组件会自动生成在app.module中的引用，推荐使用ng命令生成组件

//快速创建ng g c xxx@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss']})

@Component最常用的几个选项:

selector：这个 CSS 选择器用于在模板中标记出该指令，并触发该指令的实例化。

template：组件的内联模板

templateUrl：组件模板文件的 URL

styleUrls：组件样式文件

styles：组件内联样式

3.2.2 组件生命周期

​ Angular 会按以下顺序执行钩子方法。你可以用它来执行以下类型的操作。

钩子方法用途时机ngOnChanges()当 Angular 设置或重新设置数据绑定的输入属性时响应。 该方法接受当前和上一属性值的 SimpleChanges 对象注意，这发生的非常频繁，所以你在这里执行的任何操作都会显著影响性能。在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。注意，如果你的组件没有输入，或者你使用它时没有提供任何输入，那么框架就不会调用 ngOnChanges()。ngOnInit()在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮 ngOnChanges() 完成之后调用，只调用一次。ngDoCheck()检测，并在发生 Angular 无法或不愿意自己检测的变化时作出反应。紧跟在每次执行变更检测时的 ngOnChanges() 和 首次执行变更检测时的 ngOnInit() 后调用。ngAfterContentInit()当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。第一次 ngDoCheck() 之后调用，只调用一次。ngAfterContentChecked()每当 Angular 检查完被投影到组件或指令中的内容之后调用ngAfterContentInit() 和每次 ngDoCheck() 之后调用ngAfterViewInit()当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用第一次 ngAfterContentChecked() 之后调用，只调用一次。ngAfterViewChecked()每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。ngAfterViewInit() 和每次 ngAfterContentChecked() 之后调用。ngOnDestroy()每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏在 Angular 销毁指令或组件之前立即调用。3.2.3 组件交互

​ @Input

父组件通过`@Input`给子组件绑定属性设置输入类数据//父组件<app-hello [name]="'tina'"></app-hello>//子组件import { Component, Input } from '@angular/core';@Input()name!: string;ngOnInit(): void {console.log(this.name)}

​ @Output

​ 父组件给子组件传递一个事件，子组件通过@Output弹射触发事件

//父组件 <app-hello (addList)="addListFun($event)" [name]="'tina'"></app-hello>list:number[] = [1,2,3,4] addListFun(num:number){ this.list.push(num) }//子组件import { Component, Output,EventEmitter } from '@angular/core';@Output() addList = new EventEmitter() pushList(v:string){ console.log(this.inpValue) this.addList.emit(v) }

​ @ViewChild()

通过`ViewChild`获取子组件实例，获取子组件数据<app-hello #myChild [name]="'tina'"></app-hello><button (click)="getView($event)">获取</button>@ViewChild('myChild') child: any;constructor() { }ngOnInit(): void {}getView(e:any){console.log(this.child)this.child.setInpValue('我是一段数据')}3.3 模板

在 Angular 中，模板就是一块 HTML。在模板中，你可以通过一种特殊语法来使用 Angular 的许多功能

3.3.1 插值语法

​ 所谓 “插值” 是指将表达式嵌入到标记文本中。 默认情况下，插值会用双花括号 {{ 和 }} 作为分隔符

<h3>hello {{ name }}</h3>

​ 花括号之间的文本通常是组件属性的名字。Angular 会把这个名字替换为响应组件属性的字符串值

​ 括号间的素材是一个模板表达式我们可以在{{}}内编写js运算

<h3>hello {{ 1+1 }}</h3>3.3.2 属性绑定

Attribute绑定

<h3 [id]="'h3-dom'">hello {{ 1+1 }}</h3>

类绑定

//单一类绑定<h3 [class.h3-dom]="true">hello {{ 1+1 }}</h3>//多重类绑定<h3 [class]="'h3-dom title-dom min-title'">hello {{ 1+1 }}</h3><h3 [class]="{'h3-dom':true,'title-dom':false}">hello {{ 1+1 }}</h3><h3 [class]="['h3-dom','title-dom']">hello {{ 1+1 }}</h3>//ngClassexport class AppComponent { isActive = true;}<h3 [ngClass]="{'active': isActive}">hello {{ 1+1 }}</h3>

样式绑定

//单一样式绑定<h3 [style.width]="'300px'">hello {{ 1+1 }}</h3>//带单位的单一样式绑定<h3 [style.width.px]="'300'">hello {{ 1+1 }}</h3>//多重样式绑定<h3 [style]="'background:red;color:#fff'">hello {{ 1+1 }}</h3><h3 [style]="{'background':'red','color':'#fff'}">hello {{ 1+1 }}</h3>//ngStyleexport class AppComponent { isMax = false;}<h3 [ngStyle]="{'color': 'red'}">hello {{ 1+1 }}</h3><h3 [ngStyle]="{'font-size': isMax ? '24px' : '12px'}">hello {{ 1+1 }}</h3>3.3.3 条件判断

​ *ngIf是直接影响元素是否被渲染，而非控制元素的显示和隐藏

export class AppComponent { isMax = false; isMin = false;}<div *ngIf="isMax">Max title</div><div *ngIf="isMin">Min title</div>//解析完<ng-template [ngIf]="isMax"> <div>Max title</div></ng-template><ng-container *ngIf="isMax; else elseTemplate"> isMax为true</ng-container><ng-template #elseTemplate> isMax为false</ng-template>3.3.4 循环语句

​ 解析器会把 let color、let i 和 let odd 翻译成命名变量 color、i 和 odd

微语法解析器接收of，会将它的首字母大写(Of)，然后加上属性的指令名(ngFor)前缀，它最终生成的名字是 ngFor 的输入属性(colors)

NgFor 指令在列表上循环，每个循环中都会设置和重置它自己的上下文对象上的属性。 这些属性包括 index 和 odd 以及一个特殊的属性名 $implicit(隐式变量)

Angular 将 let-color 设置为此上下文中 $implicit 属性的值， 它是由 NgFor 用当前迭代中的 colors 初始化的

export class AppComponent { colors:Array<string> = [ 'red', 'blue', 'yellow', 'green' ];}<div *ngFor="let color of colors let i=index let odd=odd"> {{odd}} {{i}} {{color}}</div>//解析完<ng-template ngFor let-color [ngForOf]="colors" let-i="index" let-odd="odd"> <div>{{odd}} {{i}} {{color}}</div></ng-template>export class AppComponent { status = 1;} <ul [ngSwitch]="status"> <li *ngSwitchCase="1">已支付</li> <li *ngSwitchCase="2">订单已经确认</li> <li *ngSwitchCase="3">已发货</li> <li *ngSwitchDefault>无效</li> </ul>3.3.5 事件绑定

​ Angular 的事件绑定语法由等号左侧括号内的目标事件名和右侧引号内的模板语句组成。目标事件名是 click ，模板语句是 onSave()

事件对象通过$event传递

export class AppComponent { onSave(){ console.log('点击了按钮') }}<button 2(click)="onSave($event)">Save</button>3.3.6 双向绑定

双向绑定是应用中的组件共享数据的一种方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值

ngModel指令只对表单元素有效，所以在使用之前需要导入FormsModule板块

import { FormsModule } from '@angular/forms';@NgModule({ // 申明组件内用到的视图 declarations: [ AppComponent, HelloComponent, ], //引入模块需要的类 imports: [ BrowserModule, AppRoutingModule, FormsModule ], //全局服务 providers: [], //根组件 bootstrap: [AppComponent]})export class AppComponent { userName='';}<div> 输入: <input [(ngModel)]="userName"><h1>你输入了: {{userName}}</h1></div>3.3.7 模板引用变量

模板变量可以帮助你在模板的另一部分使用这个部分的数据。使用模板变量，你可以执行某些任务，比如响应用户输入或微调应用的表单

在模板中，要使用井号 # 来