最好的Angular和AngularJS教程

AngularJS (versions 1.x) is a JavaScript-based open source Framework. It is cross platform and used to develop Single Page Web Applications (SPWAs). AngularJS implements the MVC pattern to separate the logic, presentation, and data components. It also uses dependency injection to make use of server-side services in client side applications.

AngularJS(版本1.x)是基于JavaScript的开源框架。 它是跨平台的，用于开发单页Web应用程序(SPWA)。 AngularJS实现了MVC模式以分离逻辑，表示和数据组件。 它还使用依赖注入来在客户端应用程序中利用服务器端服务。

Angular (versions 2.x and up) is a Typescript-based open source framework to develop front-end Web applications. Angular has features like generics, static-typing and also some ES6 features.

Angular(2.x及更高版本)是基于Typescript的开源框架，用于开发前端Web应用程序。 Angular具有泛型，静态类型化等功能，还有一些ES6功能。

We recommend learning Angular and using it for new projects. AngularJS is mainly used for legacy projects.

我们建议学习Angular并将其用于新项目。 AngularJS主要用于遗留项目。

The best way to learn Angular is with freeCodeCamp's 6-hour Angular Tutorial on YouTube.

学习Angular的最好方法是在YouTube上使用freeCodeCamp的6小时Angular教程 。

有关Angular的其他教程 (Other tutorials on Angular)

角1.x (Angular 1.x)

一般页面 (General Pages)

• Angular JS - The Angular JS Homepage

  Angular JS -Angular JS主页

• AngularJS Style Guide - Detailed best practices for Angular Development

  AngularJS样式指南 -Angular开发的详细最佳实践

影片 (Videos)

• Routing in Angular JS - Client Side Routing in 15 minutes

  在Angular JS中进行路由-15分钟内进行客户端路由

• Angular ToDo App - An Angular ToDo app in 12 minutes

  Angular ToDo App -12分钟内完成Angular ToDo应用

培训班 (Courses)

• Egghead.io AngularJS Courses ($)

  Egghead.io AngularJS课程($)

角2.x + (Angular 2.x+)

一般页面 (General Pages)

• Angular - The Angular Homepage

  Angular -Angular主页

• Angular Style Guide - Detailed best practices for Angular Development

  Angular样式指南 -Angular开发的详细最佳实践

特定主题页面 (Specific-topic Pages)

• Directives - Excellent guide going into detail on Angular Directives (Part 1)

  指令 -出色的指南，详细介绍了角度指令(第1部分)

培训班 (Courses)

• Egghead.io Angular Courses ($)

  Egghead.io角课程($)

• FrontendMasters - Building Awesomer Apps with Angular

  FrontendMasters-使用Angular构建Awesomer应用

• Ultimate Angular - Todd Motto

  终极角-托德格言

• Angular 6 (formerly Angular 2) - The Complete Guide($) Maximilian Schwarzmüller

  Angular 6(以前为Angular 2)-完整指南($)MaximilianSchwarzmüller

网志 (Blogs)

• Alligator.io

  短吻鳄

• Angular In Depth

  深度角度

版本记录 (Version History)

Google released the initial version of AngularJS on October 20, 2010. The first stable release of AngularJS was on December 18, 2017 of version 1.6.8. Angular 2.0 release took place on September 22, 2014 at the ng-Europe conference. One of the features of Angular 2.0 is dynamic loading.

Google于2010年10月20日发布了AngularJS的初始版本。AngularJS的第一个稳定版本于2017年12月18日发布了1.6.8版。 Angular 2.0发布于2014年9月22日在ng-Europe会议上举行。 Angular 2.0的功能之一是动态加载。

After some modifications, Angular 4.0 was released in December, 2016. Angular 4 is backward compatible with Angular 2.0. HttpClient library is one of the features of Angular 4.0. Angular 5 was released on November 1, 2017. Support for progressive web apps was one of the improvements in Angular 4.0. Angular 6 was released in May 2018. The latest stable version is 6.1.9

