What is Angular?
Angular is a TypeScriptbuild-based development platform that consists of three parts:
- a component-based library
- A set of libraries covering various function inheritance such as routing, form management, client-server communication, etc.
- A set of tools for developing, building, testing, and updating code
Knowledge points in Angular
what is a component
1. In Angular, components are the elements that make up the application.
2. The component consists of three parts: @Component()TypeScript class with decorator, HTML template and style file
The following code is a minimized Angular component. The @Component() decorator in the seven will specify three angular-specific information:
- CSS selector, when using this component elsewhere, use selector
- HTML template that defines the structure of the current component
- A set of CSS styles used to define the style of the current component HTML template
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!');
}
When using the my-angular component in other templates, introduce the component through the selector value
<my-angular></my-angular>
When Angular renders this component, the resulting DOM looks like this:
<my-angular>
<h1>自定义我的angular组件</h1>
</my-angular>
what is a template
templateThe component's HTML template is used to declare the rendering method of the component, which can be used inline or templateUrlimported in the @Component() decorator
Use interpolation in the template
In Angular's template file, 双花括号dynamic values can be inserted into component templates by:
<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!'
}
As shown above, in the HTML file, textthe value in double curly braces comes from the corresponding component class.
What the user actually sees after Angular finishes rendering <h1>this is my angular!</h1>.
When the value of text in the component class changes, Angular will automatically update the rendered DMO in the template. In this way, we can use this template syntax to insert dynamic text in the page during development.
Using attribute binding in templates
In the Angular template file, use 方括号the method to bind the value of Property and Attribute, and use 圆括号the specified event name to declare the time listener:
<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!');
}
}
directives in templates
The most commonly used directives in Angular are *ngIfand *ngFor, through which the DOM structure can be dynamically modified.
Use the *ngIf directive in the template: When the value of showDiv is false, Angular will delete the related node in the DOM tree when rendering.
<div *ngIf="showDiv"></div>
Use the *ngFor directive in the template:
Generally, when rendering a group 结构相同，内容相似of nodes in the template, use the *ngFor directive, which will render the node in a loop according to a set of content specified in the component class
<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]
}
During development, the *ngFor and *ngIf directives are combined to modify the DOM structure flexibly and create an excellent user experience.