什么是Angular？

Angular是一个基于TypeScript构建的开发平台，它包括一下三个部分：

一个基于组件的库
一组涵盖路由、表单管理、客户端服务端通信等各种功能继承的库
一套开发、构建、测试、更新代码的工具

Angular中的知识点

什么是组件

1、在Angular中，组件是构成应用的元素。
2、组件包括三个部分：带有@Component()装饰器的TypeScript类、HTML模板和样式文件

下面代码是一个最小化的Angular组件，七中@Component()装饰器会指定三个angular专属的信息：

CSS选择器，在其他地方使用这个组件时，通过selector来使用
HTML模板，定义当前组件的结构
一组CSS样式，用于定义当前组件HTML模板的样式

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

@Component({
    
    
	selector: 'my-angular',
	template: `<h1>自定义我的angular组件</h1>`,
	styles: [`color: #000`]
})
export class MyAngularComponent {
    
    
	console.log('This is My-angular component!');
}

在其他模板中使用my-angular组件时，通过selector的值来引入该组件

<my-angular></my-angular>

当Angular渲染该组件时，生成的DOM如下所示：

<my-angular>
	<h1>自定义我的angular组件</h1>
</my-angular>

什么是模板

组件的HTML模板，用于声明组件的渲染方式，可以在@Component()装饰器中使用template内联或者templateUrl引入外部文件

模板中使用插值

在Angular的模板文件中，可以通过双花括号的方式在组件模板中插入动态值：

<h1>{
   
   {text}}</h1>

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

@Component({
    
    
	selector: 'my-angular',
	templateUrl: './my-angular.component.html',
})
export class MyAngularComponent {
    
    
	var text = 'this is my angular!'
}

如上所示，HTML文件中，双花括号中的text的值来自对用的组件类。
Angular完成渲染之后用户实际看到的内容是<h1>this is my angular!</h1>。

当组件类中text的值发生改变后，Angular会自动更新模板中已经渲染的DMO，通过这种方式，在开发中我们可以使用这种模板语法在页面中插入动态文本。

模板中使用属性绑定

在Angular的模板文件中，使用方括号的方式绑定Property和Attribute的值，使用圆括号指定事件名称来声明时间监听器：

<button [disabled]="canClick" [style.color]="btnColor" (click)="showMessage()">click</button>

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

@Component({
    
    
	selector: 'my-angular',
	templateUrl: './my-angular.component.html',
})
export class MyAngularComponent {
    
    
	canClick = false;
	btnColor = '#fff'
	showMessage(){
    
    
		alert('hello!');
	}
}

模板中的指令

Angular中最常用的指令是*ngIf和*ngFor，通过这两个指令，可以动态修改DOM结构。

在模板中使用*ngIf 指令：当showDiv的值为false时，Angular在渲染时会在DOM树种删除相关的节点。

<div *ngIf="showDiv"></div>

在模板中使用*ngFor 指令：
一般在模板中渲染一组结构相同，内容相似的节点时，使用 *ngFor 指令，该指令会根据组件类中指定的一组内容循环渲染该节点

<div *ngFor="let a of arr">{
   
   {a}}</div>

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

@Component({
    
    
	selector: 'my-angular',
	templateUrl: './my-angular.component.html',
})
export class MyAngularComponent {
    
    
	arr = [1,2,3]
}

开发中 *ngFor 和 *ngIf 指令结合使用，能灵活的修改DOM结构，创建出色的用户体验。

Angular知识整合一：Angular中的组件和一些基本概念