经过一些修改，Angular 4.0于2016年12月发布。Angular4向后兼容Angular 2.0。 HttpClient库是Angular 4.0的功能之一。 Angular 5于2017年11月1日发布。对渐进式Web应用程序的支持是Angular 4.0的改进之一。 Angular 6已于2018年5月发布。最新的稳定版本是6.1.9。

Install:

安装 ：

We can add Angular either by referencing the sources available or downloading the framework.

我们可以通过引用可用的源代码或下载框架来添加Angular。

Link To Source:

链接到源 ：

AngularJS: We can add AngularJS (Angular 1.x versions) by referencing the Content Delivery Network from Google.

AngularJS：我们可以通过引用Google的内容交付网络来添加AngularJS(Angular 1.x版本)。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

Download/install: We can download the framework with npm, Bower or composer.

下载/安装：我们可以使用npm，Bower或composer下载该框架。

Angular 1.x:

角1.x ：

npm

npm

npm install angular

Then add a <script> to your index.html:

然后在您的index.html添加<script> ：

<script src="/node_modules/angular/angular.js"></script>

bower

凉亭

bower install angular

Then add a <script> to your index.html:

然后在您的index.html添加<script> ：

<script src="/bower_components/angular/angular.js"></script>

For more information regarding the documentation, refer to the official site of AngularJS.

有关文档的更多信息，请参考AngularJS的官方网站。

You can install Angular 2.x and other versions by following the steps from the official documentation of Angular.

您可以通过以下从官方文档中的步骤安装角2.x和其他版本的角 。

组件 (Components)

动机 (Motivation)

Angular contains many schematics for building applications. Components are one such schematic. They encompass a single unit of logic concerned with a single part of the application. Components often partner with other schematics to operate more effectively.

Angular包含许多用于构建应用程序的示意图 。 组件就是这样一种示意图。 它们包含与应用程序的单个部分有关的单个逻辑单元。 组件通常与其他原理图配合使用以更有效地运行。

Among all schematics, components tend to consume more than they provide. While other schematics like directives, pipes, and services offer utility, components utilize. They are responsible for the application interface so it makes sense why they consume utility.

在所有原理图中，组件的功耗往往超过提供的功耗。 尽管其他示意图(例如指令，管道和服务)提供了实用程序，但组件仍在使用。 他们负责应用程序接口，因此使用它们的原因很有意义。

Components simplify the application. Funneling logic into a single section of the visible interface is their primary goal. To build applications step-by-step, you must build component-by-component. Components act as Angular’s building blocks, after all.

组件简化了应用程序。 将逻辑集中到可见界面的单个部分是他们的主要目标。 要逐步构建应用程序，必须逐组件构建。 毕竟，组件是Angular的基础。

组件介绍 (Components Introduction)

As mentioned, components consume utility (services/resources). They stand between business logic and presentation to produce a cohesive unit. Angular attaches various mechanisms to each component. These attachments identify a class as a component and define its standard capabilities.

如前所述，组件消耗实用程序(服务/资源)。 它们介于业务逻辑和表示之间，以产生一个紧密联系的单元。 Angular将各种机制附加到每个组件。 这些附件将类识别为组件并定义其标准功能。

Angular must recognize components when it comes across them. To do this, @Component must decorate every class intended to be a component. Decorators indicate to Angular what the class is.

Angular在遇到组件时必须识别它们。 为此， @Component Component必须装饰每个打算成为组件的类。 装饰器向Angular指示类是什么。

In the case of a component, it must know how to interact with its injector, connect with a template, pull from a list of styles, encapsulate its styles, and so on. Angular takes care of most of the low-level requirements. Developers still need to configure a component’s behavior, import its dependencies, and extend its logic.

对于组件，它必须知道如何与其注入器进行交互，与模板连接，从样式列表中提取样式，封装其样式等等。 Angular负责大多数底层需求。 开发人员仍然需要配置组件的行为，导入其依赖项并扩展其逻辑。

For all such things, we have the component’s class. The class keeps everything relatively uniform. It encapsulates the component’s business logic.

