Angular 2中文文档：快速入门与高级特性详解

需积分: 18 7 浏览量更新于2024-07-20 收藏 19.23MB PDF 举报

Angular2中文文档是一份全面的资源，专为理解和开发基于TypeScript的Angular框架而设计。这份文档适用于不同级别的开发者，从初学者到高级工程师都能找到所需的内容。首先，"快速起步"部分为新接触Angular的用户提供了入门教程，通过简明扼要的方式介绍Angular的基本概念，如组件（components）、模板（templates）和依赖注入（dependency injection）。这个阶段的重点在于理解Angular如何组织应用结构，以及如何创建和管理UI元素。接着，"开发指南"是针对有一定经验的开发者，深入讲解Angular的主要特性，包括但不限于模块系统（Angular Modules）、指令（directives，包括属性型指令），以及如何利用类型安全的TypeScript进行开发。此外，还有浏览器兼容性（Browser Support）和组件样式（Component Styles）的指导，确保应用在各种平台上表现良好。 "API参考手册"是高级开发者必备的部分，它详尽地列出了Angular的所有类、方法和接口，供开发者查阅和调用，以便在实际项目中灵活运用Angular的各项功能。 "高级文档"进一步细化了Angular的高级主题，比如模块化实践、动画（Animations）、组件间的交互（Component Interaction）、路径解析（Component-Relative Paths），以及预编译技术（Ahead-of-Time Compilation）。此外，还涵盖了Angular 1向2的迁移指南，帮助开发者了解新版本的迁移策略。 "烹饪宝典"（Cookbook）则是一系列实用的解决方案和示例，解决了开发过程中可能遇到的实际问题，有助于开发者解决复杂场景下的编程挑战。工具与库部分列举了与Angular集成的各种实用工具，如Angular Universal（用于服务器端渲染），Augury（一个强大的开发者工具），Celerio Angular Quickstart（简化项目初始化），Codelyzer（代码质量检查器），以及Lite-server（轻量级本地开发服务器）等，旨在优化开发流程和提升效率。 Angular2中文文档提供了一个完整的开发资源库，无论你是新手还是经验丰富的开发人员，都可以在这里找到学习、理解和实现Angular应用所需的知识和工具。

服务(Services)
Dependency injection
依赖注入(Dependency Injection)
Learn these building blocks, and you're on your way.
掌握这些构造块，我们就可以开始使用Angular 2编写应用程序了。
The code referenced on this page is available as a live example.
本章所引用的代码可以从这个在线例子。
Modules
模块模块
Angular apps are modular and Angular has its own modularity system called Angular modules or NgModules.
Angular应用是模块化的，并且Angular有自己的模块系统，它被称为Angular
模块
或NgModules。
Angular modules are a big deal. This page introduces modules; the Angular modules page covers them in depth.
Angular
模块
很重要。 这里我们只做一个简介，在Angular模块中会做深入讲解。
Every Angular app has at least one module, the root module, conventionally named AppModule .
每个Angular应用至少有一个模块（
根模块
），习惯上命名为AppModule 。
While the root module may be the only module in a small application, most apps have many more feature modules, each a cohesive block of code
dedicated to an application domain, a workflow, or a closely related set of capabilities.
根模块
在一些小型应用中可能是唯一的模块，不过大多数应用可能会有很多
特性模块
，它们由一组领域类、工作流、或紧密相关的功能聚合而成。
An Angular module, whether a root or feature, is a class with an @NgModule  decorator.
Angular模块（无论是
根
模块还是
特性模块
）都是一个带有@NgModule 装饰器的类。
Decorators are functions that modify JavaScript classes. Angular has many decorators that attach metadata to classes so that it knows what those
classes mean and how they should work. Learn more about decorators on the web.
装饰器是用来修饰JavaScript类的函数。 Angular有很多装饰器，它们负责把元数据附加到类上，以了解那些类的设计意图以及如何使用它们。 点此学习更
多知识。
NgModule  is a decorator function that takes a single metadata object whose properties describe the module. The most important properties are:
NgModule 是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：
declarations  - the view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes.
declarations （声明） - 本模块中拥有的视图类。 Angular有三种视图类：组件、指令和管道。
exports  - the subset of declarations that should be visible and usable in the component templates of other modules.
exports  - 声明（declaration）的子集，它可用于其它模块中的组件模板。
imports  - other modules whose exported classes are needed by component templates declared in this module.
imports  - 
本
模块组件模板中需要由其它模块导出的类。
providers  - creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app.
providers  - 服务的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。
bootstrap  - the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap
property.
bootstrap  - 标识出应用的主视图（被称为
根组件
），它是所有其它视图的宿主。只有
根模块
才能设置bootstrap属性。
Here's a simple root module:

下面是一个最简单的根模块：

app/app.module.ts

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

import { BrowserModule } from '@angular/platform-browser';

