Angular五大特点

https://angular.io/guide/what-is-angular
Angular applicaitons: The essentials
This section explain the core ideas behind Angular.
Understanding these ideas can help you design and build your applicaitons more effectively.
1.Components -- 组件
Components are the building blocks that compose an application.
A component includes a TypeScript class with a @Component() decorator, an HTML template, and styles.
The @Component() decorator specifies the following Angular-specific information:
- A CSS selector that defines how the component is used in a template. HTML elementss in your
  template that match this selector become instances of the component.
- An HTML template that instructs Angular how to render the component.
- An optional set of CSS styles that define the appearance of the template's HTML elements.  

The following is a minimal Angular component.
----------------------------------------------------
import { Component } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
    `,
})
export class HelloWorldComponent {
  // The code in this class drives the component's behavior.
}
----------------------------------------------------
To use this component, you write the following in a template:
----------------------------------------------------
<hello-world></hello-world>
----------------------------------------------------
When Angular renders this component, the resulting DOM looks like this:
----------------------------------------------------
<hello-world>
  <h2>Hello World</h2>
  <p>This is my first component!</p>
</hello-world>  

----------------------------------------------------
Angular's component model offers strong encapsulation and an intuitive application structure.
Components also make your application easier to unit test and can improve the overall readability of your code.
For more information on what you can do with components, see the Components section.

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

Angular extends HTML with addtional syntax that lets you insert dynamic values from your component.
Angular automatically updates the rendered DOM when your component's state changes.
One application of this feature is inserting dynamic text, as shown in the flowing example.
----------------------------------------------------
<p>{{ message }}</p>
----------------------------------------------------
The value for message comes from the component class:
----------------------------------------------------
import { Component } from '@angular/core';

@Component ({
  selector: 'hello-world-interpolation',
  templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
  message = 'Hello, World!';
}
----------------------------------------------------
When the application loads the component and its template, the user sees the following:
<p>Hello, World!</p>
Notice the use of double curly braces -- they instuct Angular to interpolate the contents within them.
Angular also supports property bindings, to help you set values for properties and  attributes of HTML elements and pass values to your application's presentation logic.
----------------------------------------------------
<p [id]="sayHelloId" [style.color]="fontColor">You can set my color in the component!</p>
----------------------------------------------------
Notice the use of the square brackets方括号--that syntax indicates that you're binding the property or attribute to a value in the component class.

You can also declare event listeners to listen for and respond to user actions such as keystrokes,mouse movements, clicks, and touches.
You declare an event listener by specifying the event name in parentheses: 圆括号
----------------------------------------------------
<button (click)="sayMessage()" [disabled]="canClick">Trigger alert message</button>
----------------------------------------------------
The preceding example calls a method, which is defined in the component class:
----------------------------------------------------
sayMessage() {
  alert(this.message);
}
----------------------------------------------------
The following is an example of interpolation and bindings within an Angular template:
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);
  }
}
hello-world-bindings.component.ts-------------------
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>
hello-world-bindings.component.html-------------------

You can add additional functionality to your templates through the use of directives.
The most popular directives in Angular are *ngIf and *ngFor.
You can use directives to perform a variety of tasks, such as dynamically modifying the DOM structure.
And you can also create your own custom directives to create great user experiences.

The following code is an example of the *ngIf directive.
hello-world-ngif.component.ts-------------------
import { Component } from '@angular/core';

@Component({
  selector: 'hello-world-ngif',
  templateUrl: './hello-world-ngif.component.html'
})
export class HelloWorldNgIfComponent {
  message = 'I/' m read only!';
  canEdit = false;
  
  onEditClick() {
    this.canEdit = !this.canEdit;
    if(this.canEdit) {
      this.message = 'You can edit me!';
    } else {
      this.message = 'I \' m read only!';
    }
  }
}

hello-world-ngif.component.ts-------------------
hello-world-ngif.component.html-------------------

<h2>Hello World: ngIf! </h2>
<button (click)="onEditClick()">Make text editable!</button>
<div *ngIf="canEdit; else noEidt">
  <p>You can edit the following paragraph.</p>
</div>
<ng-template #noEidt>
  <p>The following paragraph is read only. Try clicking the button!</p>
<ng-template>
<p [contentEditabl]="canEdit">{{ message }}</p>

hello-world-ngif.component.html-------------------

Angular's declarative templates allow you to cleanly separate your application's logic from its presentation. 
Templates are based on standard HTML, so they're easy to build, maintain, and update.
For more information on what you can do with teplates, see the Templates section.

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

This design pattern allows you to write more testable and flexible code.
Even though understanding dependency injection is not critical to start using Angular, we strongly recommend it as a best practice and many aspects of Angular take adavantage of it to some degree.

To illustrate how dependency injection works, consider the following example.
The first file, logger.service.ts, define a Logger class. This class contains a writeCount function that logs a number to the console.
---------------------------
import { Injectalbe } from '@angular/core '

@Injectable({providedIn: 'root'})
export class Logger {
  writeCount(count: number) {
    console.warn(count);
  }
}
---------------------------
Next, the hello-world-di.component.ts file defines an Angular component.
This component contains a button that uses the writeCount function of the Logger class.
To access that function, the Logger service is injected into the HelloWorldDI class by adding private logger: Logger to the constructor.
---------------------------
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;
  constructor(private logger: Logger) {  //构造注入法
  
  }
  
  onLogMe() {
    this.logger.writeCount(this.count);
    this.count++;
  }
}

---------------------------
For more information about dependency injection and Angular, see the Dependency injection in Angular section.

4. Angular CLI
The Angular CLI is the fastest, easiest, and recommended way to develop Angular applications.
The Angular CLI makes a number of tasks easy. Here are some examples:
-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 test: Runs unit tests on a given project.
-ng e2e: Builds and serves an Angular application, then runs end-to-end tests.

You'll find the Angular CLI a valuable tool for building out your applications.
For more information about the Angular CLI, see the CLI Reference section.

5. Firt-party libraries
The section, Angular applications: The essentials,provides a brief overview of a couple of the key architectural elements you'll use when building Angular applications.
But the many benefits of Angular really become apparent when your application grows and you want to add additional fucntions such as site navigation or user input.
That's when you can leverage the Angular platform to incorporate one of the many firt-party libraries that Angular provides.

Some of the libraries available to you include:
-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 Application(PWAs) including a service worker Web app manifest.
-Angular Schematics: Automated caffolding, refactoring, and update tools that simplify development at large scale.
  
These libraries expand your application's functionality while also allowing you to focus more on the features that make your application unique.
And you can add these libraries knowing that they're designed to integarte seamlessly into and update simultaneously with the Angular framework.

These libraries are only required if and when they can help you add functionality to your applications or solve a particular problem.