对于所有这些事情，我们都有组件的类。 班级保持一切相对统一。 它封装了组件的业务逻辑。

组件类和元数据 (Component Class and Metadata)

Go ahead and install the Angular command-line interface (CLI). You can learn more about it from this article. The CLI command ng generate component [name-of-component] yields the following.

继续并安装Angular命令行界面(CLI) 。 您可以从本文中了解更多信息。 CLI命令ng generate component [name-of-component]产生以下内容。

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  constructor() { }

  ngOnInit() { }
}

This is the basic skeleton from which all great components originate. The @Component decorator is the most important part. Without it, the above example becomes a generic class. Angular relies on decorators to discern a class’s schematic type.

这是所有重要组成部分的基础骨架。 @Component装饰器是最重要的部分。 没有它，上面的示例将成为通用类。 Angular依靠装饰器来识别类的示意图类型。

@Component receives metadata as a single object. Decorators are just JavaScript functions under the hood. They take in arguments as with the metadata object. The metadata object configures a component’s basic dependencies. Each fields plays a role.

@Component元数据作为单个对象接收。 装饰器只是底层JavaScript函数。 它们与元数据对象一样接受参数。 元数据对象配置组件的基本依赖关系。 每个字段都扮演一个角色。

• selector: tells Angular to associate the component with a certain element in the application’s template HTML.

  selector:告诉Angular将组件与应用程序模板HTML中的某个元素相关联。

• templateUrl: accepts the file location of the component’s template HTML (this is where data gets displayed to).

  templateUrl:接受组件模板HTML的文件位置(这是数据显示到的位置)。

• styleUrls: accepts an array of style-sheet file locations (strings). These style-sheets target the component’s assigned template.

  styleUrls:接受样式表文件位置(字符串)的数组。 这些样式表以组件的分配模板为目标。

Think of metadata as a big blob of configuration. The decorator takes it so that it can generate the data specific to the component. The decorator decorates the underlying class with data necessary for its class’s behavior. A component class that is.

将元数据视为一大堆配置。 装饰器接受它，以便它可以生成特定于组件的数据。 装饰器用其类的行为所需的数据来装饰基础类。 是一个组件类。

The class’s signature exports by default so that the component can be imported. ngOnInit also gets implemented. implements tells the class to define certain methods per the interface’s definition. ngOnInit is a lifecycle hook.

默认情况下，该类的签名会导出，以便可以导入组件。 ngOnInit也已实现。 implements告诉类根据接口的定义定义某些方法。 ngOnInit是生命周期挂钩。

组件生命周期和变更检测 (Component Lifecycle and Change Detection)

Components use all sorts of tools, services, and features. One key feature available to components is lifecycle hooks. An explanation for each hook exists in this article.

组件使用各种工具，服务和功能。 组件可用的一项关键功能是生命周期挂钩。 每个钩子的解释存在这篇文章中 。

There are eight in total and they all serve as timing functions. They execute conditionally as the component transitions from state-to-state via change detection. This process happens constantly across the component tree. It searches for changes in data which merit a re-rendering of the template.

共有八个，它们都充当计时功能。 当组件通过更改检测从状态转换为状态时，它们有条件地执行。 此过程在组件树中不断发生。 它搜索需要重新渲染模板的数据更改。

Time to move on. Please refer to the aforementioned articles for more information on the component lifecycle. It deserves much more explanation.

分手后要往前看了。 请参阅上述文章，以获取有关组件生命周期的更多信息。 它值得更多的解释。

组件数据 (Component Data)

Data drives everything. Components are no exception. Components encapsulate all their data. To receive data externally, a component must explicitly declare it. This form of privacy keeps information from clashing across the component tree.

数据驱动一切。 组件也不例外。 组件封装了所有数据。 要从外部接收数据，组件必须显式声明它。 这种隐私形式可防止信息在组件树之间冲突。

Data determines what gets displayed from the component class to its template. Any updates to the class’s data will (or at least should) update the template display.

数据确定从组件类显示到其模板的内容。 对类数据的任何更新都会(或至少应该)更新模板显示。

