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

angular2

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

身份认证购VIP最低享 7 折!

30元优惠券

"迈向Angular 2 + 文档"是一份全面的Angular 2及后续版本的学习资料，它为不同层次的开发者提供了详尽的指导。该文档主要包括以下几个部分： 1. **快速起步**（Quickstart）：作为一个初级指南，它为初学者介绍了Angular的核心概念，通过实践演示如何使用TypeScript构建和运行简单的Angular应用程序，帮助读者快速上手。 2. **开发指南**（Developer Guide）：面向中级开发者，深入讲解Angular的主要特性，包括但不限于组件、服务、依赖注入、模板语法等内容，旨在帮助开发者深入理解和掌握Angular的体系结构和工作原理。 3. **API参考手册**（API Reference）：高级开发者的重要参考资料，详细列出Angular的所有类、方法、接口等，为技术专家提供了查阅和调试代码的强大工具。 4. **高级文档**：这部分涵盖了一系列更专业的主题，如Angular模块（Angular Modules）、动画（Animations）、属性型指令（Attribute Directives）、浏览器支持、组件样式、迁移指南（如Angular 1 to Angular 2）、以及一些特定问题的解决方案，如模块FAQ和组件交互。 5. **烹饪宝典**（Cookbook）：提供了一组实践案例和技巧，帮助开发者解决实际开发中遇到的问题，通过实例学习更高级的主题和技术。 6. **工具与库**：列出了与Angular相关的实用工具，如Angular Universal（用于服务器端渲染）、Augury（Angular性能分析器）、Celerio Angular Quickstart（快速入门工具）、Codelyzer（代码质量检查器）和Lite-server（轻量级本地服务器）等，这些工具能提升开发效率和应用性能。 7. **Angular Universal**：允许Angular应用在服务器端运行，提升SEO和性能。 8. **Augury**：为Angular开发者提供了一种直观的方式来分析应用性能和诊断问题。这份文档是学习和深化Angular 2及后续版本理解的重要资源，无论你是新手还是经验丰富的开发者，都能从中找到适合自己的学习路径和参考资料。

资源详情

资源推荐

服务(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页未读，继续阅读

qq_15087773

粉丝: 0
资源: 2

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

《迈向Angular 2：基于TypeScript的高性能SPA框架》 PDF

oa管理系统

angular2和angularjs区别

用angular2+ts写一个可以上传文件并预览的页面

angular+ionic+swiper

yarn升级angular c

angularjs和angular的区别

angular.js文档

angular+wijmo

Angular+springboot前后端@RequestParams传参

Angular+Nodejs检测到目标站点存在javascript框架库漏洞要如何处理

angular+NodeJS架构如何实现登录时进行serectkey加密处理

vue和angular2的区别

我需要一段WebSocket+Angular+SpringBoot代码，以实现监听一条消息是否已读

angular 学习网站

React vue angular

angular+ng-zorro7.3.3 日期选择器_带有日历和日期范围

关于angular+chosen动态添加值以后trigger:update不更新值的问题

Angularjs可输入的下拉框

如何把mobiscroll-angular-5.31.2.tgz文件导入angular

最新资源