Angular 2中文文档：快速入门与核心特性概览

5星 · 超过95%的资源需积分: 18 131 浏览量更新于2024-07-20 12 收藏 19.23MB PDF 举报

Angular2中文文档PDF文字版是一份全面且深入的文档资源，旨在帮助开发者理解和掌握Angular 2框架。Angular 2是基于TypeScript的下一代Web应用框架，它提供了一种声明式编程模型，使得构建高效、可维护的单页应用变得容易。文档的主要部分包括： 1. **快速起步**：这是一个针对初学者的简短教程，引导用户从基础概念入手，如组件、模板、依赖注入等。它将逐步展示如何创建一个基本的Angular应用，并通过简单的步骤让用户理解Angular的核心思想和工作原理。 2. **开发指南**：为中级开发者设计，涵盖Angular的全面特性，如模块系统、指令、服务、路由、表单处理等。这部分文档深入剖析Angular的架构和实践，帮助开发者在实际项目中灵活运用框架。 3. **API参考手册**：高级开发者必备，提供Angular框架的各类类、方法和属性的详尽列表和说明，对于查找和理解Angular内部实现机制非常有用。 4. **高级文档**：这部分包含更专业的内容，如模块管理（Angular模块）、动画支持、组件样式管理，以及与Angular 1迁移相关的指导，还有诸如预编译(Ahead-of-Time Compilation)和组件交互(Coordinate Interaction)等高级主题。 5. **工具与库**：文档还介绍了Angular生态系统中的实用工具，如Angular Universal用于服务器端渲染，Augury用于性能分析，以及Codelyzer和Lite-server等开发辅助工具。 6. **烹饪宝典**：类似于实战案例或技巧集合，这里提供了丰富的示例和解决方案，帮助开发者解决实际开发中遇到的问题。通过这份文档，无论是初次接触Angular的开发者还是经验丰富的技术专家，都可以找到适合自己的学习路径，不断提升对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页未读，继续阅读

蒙奇D撸码客

粉丝: 8
资源: 4

Angular 2中文文档：快速入门与核心特性概览

Angular 2中文文档：从入门到高级开发指南

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

Angular 2+中文文档详解：从入门到高级

Angular 8实现客户端PDF简历生成器指南

pdf生成插件jspdf

pdf.js文件下载

2004-CAD快捷键.pdf

CAD快捷键及翻译.pdf

前端面试题汇总.pdf

快捷键注释快捷键注释.pdf

最新资源