Components will often initialize a set of members (or variables) that store data. They are used throughout the component class logic for convenience. This information fuels the logic resulting in the template and its behavior. See the following example.

组件通常会初始化一组存储数据的成员(或变量)。 为了方便起见，在整个组件类逻辑中使用它们。 此信息助长了导致模板及其行为的逻辑。 请参见以下示例。

// ./components/example/example.component.ts

import { Component, OnInit } from '@angular/core';
import { Post, DATA } from '../../data/posts.data';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit {
  username: string;
  totalPosts: number;
  allPosts: Post[];

  deletePost(index: number): void {
    this.allPosts.splice(index, 1);
    this.totalPosts = this.allPosts.length;
  }

  ngOnInit(): void {
    this.username = DATA.author;
    this.totalPosts = DATA.thePosts.length;
    this.allPosts = DATA.thePosts;
  }
}

<!-- ./components/example/example.component.html -->

<h1>{{ username }}</h1>
<span>Change Name: </span><input [(ngModel)]="username">
<h3>Posts: {{ totalPosts }}</h3>
<ul>
<hr/>
<div *ngFor="let post of allPosts; let i=index">
  <button (click)="deletePost(i)">DELETE</button>
  <h6>{{ post.title }}</h6>
  <p>{{ post.body }}</p>
  <hr/>
</div>
</ul>

Note the ways the component interacts with its data. It first fetches it from ../../data/posts.data before it begins to forward it to the template for display.

注意组件与其数据交互的方式。 它首先从../../data/posts.data获取数据，然后才开始将其转发到模板进行显示。

The data shows up throughout the template. Inside the double curly braces, a variable’s value is mapped from the component class into the braces. The *ngFor loops across the allPosts class array. Clicking on the button removes a specific element from allPosts by its index. You can even change the topmost username by typing into the input box.

数据显示在整个模板中。 在双花括号内，变量的值从组件类映射到花括号中。 *ngFor在allPosts类数组中循环。 单击该按钮可从allPosts按其索引删除特定元素。 您甚至可以通过在输入框中键入来更改最高username 。

The above interactions alter the component class’s data which in turn updates the component’s template HTML. Components provide the backbone logic that facilitates the flow of data. The template HTML makes that data readable to the user.

上述交互会更改组件类的数据，从而更新组件的模板HTML。 组件提供了促进数据流的主干逻辑。 模板HTML使该数据对用户可读。

组件模板 (Component Template)

The previous example’s template HTML featured an interesting syntax. The syntax was not actual HTML. It was Angular’s template HTML. Some often refer to it as HTML Plus, recognizable only by Angular’s compiler. The compiler supports a syntax resulting in the dynamic manipulation of HTML. This article will often refer to it as ‘template HTML’ or ‘template’.

上一个示例的模板HTML具有有趣的语法。 该语法不是实际HTML。 这是Angular的模板HTML。 有些人通常将其称为HTML Plus，只有Angular的编译器才能识别。 编译器支持可动态处理HTML的语法。 本文通常将其称为“模板HTML”或“模板”。

The syntax lets components inject data directly into the template HTML. The injection is dynamic. This means that data can iterate and display itself as HTML without needing external assistance. The Angular compiler compiles it into real HTML by the time it reaches the web browser.

该语法使组件可以将数据直接注入模板HTML中。 注入是动态的。 这意味着数据可以迭代并以HTML形式显示，而无需外部帮助。 Angular编译器在到达Web浏览器时将其编译为真实HTML。

To learn more about some of the ways data binds to the template, read about data binding in Angular. A few examples of data binding occurred in the previous example ({{ ... }}). For this article, it is enough to recognize data interactions were happening between the component class and its template.

要了解有关数据绑定到模板的某些方式的更多信息，请阅读Angular中的数据绑定 。 上一个示例( {{ ... }} )中发生了一些数据绑定的示例。 对于本文而言，足以识别组件类及其模板之间发生的数据交互。

查询模板 (Querying the Template)

