Angular的使用

最新版本：^12.0.0
在线教程：Angular - Tour of Heroes app and tutorial
中文教程：Angular - Angular 入门
版本说明：Angular - Angular versioning and releases

1. Angular是什么？

官方文档：

Angular is a development platform, built on TypeScript. As a platform, Angular includes:
● A component-based framework for building scalable web applications
● A collection of well-integrated libraries that cover a wide variety of features, including routing, forms management, client-server communication, and more
● A suite of developer tools to help you develop, build, test, and update your code

Angular包含了几个比较重要的概念。

1.1. 组件-Component

其中最重要的概念是Component。我使用后感觉是，这个框架给前端开发带来了很多便利性，只需要往框架里面填充内容即可。使得前端开发，更加精细化。不再是将所有内容（html, js, css）参杂在一起，从头写到尾。通过组件，也增强了代码的复用性。

1.2. 模块-Module

将多个component组合到一起，就构成了一个模块了。
Ng工程的根module是：app-module。
根Component是：app-component。

1.3. 模板-Template

Every component has an HTML template that declares how that component renders. You define this template either inline or by file path.

▼ 模板类似于（文件名： hello-world-bindings.component.html）：

<button (click)="sayMessage()" [disabled]="canClick">Trigger alert message</button>
<p [id]="sayHelloId" [style.color]="fontColor">You can set my color in the component!</p>
<p>My color is {{ fontColor }}</p>

中括号的语法，表示后面的变量，是Component的class中的成员变量。

▼ js类文件名：hello-world-bindings.component.ts

import { Component } from '@angular/core';
 
@Component ({
  selector: 'hello-world-bindings',
  templateUrl: './hello-world-bindings.component.html'
})
export class HelloWorldBindingsComponent {
    fontColor = 'blue';
    sayHelloId = 1;
    canClick = false;
    message = 'Hello, World';
    sayMessage() {
        alert(this.message);
    }
}

1.4. 依赖注入- DI

Dependency injection lets you declare the dependencies of your TypeScript classes without taking care of their instantiation. Instead, Angular handles the instantiation for you.

▼ service文件名：logger.service.ts

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

@Injectable({providedIn: 'root'})
export class Logger {
  writeCount(count: number) {
    console.warn(count);
  }
}

▼ 组件js: hello-world-di.component.ts

import { Component } from '@angular/core';
import { Logger } from '../logger.service';

@Component({
  selector: 'hello-world-di',
  templateUrl: './hello-world-di.component.html'
})
export class HelloWorldDependencyInjectionComponent  {
  count = 0;

  // 在构造器中直接声明ogger, Angular自动实例化并注入它
  constructor(private logger: Logger) { 
  }

  onLogMe() {
    this.logger.writeCount(this.count);
    this.count++;
  }
}

2. Angular CLI

The Angular CLI is the fastest, straightforward, and recommended way to develop Angular applications. The Angular CLI makes a number of tasks trouble-free.
包含以下常用命令：

命令	作用
ng build	Compiles an Angular app into an output directory.
ng serve	Builds and serves your application, rebuilding on file changes.
ng generate	Generates or modifies files based on a schematic.
ng generate service XXX	给工程新建一个service，名字是XXX。缩写: ng g s XXX
ng generate component YYY	给工程新建一个component，名字是YYY。缩写： ng g cYYY

3. Typescript语法

4. 核心类库

类	作用
Angular Router	Advanced client-side navigation and routing based on Angular components. Supports lazy-loading, nested routes, custom path matching, and more.
Angular Forms	Uniform system for form participation and validation.
Angular HttpClient	Robust HTTP client that can power more advanced client-server communication.
Angular Animations	Rich system for driving animations based on application state.
Angular PWA	Tools for building Progressive Web Applications (PWAs) including a service worker and Web app manifest.
Angular Schematics	Automated scaffolding, refactoring, and update tools that simplify development at large scale.

4.1. 路由 - Angular Router

文档： Angular - Common Routing Tasks
在工程中使用AppRoutingModule类，使用如下CLI命令： ng new routing-app --routing