@NgModule({

imports: [ BrowserModule ],

providers: [ Logger ],

declarations: [ AppComponent ],

exports: [ AppComponent ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

The export of AppComponent is just to show how to export; it isn't actually necessary in this example. A root module has no reason to export anything

because other components don't need to import the root module.

AppComponent 的export 语句只是用于演示“如何导出”的，它在这个例子中并无必要。根模块不需要

导出

任何东西，因为其它组件不需要导入根模块。

Launch an application by bootstrapping its root module. During development you're likely to bootstrap the AppModule in a main.ts file like this one.

我们通过

引导

根模块来启动应用。在开发期间，我们通常在一个main.ts 文件中来引导AppModule ，就像这样：

app/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

Angular modules vs. JavaScript modules

Angular模块模块 vs. JavaScript模块模块

The Angular module — a class decorated with @NgModule — is a fundamental feature of Angular.

Angular模块（一个用@NgModule装饰的类）是Angular的基础特性。

JavaScript also has its own module system for managing collections of JavaScript objects. It's completely different and unrelated to the Angular module

system.

JavaScript还有自己的模块系统，它用来管理一组JavaScript对象。它和Angular的模块体系是完全不同而且完全无关的。

In JavaScript each file is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking

them with the export key word. Other JavaScript modules use import statements to access public objects from other modules.

在JavaScript中，每个

文件

就是一个模块，并且该文件中定义的所有对象都从属于那个模块。通过export 关键字，模块可以把它的某些对象声明为公开的。

别的JavaScript模块中可以使用import

语句

来访问这些公开对象。

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

import { AppComponent } from './app.component';

export class AppModule { }

Learn more about the JavaScript module system on the web.

可到其它网站深入学习关于JavaScript模块的知识。

These are two different and complementary module systems. Use them both to write your apps.

这两个模块化系统是互补的，我们在写程序时都会用到。

Angular libraries

模块库模块库

Angular ships as a collection of JavaScript modules. You can think of them as library modules.

Angular发布了一组JavaScript模块。我们可以把它们看做库模块。

Each Angular library name begins with the @angular prefix.

每个Angular库的名字都带有@angular 前缀。

You install them with the npm package manager and import parts of them with JavaScript import statements.

我们可以用npm包管理工具安装它们，并且用JavaScript的import 语句导入它们的某些部件。

For example, import Angular's Component decorator from the @angular/core library like this.

比如，我们从@angular/core 库中导入Component 装饰器，就像这样：

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

You also import Angular modules from Angular libraries using JavaScript import statements:

我们还使用JavaScript的导入语句从Angular

库

中导入Angular的

某些模块

。

import { BrowserModule } from '@angular/platform-browser';

In the example of the simple root module above, the application module needs material from within that BrowserModule . To access that material, add it to

the @NgModule metadata imports like this.

在上面这个关于根模块的小例子中，应用模块需要来自BrowserModule 的某些素材。要访问这些素材，我们就得把它加入@NgModule元数据的imports 中去，

就像这样：

imports: [ BrowserModule ],

In this way you're using both the Angular and JavaScript module systems together.

这种情况下，我们正在同时使用Angular和JavaScript的模块化系统。

It's easy to confuse the two systems because they share the common vocabulary of "imports" and "exports". Hang in there. The confusion yields to clarity

with time and experience.

这两个系统比较容易混淆，因为它们共享相同的词汇（“imports”和“exports”）。先放一放，随着时间和经验的增长，自然就会澄清了。

Learn more from the Angular modules page.

要了解更多，参见Angular模块页。

Components

组件组件

A component controls a patch of screen called a view.

组件

负责控制屏幕上的一小块地方，我们称之为

视图

。

For example, the following views are controlled by components:

例如，下列视图都是由组件控制的：

The app root with the navigation links.

带有导航链接的应用根组件。

The list of heroes.

英雄列表。

The hero editor.

英雄编辑器。

You define a component's application logic—what it does to support the view—inside a class. The class interacts with the view through an API of

properties and methods.

我们在类中定义组件的应用逻辑(它被用来为视图提供支持)。组件通过一些由属性和方法组成的API与视图交互。

For example, this HeroListComponent has a heroes property that returns an array of heroes that it acquires from a service. HeroListComponent also has

a selectHero() method that sets a selectedHero property when the user clicks to choose a hero from that list.

例如，HeroListComponent 有一个heroes属性，它返回一个“英雄”数组，这个数组是由一个服务提供的。HeroListComponent 还有一个selectHero() 方法，当

用户从列表中点选一个英雄时，就把它/她设置到selectedHero 属性。

app/hero-list.component.ts (class)

export class HeroListComponent implements OnInit {

heroes: Hero[];

selectedHero: Hero;

constructor(private service: HeroService) { }

ngOnInit() {

this.heroes = this.service.getHeroes();

}

selectHero(hero: Hero) { this.selectedHero = hero; }

}

Angular creates, updates, and destroys components as the user moves through the application. Your app can take action at each moment in this

lifecycle through optional lifecycle hooks, like ngOnInit() declared above.

当用户在这个应用中“移动”时，Angular会创建、更新和销毁组件。本应用可以通过生命周期钩子在组件生命周期的各个时间点上插入自己的操作，比如上面

声明的ngOnInit() 。

Templates

模板模板

You define a component's view with its companion template. A template is a form of HTML that tells Angular how to render

the component.

我们通过组件的自带的模板模板来定义视图。模板以HTML形式存在，用来告诉Angular如何渲染组件(视图)。

A template looks like regular HTML, except for a few differences. Here is a template for our HeroListComponent :

多数情况下，模板看起来很像标准HTML……当然也有一点奇怪的地方。下面是HeroListComponent 组件的一个模板。

app/hero-list.component.html

<ul>

</li>

</ul>

<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

Although this template uses typical HTML elements like <h2> and <p> , it also has some differences. Code like *ngFor , {{hero.name}} , (click) , [hero] ,

and <hero-detail> uses Angular's template syntax.

虽然这个模板使用的是典型的HTML元素，比如<h2>和<p> ，但它也能使用别的。比如*ngFor 、{{hero.name}} 、(click)、[hero] 和<hero-detail> 使用的

就是Angular的模板语法。

In the last line of the template, the <hero-detail> tag is a custom element that represents a new component, HeroDetailComponent .

在模板的最后一行，<hero-detail> 标签就是一个用来表示新组件HeroDetailComponent 的自定义元素。

The HeroDetailComponent is a different component than the HeroListComponent you've been reviewing. The HeroDetailComponent (code not shown)

presents facts about a particular hero, the hero that the user selects from the list presented by the HeroListComponent . The HeroDetailComponent is a

child of the HeroListComponent .

HeroDetailComponent 跟以前见到过的HeroListComponent 是

不同

的组件。 HeroDetailComponent (未展示代码)用于展现一个特定英雄的情况，这个英雄是用

户从HeroListComponent 列表中选择的。 HeroDetailComponent 是HeroListComponent 的

子组件

。

Notice how <hero-detail> rests comfortably among native HTML elements. Custom components mix

seamlessly with native HTML in the same layouts.

注意：<hero-detail>竟如此和谐的出现在那些原生HTML元素中。在同一个格局中，自定义组件和原生HTML融

合得天衣无缝。

Metadata

元数据元数据

Metadata tells Angular how to process a class.

元数据告诉Angular如何处理一个类。

Looking back at the code for HeroListComponent, you can see that it's just a class. There is no evidence of a framework, no "Angular" in it at all.

回头看看HeroListComponent 就会明白：它只是一个类。一点框架的痕迹也没有，里面完全没有出现"Angular"的字样。

In fact, HeroListComponent really is just a class. It's not a component until you tell Angular about it.

实际上，HeroListComponent 真的

只是一个类

。直到我们

告诉

Angular这是一个组件为止。

To tell Angular that HeroListComponent is a component, attach metadata to the class.

只要把元数据元数据附加到这个类，就相当于告诉Angular：HeroListComponent 是个组件。

In TypeScript, you attach metadata by using a decorator. Here's some metadata for HeroListComponent :

在TypeScript中，我们用装饰器装饰器 (decorator)来附加元数据。下面就是HeroListComponent的一些元数据。

app/hero-list.component.ts (metadata)

@Component({

moduleId: module.id,

selector: 'hero-list',

templateUrl: 'hero-list.component.html',

providers: [ HeroService ]

})

export class HeroListComponent implements OnInit {

/* . . . */

}

Here is the @Component decorator, which identifies the class immediately below it as a component class.

这里看到@Component装饰器(毫无悬念的)把紧随其后的类标记成了组件类。

The @Component decorator takes a required configuration object with the information Angular needs to create and present the component and its view.

@Component 装饰器能接受一个配置对象，Angular会基于这些信息创建和展示组件及其视图。

Here are a few of the possible @Component configuration options:

来看下@Component 中的一些配置项：

moduleId: module.id : sets the base for module-relative loading of the templateUrl .

moduleId : 为与模块相关的URL（如templateUrl ）提供基地址。

selector : CSS selector that tells Angular to create and insert an instance of this component where it finds a <hero-list> tag in parent HTML. For

example, if an app's HTML contains <hero-list></hero-list> , then Angular inserts an instance of the HeroListComponent view between those tags.

selector ：一个CSS选择器，它告诉Angular在

父级

HTML中寻找一个<hero-list> 标签，然后创建该组件，并插入此标签中。比如，如果应用的HTML

包含<hero-list></hero-list> ，Angular就会把HeroListComponent 的一个实例插入到这个标签中。

templateUrl : module-relative address of this component's HTML template, shown above.

templateUrl ：组件HTML模板的模块相对地址，我们在前面展示过它。

剩余670页未读，继续阅读

「已注销」

粉丝: 0
资源: 3

Angular 2中文文档：快速入门与高级特性详解

Angular 2 中文文档

Angular2中文文档 PDF文字版

angular6 中文官方文档

angular.js文档

angular2和angularjs区别

angular 学习网站

vue和angular2的区别

yarn升级angular c

如何快速的学习前端框架angular

gridster2在angular中配置

最新资源