Data managing the state of the template imperatively works OK. Yet, pure data does not always fulfill an application’s intended design. Interacting more directly with the Document Object Model (DOM) may be required.

管理模板状态的数据势不可挡。 但是，纯数据并不总是能够满足应用程序的预期设计。 可能需要与文档对象模型(DOM)进行更直接的交互。

To do that, the component must have reference to the template elements. When the data changes, the component can manipulate the DOM explicitly. This is a more declarative approach.

为此，组件必须引用模板元素。 当数据更改时，组件可以显式操作DOM。 这是一种更具声明性的方法。

Components can grab references using a web browser’s DOM application programming interface (API). Bad idea though. Angular prefers cross-platform compatibility. For a component to function outside of the web browser, it needs to use Angular’s API instead of the DOM’s.

组件可以使用Web浏览器的DOM应用程序编程接口(API)来获取引用。 坏主意。 Angular倾向于跨平台兼容性。 为了使组件在Web浏览器之外运行，它需要使用Angular的API而不是DOM的API。

Components can query their templates using the @ViewChild and ContentChild decorators. They grab references to template elements on behalf of the component class.

组件可以使用@ViewChild和ContentChild装饰器查询其模板。 他们代表组件类获取对模板元素的引用。

import { Component, ViewChild, ContentChild, ElementRef, Renderer2, AfterContentChecked, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
  <button (click)="toggleEnlarge()">Toggle Enlarge</button>
  <ng-content></ng-content>
  `
})
export class ChildComponent implements AfterContentChecked {
  @ContentChild("pReference", { read: ElementRef }) pElement: ElementRef;
  textEnlarge: boolean = false;

  constructor(private renderer: Renderer2) { }

  toggleEnlarge() {
    this.textEnlarge = !this.textEnlarge;
  }

  ngAfterContentChecked() {
    if (this.textEnlarge)
      this.renderer.setStyle(this.pElement.nativeElement, 'font-size', '25px');
      else
      this.renderer.setStyle(this.pElement.nativeElement, 'font-size', 'initial');
    }
}

@Component({
  selector: 'app-parent',
  template: `
  <button (click)="toggleHighlight()">Toggle Highlight</button>
  <h1 #hOneRefereance>View Child</h1>
  <app-child>
    <p #pReference>Content Child</p>
  </app-child>
  `
})
export class ParentComponent implements AfterViewChecked {
  @ViewChild("hOneRefereance", { read: ElementRef }) hOneElement: ElementRef;
  textHighlight: boolean = false;

  constructor(private renderer: Renderer2) { }

  toggleHighlight() {
    this.textHighlight = !this.textHighlight;
  }

  ngAfterViewChecked() {
    if (this.textHighlight)
      this.renderer.setStyle(this.hOneElement.nativeElement, 'background-color', 'yellow');
    else
      this.renderer.setStyle(this.hOneElement.nativeElement, 'background-color', 'initial');
  }
}

The above example contains two buttons that toggle a certain style for each element. Clicking the buttons toggles the true/false values unique to each component. These booleans determine if the custom styles apply. Instead of these values causing changes imperatively, the lifecycle hooks (ngAfterViewChecked and ngAfterContentChecked) declaratively alter the DOM.

上面的示例包含两个按钮，用于为每个元素切换特定样式。 单击按钮可切换每个组件唯一的true / false值。 这些布尔值确定自定义样式是否适用。 生命周期挂钩( ngAfterViewChecked和ngAfterContentChecked )可以声明性地更改DOM，而不是这些值会引起强制性的更改。

The declarative approach explicitly changes the style through the element’s reference. In imperative programming, changes to the DOM based off data are implicit. Check out this article on imperative and declarative programming to learn more.

声明式方法通过元素的引用显式更改样式。 在命令式编程中，基于数据的DOM更改是隐式的。 查看有关命令式和声明式编程的本文以了解更多信息。

The main thing to notice is how these references get pulled from the template. In the example, there are two sections of the template queried using two decorators: @ViewChild and @ContentChild.

需要注意的主要事情是如何从模板中提取这些引用。 在示例中，使用两个修饰符查询模板的两个部分： @ViewChild和@ContentChild 。

They differ in where they look for an element’s reference whether it be in the content DOM or view DOM. These two DOMs exist in ParentComponent’s template. Differentiating between them is important because they finish rendering at separate times.

它们的区别在于查找元素引用的位置是在内容DOM中还是在视图DOM中。 这两个DOM存在于ParentComponent的模板中。 区分它们很重要，因为它们在不同的时间完成渲染。

This is why @ViewChild and @ContentChild both exist. They work together with their companion lifecycle hooks ngAfterViewChecked and ngAfterContentChecked. These lifecycle hooks wait for their respective queries to resolve before executing.

这就是为什么@ViewChild和@ContentChild都存在的原因。 他们与伴随的生命周期挂钩ngAfterViewChecked和ngAfterContentChecked一起工作。 这些生命周期挂钩在执行之前等待其各自的查询解决。

Once resolved, @ViewChild and @ContentChild provide references to two elements. Both exist in separate parts of the DOM. The boolean data still determines the outcome. How that outcome translates to the DOM is the key difference from before. The DOM updates viaRenderer2’s direct manipulation of it.

解决后， @ViewChild和@ContentChild提供对两个元素的引用。 两者都存在于DOM的不同部分中。 布尔数据仍然确定结果。 该结果如何转换为DOM是与以前的主要区别。 DOM通过Renderer2的直接操作进行更新。

内容投影 (Content Projection)

The content DOM exists in the innerHTML of ChildComponent’s <app-child></app-child> element. It is all positioned within ParentComponent’s template. The innerHTML of app-child projects onto ChildComponent’s template through <ng-content></ng-content>.

内容DOM存在于ChildComponent的<app-child></app-child>元素的innerHTML中。 它们全部位于ParentComponent的模板内。 app-child的innerHTML通过<ng-content></ng-content> 投射到ChildComponent的模板上。

This exemplifies content projection. Displaying content from one component to another using the innerHTML of another’s tags in one’s template so that another component can pull that innerHTML into its own template via <ng-content></ng-content>. Thank you for reading that sentence.

这例证了内容投影。 显示从内容one使用的innerHTML组件到另一个组件another的代码在one的模板，使得another部件可以拉那的innerHTML到它自己的模板通过<ng-content></ng-content> 。 谢谢您阅读那句话。

Hence why ChildComponent references its <p></p> element using @ContentChild. Content contained within <app-child></app-child> in ParentComponent’s template makes up the content DOM. ChildComponent references the element with an @ContentChild query.

因此，为什么ChildComponent引用其<p></p>使用元素@ContentChild 。 ParentComponent模板的<app-child></app-child>中包含的内容构成了内容DOM。 ChildComponent通过@ContentChild查询引用该元素。

ParentComponent’s view DOM consists of everything accessible from within the component’s view. This does not necessarily include the entire template given the innerHTML of <app-child></app-child>. Again, this part of the DOM is queried from ChildComponent using @ContentChild. Everything else gets queried using @ViewChild from the ParentComponent class.

ParentComponent的视图DOM包含可从组件视图中访问的所有内容。 给定<app-child></app-child>的innerHTML，这不一定包括整个模板。 同样，使用@ContentChild从ChildComponent查询DOM的这一部分。 使用ParentComponent类中的@ViewChild查询其他所有内容。

This is a great way for components to exchange content and query their own content regardless of their DOM type. Components can communicate with themselves and others using data binding as well. Read more about it from this article.

这是组件交换内容和查询其自身内容的好方法，而与它们的DOM类型无关。 组件也可以使用数据绑定与自己和其他人进行通信。 从本文中阅读有关它的更多信息。

组件样式 (Component Styles)

Styles are critical to a component’s readability and interactivity. Each component encapsulates its style-sheet dependencies. That way they only apply to the component’s template HTML. A special technique introduced by HTML’s shadow DOM makes this possible.

样式对于组件的可读性和交互性至关重要。 每个组件都封装了其样式表依赖性。 这样，它们仅适用于组件的模板HTML。 HTML的影子DOM引入的一种特殊技术使这成为可能。

A shadow DOM branch may exist on any element. This part of the DOM cannot be seen from the HTML’s source code. Standard HTML elements leverage the shadow DOM to provide their trademark appearances. A shadow DOM branch must anchor itself to a visible component so that it can style and customize it.

影子DOM分支可以存在于任何元素上。 从HTML的源代码中看不到DOM的这一部分。 标准HTML元素利用阴影DOM提供其商标外观。 影子DOM分支必须将其自身锚定到可见组件，以便它可以设置样式和自定义组件。

The unique aspect about a shadow DOM branch is its encapsulation. Everything used to style a shadow DOM branch’s root element is private to it. No other element can access it.

影子DOM分支的独特之处在于其封装。 用来样式化影子DOM分支的根元素的所有内容都是私有的。 没有其他元素可以访问它。

Angular embraces this form of encapsulation with components. The style-sheet and template of a component encapsulate together. No other components have access to them. Style-sheet clashes cannot occur.

Angular包含了这种用组件封装的形式。 样式表和组件模板封装在一起。 没有其他组件可以访问它们。 样式表冲突不会发生。

Angular does not use the shadow DOM by default. It uses an emulation system that mimics the behavior of the shadow DOM. This is a temporary measure since some web browsers do not yet support the shadow DOM API.

默认情况下，Angular不使用影子DOM。 它使用模拟影子DOM行为的仿真系统。 这是一种临时措施，因为某些Web浏览器尚不支持影子DOM API。

The @Component metadata contains the encapsulation field. This lets developers toggle in-between emulated shadow DOM, real shadow DOM, or neither. Here are the options in their respective order:

@Component元数据包含encapsulation字段。 这使开发人员可以在模拟的影子DOM和实际的影子DOM之间切换，也可以不在两者之间切换。 以下是各个选项的顺序：

• ViewEncapsulation.Emulated - fake shadow DOM (default)

  ViewEncapsulation.Emulated伪影DOM(默认)

• ViewEncapsulation.Native - real shadow DOM (now deprecated since Angular 6.0.8)

  ViewEncapsulation.Native真正的影子DOM(自Angular 6.0.8起不推荐使用)

• ViewEncapsulation.None - neither

  ViewEncapsulation.None都不

ViewEncapsulation.None means the component’s style-sheets elevate to the global scope. Not recommended considering components should form their own private unit (encapsulation). Angular still provides it as an escape hatch for extreme situations.

ViewEncapsulation.None表示组件的样式表提升到全局范围。 不建议考虑将组件组成自己的私有单元(封装)。 Angular仍然为极端情况提供了逃生门。

结论 (Conclusion)

Components build applications. They are privately scoped and separately uniform of each other unless configured otherwise. Applications tend to begin from the root module. Past that, components form an elongated tree defining the rest of the application.

组件构建应用程序。 除非另行配置，否则它们是私有范围的并且彼此独立统一。 应用程序倾向于从根模块开始。 除此之外，组件形成一个细长的树，定义了应用程序的其余部分。

A component covers a designated unit of the application interface. This includes its styles, logic, and layout. Other schematics such as pipes, services, and directives see frequent use in component code. You can learn more about these interactions in some of the other Angular guide articles.

组件覆盖了应用程序接口的指定单元。 这包括其样式，逻辑和布局。 其他原理图(例如管道，服务和指令)在组件代码中经常使用。 您可以在其他一些Angular指南文章中了解有关这些交互的更多信息。

Do not forget that components must bootstrap. This can happen in the root module or the component’s metadata. This is so Angular recognizes the component wherever it appears in the application.

不要忘记组件必须自举 。 这可能发生在根模块或组件的元数据中。 这样，Angular可以识别组件在应用程序中出现的任何位置。

You can always learn more, as components carry far more depth than that what this article could convey.

您总是可以学到更多，因为组件的深度远远超出了本文所传达的范围。

翻译自: https://www.freecodecamp.org/news/best-angular-tutorial-angularjs/