flask框架視圖和路由

Angular vs AngularJS (Angular vs AngularJS)

AngularJS (versions 1.x) is a JavaScript-based open source framework. It is cross platform and is used to develop Single Page Web Application (SPWA).

AngularJS(版本1.x)是一個基于JavaScript的開源框架。它是跨平臺的，用于開發單頁Web應用程序(SPWA)。

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實現了MVC模式以分離邏輯，表示和數據組件。它還使用依賴注入來在客戶端應用程序中利用服務器端服務。

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

Angular(2.x及更高版本)是基于Typescript的開源框架，用于開發前端Web應用程序。 Angular具有以下功能，例如泛型，靜態鍵入，動態加載以及某些ES6功能。

版本記錄 (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.

Google于2010年10月20日發布了AngularJS的初始版本。 AngularJS的第一個穩定版本于1.6.8版于2017年12月18日發布。

The Angular 2.0 release took place on September 22 2014 at the ng-Europe conference.

Angular 2.0版本于2014年9月22日在ng-Europe會議上發布。

After some modifications, Angular 4.0 was released in December 2016. Angular 4 is backward compatible with Angular 2.0. The HttpClient library is one of the new features of Angular 4.0.

經過一些修改，Angular 4.0于2016年12月發布。Angular4向后兼容Angular 2.0。 HttpClient庫是Angular 4.0的新功能之一。

Angular 5 release was on November 1, 2017. Support for progressive web apps (PWAs) ?was one of the improvements to Angular 4.0.

Angular 5發布于2017年11月1日。對漸進式Web應用程序(PWA)的支持是對Angular 4.0的改進之一。

And finally, Angular 6 was released in May 2018. The latest stable version is 6.1.9

最后，Angular 6于2018年5月發布。最新的穩定版本是6.1.9。

如何安裝 (How to install it)

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下載框架

AngularJS 1.x:

Angular JS 1.x ：

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>

Angular:

角度：

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和其他版本的角。

Now let's learn a bit more about Angular, shall we?

現在讓我們進一步了解Angular，可以嗎？

介紹 (Introduction)

Views offer a necessary layer of abstraction. They keep Angular independent of platform specific utilities. As a cross-platform technology, Angular uses its views to connect with the platform.

視圖提供了必要的抽象層。它們使Angular獨立于特定于平臺的實用程序。作為一種跨平臺技術，Angular使用其視圖來連接平臺。

For every element in Angular’s template HTML, there is a corresponding view. Angular recommends interacting with the platforms through these views. While direct manipulation is still possible, Angular warns against it. Angular offers its own application programming interface (API) to replace the native manipulations.

對于Angular模板HTML中的每個元素，都有一個對應的視圖。 Angular建議通過這些視圖與平臺進行交互。盡管仍然可以進行直接操縱，但Angular警告它。 Angular提供了自己的應用程序編程接口(API)來代替本地操作。

Shunning views for platform-specific API has its consequences. When developing Angular in a web browser, elements exist in two places: the DOM and the view. Messing only with the DOM does not impact the view.

特定于平臺的API的回避視圖會產生后果。在Web瀏覽器中開發Angular時，元素存在于兩個位置：DOM和視圖。僅使用DOM不會影響視圖。

Since Angular does not interface with the platform, this creates a discontinuity. Views should mirror the platform one-to-one. Otherwise Angular wastes resources managing elements that mismatch it. This is terrible in the event of deleted elements.

由于Angular不與平臺交互，因此會造成不連續。視圖應該一對一地反映平臺。否則，Angular會浪費與之不匹配的資源管理元素。在刪除元素的情況下，這很糟糕。

These sorts of discrepancies make views appear unnecessary. Never forget that Angular is a universal development platform above all. Views are a necessary abstraction for this end.

這些差異使視圖顯得不必要。永遠不要忘記Angular首先是一個通用的開發平臺。為此，視圖是必要的抽象。

By adhering to views, Angular applications will function across all supported development platforms. Platforms include the Web, Android, and Apple iOS.

通過遵循視圖，Angular應用程序將在所有受支持的開發平臺上運行。平臺包括Web，Android和Apple iOS。

注意 (Note)

From here-on, this article assumes a web browser environment. Feel free to mentally replace the DOM with something more applicable to your preferred platform.

從現在開始，本文假設使用Web瀏覽器環境。隨意用更適合您喜歡的平臺的東西替換DOM。

什么是視圖？ (What are Views?)

Views are almost like their own virtual DOM. Each view contains a reference to a corresponding section of the DOM. Inside a view are nodes that mirror what is in the this section. Angular assigns one view node per DOM element. Each node holds a reference to a matching element.

視圖幾乎就像它們自己的虛擬DOM。每個視圖都包含對DOM相應部分的引用。視圖內部是反映本節內容的節點。 Angular為每個DOM元素分配一個視圖節點。每個節點都有對匹配元素的引用。

When Angular checks for changes, it checks the views. Angular avoids the DOM under the hood. The views reference the DOM on its behalf. Other mechanisms are in place to ensure that view changes render to the DOM. Conversely, changes to the DOM do not affect the views.

Angular檢查更改時，將檢查視圖。 Angular避免了幕后的DOM。視圖代表DOM引用DOM。還有其他機制可以確保視圖更改呈現給DOM。相反，對DOM的更改不會影響視圖。

Again, views are common across all development platforms besides the DOM. Even if developing for one platform, views are still considered best practice. They guarantee Angular has a correct interpretation of the DOM.

同樣，視圖在DOM之外的所有開發平臺上都是通用的。即使為一個平臺開發，視圖仍然被認為是最佳實踐。它們保證Angular對DOM有正確的解釋。

Views may not exist on third-party libraries. Direct DOM manipulation is an escape hatch for this kind of scenario. Granted, do not expect the application to function cross-platform.

第三方庫上可能不存在視圖。對于這種情況，直接DOM操作是一種逃生方法。當然，不要期望應用程序可以跨平臺運行。

視圖類型 (Types of Views)

There are two main types of views: embedded and host.

視圖有兩種主要類型：嵌入式視圖和主機視圖。

There also exists view containers. They hold embedded and host views and are often referred to as simple “views”.

還存在視圖容器。它們具有嵌入式和宿主視圖，通常稱為簡單“視圖”。

Every @Component class registers a view container (view) with Angular. New components generate a custom selector targeting a certain DOM element. The view attaches to that element wherever it appears. Angular now knows the component exists looking at the view model.

每個@Component類都向Angular注冊一個視圖容器(視圖)。新組件會生成針對某個DOM元素的自定義選擇器。該視圖無論出現在何處都將附加到該元素。現在，Angular通過查看視圖模型知道組件存在。

Host views attach to components created dynamically with factories. Factories provide a blueprint for view instantiation. That way the application can instantiate the component’s host view during runtime. A host view attaches to a component’s wrapper per its instantiation. This view stores data describing conventional component capabilities.

主機視圖將附加到使用工廠動態創建的組件。工廠提供了視圖實例化的藍圖。這樣，應用程序可以在運行時實例化組件的主機視圖。主機視圖根據其實例化附加到組件的包裝器。此視圖存儲描述常規組件功能的數據。

<ng-template></ng-template> is a akin to the HTML5 <template></template> element. Angular’s ng-template works with embedded views. These views do not attach to DOM elements unlike host views. They are identical to host views in that they both types exist inside of view containers.

<ng-template></ng-template>類似于HTML5 <template></template>元素。 Angular的ng-template適用于嵌入式視圖。與宿主視圖不同，這些視圖不會附加到DOM元素。它們與主機視圖相同，因為它們都存在于視圖容器內部。

Keep in mind, ng-template is not a DOM element. It gets commented out later leaving nothing but the embedded view nodes behind.

請記住， ng-template不是DOM元素。稍后將其注釋掉，只剩下嵌入式視圖節點。

The difference depends on input data; embedded views store no component data. They store a series of elements as nodes comprising its template. The template makes up all the innerHTML of ng-template. Each element within the embedded view is its own separate view node.

差異取決于輸入數據。嵌入式視圖不存儲任何組件數據。它們將一系列元素存儲為組成其模板的節點。模板構成了ng-template所有innerHTML。嵌入式視圖中的每個元素都是其自己單獨的視圖節點。

主機視圖和容器 (Host Views and Containers)

Host views host dynamic components. View containers (views) attach automatically to elements already in the template. Views can attach to any element beyond what is unique to component classes.

主機視圖承載動態組件。視圖容器(視圖)自動附加到模板中已存在的元素。視圖可以附加到任何組件類之外的元素。

Think of the traditional method of component generation. It begins by creating a class, decorating it with @Component, and filling in metadata. This approach occurs for any pre-defined component element of the template.

想想傳統的組件生成方法。首先創建一個類，用@Component裝飾它，然后填充元數據。對于模板的任何預定義組件元素，都會發生這種方法。

Try using the Angular command-line interface (CLI) command: ng generate component [name-of-component]. It yields the following.

嘗試使用Angular命令行界面(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 creates the component with the selector app-example. This attaches a view container to <app-example></app-example> in the template. If this were the root of the application, its view would encapsulate all other views. The root view marks the beginning of the application from Angular’s perspective.

這將使用選擇器app-example創建組件。這會將視圖容器附加到模板中的<app-example></app-example> 。如果這是應用程序的根，則其視圖將封裝所有其他視圖。從Angular的角度來看，根視圖標志著應用程序的開始。

Creating components dynamically and registering them in the Angular view model takes a few extra steps. Structural directives help manage dynamic content (*ngIf, *ngFor, and *ngSwitch…). Directives do not scale to bigger applications however. Too many structural directives complicates the template.

動態創建組件并將其注冊到Angular視圖模型中需要花費一些額外的步驟。結構化指令有助于管理動態內容( *ngIf, *ngFor, and *ngSwitch… )。但是，指令無法擴展到更大的應用程序。太多的結構指令使模板復雜化。

This is where instantiating components from existing class logic comes in handy. These components need to create a host view that can insert into the view model. Host views holds data for components so that Angular recognizes their structural purpose.

這是從現有類邏輯實例化組件的地方。這些組件需要創建一個可以插入視圖模型的宿主視圖。宿主視圖保存組件的數據，以便Angular識別其結構目的。

主機視圖續 (Host Views Continued)

Every component has a class definition. Yet JavaScript does not support classes. Classes are syntactic sugar. They produce functions containing component factories instead.

每個組件都有一個類定義。但是JavaScript不支持類。類是語法糖。它們產生包含組件工廠的函數。

Factories act as blueprints for host views. They build views to interface with Angular on behalf of their components. Host views attach to DOM elements. Technically any element is OK but the most common target is <ng-component></ng-component>.

工廠充當主機視圖的藍圖。他們構建視圖以代表其組件與Angular交互。主機視圖附加到DOM元素。從技術上講，任何元素都可以，但最常見的目標是<ng-component></ng-component> 。

A view container (view) for holding views must first exist. <ng-container></ng-container> is a great place to attach a view container. View containers are the same type of views that also apply to template class elements.

首先必須存在用于保存視圖的視圖容器(視圖)。 <ng-container></ng-container>是附加視圖容器的好地方。視圖容器是與視圖類型相同的視圖，也適用于模板類元素。

A few helpers and references from @angular/core provide the other needed utilities. The following example puts it all together.

@angular/core一些幫助程序和參考提供了其他所需的實用程序。以下示例將所有內容放在一起。

// another.component.tsimport { Component } from '@angular/core';@Component({template: `<h1>Another Component Content</h1><h3>Dynamically Generated!</h3>`
})
export class AnotherComponent { }

// example.component.tsimport { AfterViewInit, Component, ViewChild,
ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { AnotherComponent } from './another.component';@Component({selector: 'app-example',template: `<h1>Application Content</h1><ng-container #container></ng-container><h3>End of Application</h3>`,entryComponents: [ AnotherComponent ]
})
export class ExampleComponent implements AfterViewInit {@ViewChild("container", { read: ViewContainerRef }) ctr: ViewContainerRef;constructor(private resolve: ComponentFactoryResolver) { }ngAfterViewInit() {const factory = this.resolve.resolveComponentFactory(AnotherComponent);this.ctr.createComponent(factory);}
}

Assume AnotherComponent and ExampleComponent are both declared under the same module. AnotherComponent is a simple class component dynamically added into ExampleComponent’s view. ExampleComponent’s entryComponents metadata must contain AnotherComponent for bootstrapping.

假設AnotherComponent和ExampleComponent都在同一模塊下聲明。 AnotherComponent是一個動態添加到ExampleComponent的視圖中的簡單類組件。 ExampleComponent的entryComponents元數據必須包含用于引導的 AnotherComponent。

While ExampleComponent is a part of the template, AnotherComponent remains detached. It dynamically renders into the template from ExampleComponent.

雖然ExampleComponent是模板的一部分，但是AnotherComponent仍然是分離的。它從ExampleComponent動態地渲染到模板中。

There are two view containers present: <app-example></app-example> and <ng-container></ng-container>. The host view for this example will insert into ng-container.

存在兩個視圖容器： <app-example></app-example>和<ng-container></ng-container> 。此示例的宿主視圖將插入ng-container 。

The AfterViewInit lifecycle hook fires after the @ViewChild queries complete. Using the template reference variable #container, the @ViewChild references ng-container as ctr.

@ViewChild查詢完成后，將觸發AfterViewInit生命周期掛鉤。使用模板引用變量 #container @ViewChild ， @ViewChild將ng-container引用為ctr 。

ViewContainerRef is the type of reference for view containers (views). ViewContainerRef references a view that supports the insertion of other views. ViewContainerRef contains more methods for managing its contained views.

ViewContainerRef是視圖容器(視圖)的引用類型。 ViewContainerRef引用一個支持其他視圖插入的視圖。 ViewContainerRef包含更多方法來管理其包含的視圖。

Through dependency injection, the constructor instantiates an instance of Angular’s ComponentFactoryResolver service. This service extracts the the factory function (host view blueprint) of AnotherComponent.

通過依賴注入，構造函數實例化Angular的ComponentFactoryResolver服務的實例。此服務提取AnotherComponent的工廠功能(主機視圖藍圖)。

The single argument of createComponent requires a factory. The createComponent function derives from ViewContainerRef. It instantiates AnotherComponent under a host view derived from the component’s factory.

createComponent的單個參數需要一個工廠。 createComponent函數從ViewContainerRef派生。它在派生自組件工廠的主機視圖下實例化AnotherComponent。

The host view then inserts into the view container. <ng-component></ng-component> wraps the component inside of the view container. It has attached to it the aforementioned host view. ng-component is the host view’s connection with the DOM.

然后，宿主視圖將插入到視圖容器中。 <ng-component></ng-component>將組件包裝在視圖容器內部。它已附加上述主機視圖。 ng-component是主機視圖與DOM的連接。

There are other ways create a host view dynamically from a component. Other ways often focus on optimization.

還有其他方法可以從組件動態創建主機視圖。其他方法通常專注于優化。

The ViewContainerRef holds a powerful API. It can manage any number of views either host or embedded within its view. The API includes view operations such as insert, move, and delete. This lets you manipulate the DOM through Angular’s view model. This is best practice so that Angular and the DOM match each other.

ViewContainerRef擁有強大的API。它可以管理宿主視圖或嵌入在其視圖中的任意數量的視圖。該API包括視圖操作，例如插入，移動和刪除。這使您可以通過Angular的視圖模型來操作DOM。最佳做法是使Angular和DOM相互匹配。

嵌入式視圖 (Embedded Views)

Note: embedded views attach to other views no added input. Host views attach to a DOM element with input data from its host view describing it as a component.

注意：嵌入式視圖附加到其他視圖，沒有添加輸入。主機視圖附加到DOM元素，并帶有來自其主機視圖的輸入數據，將其描述為組件。

Structural directives create an ng-template surrounding a chunk of HTML content. The directive’s host element has a view container attached. This make it so that the content can conditionally render into its intended layout.

結構化指令會在大量HTML內容周圍創建一個ng-template 。指令的host元素具有連接的視圖容器。這樣可以使內容可以有條件地呈現為其預期的布局。

The ng-template holds embedded view nodes representing each element within its innerHTML. ng-template is by no means a DOM element. It comments itself out. The tags define the extend of its embedded view.

ng-template包含表示其innerHTML中每個元素的嵌入式視圖節點。 ng-template絕不是DOM元素。它自行注釋掉。標簽定義其嵌入式視圖的擴展。

嵌入式視圖續 (Embedded Views Continued)

Instantiating an embedded view requires no external resources beyond its own reference. The @ViewChild query can fetch that.

實例化嵌入式視圖不需要其引用之外的任何外部資源。 @ViewChild查詢可以獲取該信息。

With the template reference, calling createEmbeddedView from it does the trick. The innerHTML of the reference becomes its own embedded view instance.

使用模板引用，從中調用createEmbeddedView可以解決問題。引用的innerHTML成為其自己的嵌入式視圖實例。

In the next example, <ng-container></ng-container> is a view container. ng-container gets commented out during compilation just like ng-template. Thus it provides an outlet for inserting the embedded view while keeping the DOM lean.

在下一個示例中， <ng-container></ng-container>是一個視圖容器。 ng-container就像ng-template一樣在編譯過程ng-container被注釋掉。因此，它提供了用于在保持DOM精簡的同時插入嵌入式視圖的出口。

The embedded view template inserts at the layout location of ng-container. This newly inserted view has no additional view encapsulation besides the view container. Remember how that differs from host views (host views attach to their ng-component element wrapper).

嵌入式視圖模板將插入ng-container的布局位置。這個新插入的視圖除視圖容器外沒有其他視圖封裝。記住與主機視圖有何不同(主機視圖附加到其ng-component元素包裝器)。

import { Component, AfterViewInit, ViewChild,
ViewContainerRef, TemplateRef } from '@angular/core';@Component({selector: 'app-example',template: `<h1>Application Content</h1><ng-container #container></ng-container> <!-- embed view here --><h3>End of Application</h3><ng-template #template><h1>Template Content</h1><h3>Dynamically Generated!</h3></ng-template>`
})
export class ExampleComponent implements AfterViewInit {@ViewChild("template", { read: TemplateRef }) tpl: TemplateRef<any>;@ViewChild("container", { read: ViewContainerRef }) ctr: ViewContainerRef;constructor() { }ngAfterViewInit() {const view =  this.tpl.createEmbeddedView(null);this.ctr.insert(view);}
}

@ViewChild queries for the template reference variable #template. This provides a template reference of type TemplateRef. TemplateRef holds the createEmbeddedView function. It instantiates the template as an embedded view.

@ViewChild查詢模板引用變量 #template 。這提供類型的模板參考TemplateRef 。 TemplateRef擁有createEmbeddedView函數。它將模板實例化為嵌入式視圖。

The single argument of createEmbeddedView is for context. If you wanted to pass in additional metadata, you could do it here as an object. The fields should match up with the ng-template attributes (let-[context-field-key-name]=“value”). Passing null indicates no extra metadata is necessary.

createEmbeddedView的單個參數用于上下文。如果您想傳遞其他元數據，則可以在此處作為對象來進行傳遞。這些字段應與ng-template屬性匹配( let-[context-field-key-name]=“value” )。傳遞null表示不需要額外的元數據。

A second @ViewChild query provides a reference to ng-container as a ViewContainerRef. Embedded views only attach to other views, never the DOM. The ViewContainerRef references the view that takes in the embedded view.

第二個@ViewChild查詢提供對ng-container的引用作為ViewContainerRef 。嵌入式視圖僅附加到其他視圖，而不附加到DOM。 ViewContainerRef引用嵌入視圖中的視圖。

An embedded view may also insert into the component view of <app-example></app-example>. This approach positions the view at the very end of ExampleComponent’s view. In this example however, we want the content to show up in the very middle where ng-container sits.

嵌入式視圖也可以插入<app-example></app-example>的組件視圖中。這種方法將視圖放置在ExampleComponent視圖的最末端。但是，在此示例中，我們希望內容顯示在ng-container所在的中間位置。

The ViewContainerRef insert function inserts the embedded view into the ng-container. The view content shows ups in the intended location right in the middle of ExampleComponent’s view.

ViewContainerRef insert函數將嵌入的視圖插入ng-container 。視圖內容將顯示在ExampleComponent視圖中間的預期位置。

結論 (Conclusion)

Manipulating the DOM with platform specific methods is not recommended. Creating and managing a tight set of views keeps Angular and the DOM on the same page. Updating the views informs Angular of the current state of the DOM. Updates to the views also carry over into what the DOM displays.

不建議使用平臺特定的方法來操作DOM。創建和管理一組緊密的視圖會使Angular和DOM保持在同一頁面上。更新視圖會通知Angular DOM當前狀態。對視圖的更新也會保留到DOM顯示的內容中。

Angular provides a flexible API for view interaction. Developing platform independent applications is possible thanks to this level of abstraction. Of course, the temptation to fallback on platform dependent strategies persists. Unless you have a very good reason not to, try to stick with the views API Angular provides. This will yield predictable results across all platforms.

Angular為視圖交互提供了一個靈活的API。由于這種抽象水平，開發與平臺無關的應用程序成為可能。當然，回退依賴于平臺的策略的誘惑仍然存在。除非您有很好的理由不這樣做，否則請嘗試使用API?? Angular提供的視圖。這將在所有平臺上產生可預測的結果。

角度布線 (Routing in Angular)

Routing is essential. Many modern web applications host too much information for one page. Users should not have to scroll through an entire application’s worth of content either. An application needs to split itself into distinguishable sections.

路由至關重要。許多現代的Web應用程序為一頁承載太多信息。用戶也不必滾動瀏覽整個應用程序的內容。應用程序需要將自身拆分為不同的部分。

Users prioritize necessary information. Routing helps them find the application section with such information. Any other information useful to other users may exist on an entirely separate route. With routing, both users can find what they need quickly. Irrelevant details stay obscured behind irrelevant routes.

用戶優先考慮必要的信息。路由幫助他們找到帶有此類信息的應用程序部分。對其他用戶有用的任何其他信息都可以存在于完全獨立的路徑上。通過路由，兩個用戶都可以快速找到他們需要的東西。不相關的細節在不相關的路線后面被遮蓋。

Routing excels at sorting and restricting access to application data. Sensitive data should never display to unauthorized users. Between every route the application may intervene. It can examine a user’s session for authentication purposes. This examination determines what the route renders if it should render at all. Routing gives developers the perfect chance to verify a user before proceeding.

路由擅長于排序和限制對應用程序數據的訪問。敏感數據絕不能顯示給未經授權的用戶。在每條路線之間，應用程序都可能會介入。它可以檢查用戶的會話以進行身份??驗證。該檢查確定路線是否應該渲染。路由為開發人員提供了在繼續操作之前驗證用戶的絕佳機會。

Creating a list of routes promotes organization as well. In terms of development, it keeps the developer thinking in distinguishable sections. Users benefit from this too, but more-so developers when navigating the application code. A list of programmatic routers paints an accurate model of the application’s front end.

創建路由列表也可以促進組織。在開發方面，它使開發人員可以在可區分的部分中進行思考。用戶也從中受益，但是開發人員在瀏覽應用程序代碼時也會從中受益。一系列編程路由器描繪了應用程序前端的準確模型。

As for Angular, routing takes up its own entire library within the framework. All modern front-end frameworks support routing, and Angular is no different. Routing happens from the client-side using either hash or location routing. Both styles allow the client to manage its own routes. No additional assistance from the server is necessary past the initial request.

至于Angular，路由在框架內占用了它自己的整個庫。所有現代的前端框架都支持路由，而Angular也不例外。使用散列或位置路由從客戶端進行路由。兩種樣式都允許客戶端管理自己的路由。在初始請求之后，無需服務器的其他幫助。

The web browser rarely refreshes using client-side routing. Web browser utilities such as bookmarks, history, and the address bar still work despite no refreshing. This makes for a slick routing experience that does not mess up the browser. No more jumpy page reloads while routing to a different page.

Web瀏覽器很少使用客戶端路由刷新。盡管沒有刷新，諸如書簽，歷史記錄和地址欄之類的Web瀏覽器實用程序仍然可以使用。這提供了流暢的路由體驗，不會干擾瀏覽器。路由到其他頁面時，不再需要重新加載頁面。

Angular adds on a layer of abstraction over the core technologies used for routing. This article intends to explain this abstraction. There exists two routing strategies in Angular: path location and hash. This article focuses on the path location strategy since its the default option.

Angular在用于路由的核心技術上增加了一層抽象。本文旨在解釋這種抽象。 Angular中存在兩種路由策略：路徑位置和哈希。本文重點介紹路徑定位策略，因為它是默認選項。

Plus, path location may deprecate hash routing following the full release of Angular Universal. Regardless, the two strategies are very similar in implementation. Learning one learns the other. Time to get started!

另外，在Angular Universal全面發布之后，路徑位置可能會棄用哈希路由。無論如何，這兩種策略在實現上非常相似。學習一個學習另一個。是時候開始了！

路由器模塊設置 (RouterModule Setup)

Routing utilities export with RouterModule available from @angular/router. It is not part of the core library since not all applications require routing. The most conventional way to introduce routing is as its own feature module.

路由實用程序可通過@angular/router RouterModule導出。它不是核心庫的一部分，因為并非所有應用程序都需要路由。引入路由的最傳統方法是作為其自身的功能模塊。

As route complexity grows, having it as its own module will promote the root module’s simplicity. Keeping it stupid simple without compromising functionality constitutes good design for modules.

隨著路由復雜度的增加，將其作為自己的模塊將促進根模塊的簡單性。在不影響功能的情況下保持愚蠢的簡單性構成了模塊的良好設計。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';import { AComponent } from '../../components/a/a.component';
import { BComponent } from '../../components/b/b.component';// an array of soon-to-be routes!
const routes: Routes = [];@NgModule({imports: [ RouterModule.forRoot(routes) ],exports: [ RouterModule ]
})
export class AppRoutingModule { }

.forRoot(...) is a class function available from the RouterModule class. The function accepts an array of Route objects as Routes. .forRoot(...) configures routes for eager-loading while its alternative .forChild(...) configures for lazy-loading.

.forRoot(...)是RouterModule類中可用的類函數。該函數接受Route對象數組作為Routes 。 .forRoot(...)配置路由以進行.forChild(...)加載，而其替代.forChild(...)配置為延遲加載。

Eager-loading meaning the routes load their content into the application from the get-go. Lazy-loading happens on-demand. The focus of this article is eager-loading. It is the default approach for loading in an application. The RouterModule class definition looks something like the next block of code.

急切加載意味著路由從一開始就將其內容加載到應用程序中。延遲加載按需進行。本文的重點是急切加載。這是在應用程序中加載的默認方法。 RouterModule類定義類似于下一個代碼塊。

@NgModule({// … lots of metadata ...
})
export class RouterModule {forRoot(routes: Routes) {// … configuration for eagerly loaded routes …}forChild(routes: Routes) {// … configuration for lazily loaded routes …}
}

Do not worry about the configuration details the example omits with comments. Having a general understanding will do for now.

不必擔心示例中帶有注釋的配置詳細信息。大致了解現在就可以了。

Notice how AppRoutingModule imports the RouterModule while also exporting it. This makes sense given AppRoutingModule is a feature module. It imports into the root module as a feature module. It exposes RouterModule directives, interfaces, and services to the root component tree.

請注意AppRoutingModule如何導入RouterModule并同時將其導出。鑒于AppRoutingModule是功能模塊，這是有道理的。它將作為功能模塊導入到根模塊中。它將RouterModule指令，接口和服務公開給根組件樹。

This explains why AppRoutingModule must export RouterModule. It does so for the sake of the root module’s underlying component tree. It needs access to those routing utilities!

這解釋了為什么AppRoutingModule必須導出RouterModule。這樣做是為了根模塊的基礎組件樹。它需要訪問那些路由實用程序！

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';import { AppComponent } from './app.component';
import { AComponent } from './components/a/a.component';
import { BComponent } from './components/b/b.component';
import { AppRoutingModule } from './modules/app-routing/app-routing.module';@NgModule({declarations: [AppComponent,AComponent,BComponent],imports: [AppRoutingModule, // routing feature moduleBrowserModule],providers: [],bootstrap: [ AppComponent ]
})
export class AppModule { }

The AppRoutingModule token imports from the very top. Its token inserts into the root module’s imports array. The root component tree may now utilize the RouterModule library. That includes its directives, interfaces, and services as already mentioned. Big thanks goes to AppRoutingModule for exporting RouterModule!

AppRoutingModule令牌從最頂部導入。它的令牌插入到根模塊的imports數組中。根組件樹現在可以利用RouterModule庫。如前所述，這包括其指令，接口和服務。非常感謝AppRoutingModule導出RouterModule！

The RouterModule utilities will come in handy for the root’s components. The basic HTML for AppComponent makes use of one directive: router-outlet.

RouterModule實用程序將對根目錄的組件派上用場。 AppComponent的基本HTML使用一個指令： router-outlet 。

<!-- app.component.html --><ul><!-- routerLink(s) here -->
</ul>
<router-outlet></router-outlet>
<!-- routed content appends here (AFTER THE ELEMENT, NOT IN IT!) -->

routerLink is an attribute directive of RouterModule. It will attach to each element of <ul></ul> once the routes are setup. router-outlet is a component directive with interesting behavior. It acts more as a marker for displaying routed content. Routed content results from navigation to a specific route. Usually that means a single component as configured in AppRoutingModule

routerLink是routerLink的屬性指令。設置路由后，它將附加到<ul></ul>每個元素。 router-outlet是具有有趣行為的組件指令。它更多地用作顯示路由內容的標記。路由內容是從導航到特定路由的結果。通常，這意味著在AppRoutingModule中配置的單個組件

The routed content renders right after <router-outlet></router-outlet>. Nothing renders inside of it. This does not make too much of a considerable difference. That said, do not expect router-outlet to behave like a container for routed content. It is merely a marker for appending routed content to the Document Object Model (DOM).

路由的內容在<router-outlet></router-outlet>之后呈現。里面什么也沒有。這并沒有太大的區別。就是說，不要指望router-outlet表現得像是路由內容的容器。它只是用于將路由內容附加到文檔對象模型(DOM)的標記。

基本路由 (Basic Routing)

The previous section establishes the basic setup for routing. Before actual routing can happen, a few more things must be addressed

上一節建立了路由的基本設置。在實際的路由發生之前，還必須解決一些其他問題

The first question to address is what routes will this application consume? Well, there are two components: AComponent and BComponent. Each one should have its own route. They can render from AppComponent’s router-outlet depending on the current route location.

要解決的第一個問題是此應用程序將消耗哪些路由？好，有兩個組件：AComponent和BComponent。每個人都應該有自己的路線。它們可以根據當前路線位置從AppComponent的router-outlet進行渲染。

The route location (or path) defines what appends to a website’s origin (e.g. http://localhost:4200) through a series of slashes (/).

路由位置(或路徑)定義了通過一系列斜杠( / )附加到網站來源 (例如http：// localhost：4200 )的內容。

// … same imports from before …const routes: Routes = [{path: 'A',component: AComponent},{path: 'B',component: BComponent}
];@NgModule({imports: [ RouterModule.forRoot(routes) ],exports: [ RouterModule ]
})
export class AppRoutingModule { }

http://localhost:4200/A renders AComponent from AppComponent’s router-outlet. http://localhost:4200/B renders BComponent. You need a way to route to these locations without using the address bar though. An application should not rely upon a web browser’s address bar for navigation.

http://localhost:4200/A從AppComponent的router-outlet out呈現AComponent。 http://localhost:4200/B呈現BComponent。您需要一種無需使用地址欄即可路由到這些位置的方法。應用程序不應依賴Web瀏覽器的地址欄進行導航。

The global CSS (Cascading Style-sheets) supplements the HTML below it. An application’s router link ought to have a pleasant appearance. This CSS applies to all other examples too.

全局CSS(層疊樣式表)補充了其下方HTML。 應用程序的路由器鏈接應具有愉悅的外觀。 該CSS也適用于所有其他示例。

/* global styles.css */ul li {cursor: pointer;display: inline-block;padding: 20px;margin: 5px;background-color: whitesmoke;border-radius: 5px;border: 1px solid black;
}ul li:hover {background-color: lightgrey;
}

<!-- app.component.html --><ul><li routerLink="/A">Go to A!</li><li routerLink="/B">Go to B!</li>
</ul>
<router-outlet></router-outlet>

This is basic routing! Clicking either of the routerLink elments routes the web address. It reassigns it without refreshing the web browser. Angular’s Router maps the routed address to the Routes configured in AppRoutingModule. It matches the address to the path property of a single Route object within the array. First match always wins, so match-all routes should lie at the very end of the Routes array.

這是基本的路由！單擊任一routerLink元素將路由該網址。它會重新分配它，而不刷新Web瀏覽器。 Angular的Router將路由的地址映射到AppRoutingModule中配置的Routes 。它將地址與數組中單個Route對象的path屬性匹配。首次比賽總是獲勝，因此所有比賽路線都應位于Routes數組的末尾。

Match-all routes prevent the application from crashing if it cannot match the current route. This can happen from the address bar where the user may type in any route. For this, Angular provides a wildcard path value ** that accepts all routes. This route usually renders a PageNotFoundComponent component displaying “Error 404: Page not found”.

全部匹配路由可以防止應用程序如果無法匹配當前路由而崩潰。這可以從用戶可以在其中輸入任何路線的地址欄中發生。為此，Angular提供了一個通配符路徑值** ，該值可以接受所有路由。此路由通常會渲染一個顯示“錯誤404：找不到頁面”的PageNotFoundComponent組件。

// … PageNotFoundComponent imported along with everything else …const routes: Routes = [{path: 'A',component: AComponent},{path: 'B',component: BComponent},{path: '',redirectTo: 'A',pathMatch: 'full'},{path: '**',component: PageNotFoundComponent}
];

The Route object containing redirectTo keeps the PageNotFoundComponent from rendering as a result of http://localhost:4200. This is the applications home route. To fix this, redirectTo reroutes the home route to http://localhost:4200/A. http://localhost:4200/A indirectly becomes the application’s new home route.

包含redirectTo的Route對象使PageNotFoundComponent不會由于http://localhost:4200而呈現。這是應用程序的本地路由。要解決此問題， redirectTo將本地路由重新路由到http://localhost:4200/A http://localhost:4200/A間接成為應用程序的新本地路由。

The pathMatch: 'full' tells the Route object to match against the home route (http://localhost:4200). It matches the empty path.

pathMatch: 'full'告訴Route對象與本地路由( http://localhost:4200 )匹配。它匹配空路徑。

These two new Route objects go at the end of the array since first match wins. The last array element (path: '**') always matches, so it goes last.

由于首場比賽獲勝，這兩個新的Route對象位于數組的末尾。最后一個數組元素( path: '**' )始終匹配，因此位于最后。

There is one last thing worth addressing before moving on. How does the user know where he or she is in the application relative to the current route? Sure there may be content specific to the route, but how is user supposed to make that connection? There should be some form of highlighting applied to the routerLinks. That way, the user will know which route is active for the given web page.

在繼續之前，還有最后一件事值得解決。用戶如何知道他或她在應用程序中相對于當前路線的位置？當然，可能存在特定于該路線的內容，但是用戶應該如何建立該連接？應該對路由器鏈接應用某種形式的突出顯示。這樣，用戶將知道哪個路由對于給定的網頁是活動的。

This is an easy fix. When you click a routerLink element, Angular’s Router assigns focus to it. This focus can trigger certain styles which provide useful feedback to the user. The routerLinkActive directive can track this focus for the developer.

這是一個簡單的修復。當您單擊routerLink元素時，Angular的Router會為其分配焦點。該焦點可以觸發某些樣式，這些樣式可以為用戶提供有用的反饋。 routerLinkActive指令可以為開發人員跟蹤此焦點。

<!-- app.component.html --><ul><li routerLink="/A" routerLinkActive="active">Go to A!</li><li routerLink="/B" routerLinkActive="active">Go to B!</li>
</ul>
<router-outlet></router-outlet>

The right assignment of routerLinkActive represents a string of classes. This example portrays only one class (.active), but any number of space-delimited classes may apply. When the Router assigns focus to a routerLink, the space-delimited classes apply to the host element. When the focus shifts away, the classes get removed automatically.

正確的routerLinkActive分配表示一串類。本示例僅描繪一個類( .active )，但是可以應用任何數量的以空格分隔的類。當Router將焦點分配給routerLink時，以空格分隔的類適用于主機元素。當焦點移開時，這些類將自動刪除。

/* global styles.css */.active {background-color: lightgrey !important;
}

Users can now easily recognize how the current route and the page content coincide. lightgrey highlighting applies to the routerLink matching the current route. !important ensures the highlighting overrides inline stylings.

用戶現在可以輕松地識別當前路線和頁面內容的重合方式。 lightgrey高亮適用于routerLink匹配當前的路線。 !important確保突出顯示覆蓋內聯樣式。

參數化路線 (Parameterized Routes)

Routes do not have to be completely hard-coded. They can contain dynamic variables referenceable from the component corresponding the Route object. These variables are declared as parameters when writing the route’s path.

路由不必完全硬編碼。它們可以包含可從對應于Route對象的組件引用的動態變量。這些變量在寫入路徑時被聲明為參數。

Route parameters are either optional or mandatory for matching a particular Route. It depends on how a route writes its parameters. Two strategies exist: matrix and traditional parameterization.

路由參數對于匹配特定Route是可選的或必需的。這取決于路由如何寫入其參數。存在兩種策略：矩陣和傳統參數化。

Traditional parameterization begins from the Routes array configured in AppRoutingModule.

傳統的參數化從AppRoutingModule中配置的Routes數組開始。

const routes: Routes = [// … other routes …{path: 'B',component: BComponent},{path: 'B/:parameter',component: BComponent},// … other routes …
];

Focus on the two BComponent routes. Parameterization will eventually occur in both routes.

關注兩條BComponent路線。參數化最終將在兩條路徑中發生。

Traditional parameterization occurs in the second BComponent Route. B/:parameter contains the parameter parameter as indicated with the :. Whatever follows the colon marks the parameter’s name. The parameter parameter is necessary for the second BComponent Route to match.

傳統的參數化發生在第二個BComponent Route 。 B/:parameter包含parameter參數，如: 。冒號后面的所有內容都會標記參數的名稱。 parameter parameter是第二個BComponent Route匹配所必需的。

parameter reads in the value of whatever gets passed into the route. Routing to http://localhost:4200/B/randomValue will assign parameter the value of randomValue. This value can include anything besides another /. For example, http://localhost:4200/B/randomValue/blahBlah will not trigger the second BComponent Route. The PageNotFoundComponent renders instead.

parameter讀取傳遞到路由中的值。路由到http://localhost:4200/B/randomValue將分配parameter的值randomValue 。該值可以包含/以外的任何值。例如， http://localhost:4200/B/randomValue/blahBlah將不會觸發第二個BComponent Route 。而不是PageNotFoundComponent呈現。

BComponent can reference route parameters from its component class. Both approaches to parameterization (matrix and traditional) yield the same results in BComponent. Before seeing BComponent, examine the matrix form of parameterization below.

BComponent可以從其組件類中引用路由參數。兩種參數化方法(矩陣和傳統方法)在BComponent中產生相同的結果。在看到BComponent之前，請檢查下面的參數化矩陣形式。

// app.component.tsimport { Component } from '@angular/core';
import { Router } from '@angular/router';@Component({selector: 'app-root',templateUrl: './app.component.html'
})
export class AppComponent {constructor(private router: Router) { }routeMatrixParam(value: string) {if (value)this.router.navigate(['B', { parameter: value }]); // matrix parameterelsethis.router.navigate(['B']);}routeAddressParam(value: string) {this.router.navigate(['B', value]);}
}

Angular’s dependency injection system provides an instantiation of the Router. This lets the component programmatically route. The .navigate(...) function accepts an array of values that resolves to a routable path. Something like .navigate(['path', 'to', 'something']) resolves to http://localhost:4200/path/to/something. .navigate(...) adds path-delimiting / marks when normalizing the array into a routable path.

Angular的依賴項注入系統提供Router的實例化。這使組件可以編程方式進行布線。 .navigate(...)函數接受一個可解析為可路由路徑的值數組。諸如.navigate(['path', 'to', 'something'])解析為http://localhost:4200/path/to/something 。 .navigate(...)在將數組歸一化為可路由路徑時添加了路徑.navigate(...) /標記。

The second form of parameterization occurs in routeMatrixParam(...). See this line of code: this.router.navigate(['B', { parameter: value }]). This form of parameter is a matrix parameter. Its value is optional for the first BComponent Route to match (/B). The Route matches regardless of the parameter’s presence in the path.

參數化的第二種形式出現在routeMatrixParam(...) 。請參見以下代碼行： this.router.navigate(['B', { parameter: value }]) 。這種形式的parameter是矩陣參數。對于第一個匹配的BComponent Route ( /B )，它的值是可選的。該Route無論在路徑參數的存在相匹配。

The routeAddressParam(...) resolves a route that matches the http://localhost:4200/B/randomValue parameterization approach. This traditional strategy needs a parameter to match the second BComponent route (B/:parameter).

routeAddressParam(...)解析與http://localhost:4200/B/randomValue參數化方法匹配的路由。這種傳統策略需要一個參數來匹配第二個BComponent路由( B/:parameter )。

The matrix strategy concerns routeMatrixParam(...). With or without a matrix parameter in its path, the first BComponent route still matches. The parameter parameter passes to BComponent just like with the traditional approach.

矩陣策略涉及routeMatrixParam(...) 。路徑中有或沒有矩陣參數，第一個BComponent路由仍然匹配。 parameter參數傳遞給BComponent就像傳統方法一樣。

To make full sense of the above code, here is the corresponding template HTML.

為了充分理解上述代碼，以下是相應的模板HTML。

// app.component.html<ul><li routerLink="/A">Go to A!</li><li><input #matrixInput><button (click)="routeMatrixParam(matrixInput.value)">Matrix!</button></li><li><input #paramInput><button (click)="routeAddressParam(paramInput.value)">Param!</button></li>
</ul>
<router-outlet></router-outlet>

In the template, values are accepted as text input. The input injects it into the route path as a parameter. Two separate sets of boxes exist for each parameterization strategy (traditional and matrix). With all the pieces coming together, it is time to examine the BComponent component class.

在模板中，值被接受為文本輸入。輸入將其作為參數注入到路徑中。每個參數化策略(傳統方法和矩陣方法)都有兩組獨立的框。將所有部分放在一起，是時候檢查BComponent組件類了。

// b.component.tsimport { Component, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';@Component({selector: 'app-b',template: `<p>Route param: {{ currParam }}</p>`
})
export class BComponent implements OnInit {currParam: string = "";constructor(private route: ActivatedRoute) { }ngOnInit() {this.route.params.subscribe((param: ParamMap) => {this.currParam = param['parameter'];});}
}

BComponent results from either of two BComponent routes in AppRoutingModule. ActivatedRoute instantiates into a set of useful information pertaining to the current route. That is, the route that caused BComponent to render. ActivatedRoute instantiates via dependency injection targeting the class constructor.

BComponent來自AppRoutingModule中的兩個BComponent路由之一。 ActivatedRoute實例化為一組與當前路由有關的有用信息。也就是說，導致BComponent渲染的路由。 ActivatedRoute通過針對類構造函數的依賴注入實例化。

The .params field of ActivatedRoute.params returns an Observable which emits the route parameters. Notice how the two different parameterization approaches result in the parameter parameter. The returned Observable emits it as a key-value pair inside of a ParamMap object.

ActivatedRoute.params的.params字段返回一個Observable ，它發出路由參數。請注意，兩種不同的參數化方法是如何產生parameter參的。返回的Observable其作為ParamMap對象內部的鍵值對發出。

Between the two parameterization approaches, the parameter parameter resolved identically. The value emits from ActivatedRoute.params despite the approach to parameterization.

在兩種參數化方法之間， parameter參數解析相同。盡管采用了參數化方法，但該值仍從ActivatedRoute.params發出。

The address bar distinguishes the final results of each approach. Matrix parameterization (optional for Route match) yields the address: http://localhost:4200/B;parameter=randomValue. Traditional parameterization (required for Route match) yields: http://localhost:4200/B/randomValue.

地址欄區分每種方法的最終結果。矩陣參數化(對于Route match是可選的)產生地址： http://localhost:4200/B;parameter=randomValue 。傳統的參數化(對于Route匹配是必需的)產生： http://localhost:4200/B/randomValue 。

Either way, the same BComponent results. The actual difference: a different BComponent Route matches. This entirely depends upon the parameterization strategy. The matrix approach ensures parameters are optional for Route matching. The traditional approach requires them.

無論哪種方式，都會得到相同的BComponent。實際的區別：不同的BComponent Route匹配。這完全取決于參數化策略。矩陣方法確保參數對于Route匹配是可選的。傳統方法需要它們。

嵌套路線 (Nested Routes)

Routes may form a hierarchy. In the DOM, this involves one parent router-outlet rendering at least one child router-outlet. In the address bar, it looks like this: http://localhost/parentRoutes/childRoutes. In the Routes configuration, the children: [] property denotes a Route object as having nested (child) routes.

Routes可以形成層次結構。在DOM中，這涉及一個父router-outlet至少渲染一個子router-outlet 。在地址欄中，它看起來像這樣： http://localhost/parentRoutes/childRoutes 。在Routes配置中， children: []屬性將Route對象表示為具有嵌套(子)路由。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';import { NestComponent } from '../../components/nest/nest.component';
import { AComponent } from '../../components/nest/a/a.component';
import { BComponent } from '../../components/nest/b/b.component';const routes: Routes = [{path: 'nest',component: NestComponent,children: [{ path: 'A', component: AComponent },{ path: 'B', component: BComponent }]}
];@NgModule({imports: [ RouterModule.forRoot(routes) ],exports: [ RouterModule ]
})
export class AppRoutingModule { }

// nest.component.tsimport { Component } from '@angular/core';@Component({selector: 'app-nest',template: `<ul><li routerLink="./A">Go to A!</li><li routerLink="./B">Go to B!</li></ul><router-outlet></router-outlet>`
})
export class NestComponent { }

NestComponent renders a router-outlet after rendering itself from another root-level router-outlet in AppComponent. The router-outlet of NestComponent’s template may render either AComponent (/nest/A) or BComponent (/nest/B).

NestComponent呈現一個router-outlet從另一個根級渲染本身后router-outlet在AppComponent。 NestComponent模板的router-outlet可以呈現AComponent( /nest/A )或BComponent( /nest/B )。

The AppRoutingModule reflects this nesting in NestComponent’s Route object. The children: [] field holds an array of Route objects. These Route object may also nest routes in their children: [] fields. This can continue for however many layers of nested routes. The above example shows two layers of nesting.

AppRoutingModule在NestComponent的Route對象中反映了此嵌套。 children: []字段包含Route對象的數組。這些Route對象還可以將路由嵌套在其children: []字段中。但是，對于多層嵌套路由，這可以繼續進行。上面的示例顯示了兩層嵌套。

Each routerLink contains a ./ as compared to /. The . ensures that the routerLink appends to the route path. The routerLink completely replaces the path otherwise. After routing to /nest, . expands into /nest.

與/相比，每個routerLink包含一個./ 。的. 確保routerLink附加到路由路徑。否則，routerLink會完全替換路徑。路由到/nest ， . 擴展為/nest 。

This is useful for routing to either /nest/A or /nest/B from the .nest route. A and B constitute nested routes of /nest. Routing to /A or /B returns PageNotFound. /nest must prepend the two routes.

這對于從.nest路由到/nest/A或/nest/B .nest 。 A和B構成/nest嵌套路由。路由到/A或/B返回PageNotFound。 /nest必須在兩條路由之前。

Take a look at the AppComponent containing the root-level router-outlet in its template. AppComponent is the first layer of nesting while NestComponent is the second.

看一下在其模板中包含根級router-outlet的AppComponent。 AppComponent是嵌套的第一層，而NestComponent是第二層。

import { Component } from '@angular/core';@Component({selector: 'app-root',template: `<ul><li routerLink="/nest">Go to nested routes!</li><li routerLink="/">Back out of the nested routes!</li></ul><router-outlet></router-outlet>`
})
export class AppComponent { }

Inside the nest Route object, the children: [] contains two more nested routes. They result in AComponent and BComponent when routing from /nest as previously discussed. These components are very simple for the sake of demonstration. <li routerLink="/">...</li> lets you navigate out of the nest routes to reset the example by navigating to the home route.

在嵌套Route對象內部， children: []包含另外兩個嵌套路由。如前所述，從/nest路由時，它們將導致AComponent和BComponent。為了演示，這些組件非常簡單。 <li routerLink="/">...</li>可讓您從嵌套路由中導航出來，以導航至本地路由來重置示例。

import { Component } from '@angular/core';@Component({selector: 'app-a',template: `<p>a works!</p>`
})
export class AComponent { }

import { Component } from '@angular/core';@Component({selector: 'app-b',template: `<p>b works!</p>`
})
export class BComponent { }

The children: [] array accepts Route object as elements. children: [] can apply to any of these elements as well. The children of these elements can continue nesting. This pattern may continue for however many layers of nesting. Insert a router-outlet into the template for every layer of nested routing.

children: []數組接受Route對象作為元素。 children: []也可以應用于這些元素中的任何一個。這些元素的子級可以繼續嵌套。無論多層嵌套如何，這種模式都可以繼續。將嵌套路由的每一層的路由router-outlet插入模板。

Routing techniques apply regardless of a Route object’s level of nesting. The parameterization techniques differ in only one aspect. Child routes can only access their parent’s parameters via ActivatedRoute.parent.params. ActivatedRoute.params targets the same level of nested routes. This excludes parent-level routes and their parameters.

無論Route對象的嵌套級別如何，都適用路由技術。參數化技術僅在一方面不同。子路由只能通過ActivatedRoute.parent.params訪問其父級的參數。 ActivatedRoute.params目標是相同級別的嵌套路由。這不包括父級路由及其參數。

Route guards are especially suited for nested routing. One Route object can restrict access to all its nested (child) routes.

Route防護器特別適合嵌套路由。一個Route對象可以限制對其所有嵌套(子)路由的訪問。

守衛路線 (Guarded Routes)

Web applications often consist of public and private data. Both types of data tend to have their own pages with guarded routes. These routes allow/restrict access depending on the user’s privileges. Unauthorized users may interact with a guarded route. The route should block the user if he or she attempts to access its routed content.

Web應用程序通常包含公共和私有數據。兩種類型的數據都有自己的帶有受保護路由的頁面。這些路由允許/限制訪問，具體取決于用戶的權限。未經授權的用戶可以與受保護的路由進行交互。如果用戶嘗試訪問其路由內容，則該路由應阻止用戶。

Angular provides a bundle of authentication guards that can attach to any route. These methods trigger automatically depending on how the user interacts with the guarded route.

Angular提供了可以連接到任何路由的身份驗證防護包。這些方法將根據用戶與受保護路線的交互方式自動觸發。

canActivate(...) - fires when the user attempts to access a route
canActivate(...) -用戶嘗試訪問路線時觸發
canActivateChild(...) - fires when the user attempts to access a route’s nested (child) routes
canActivateChild(...) -當用戶嘗試訪問路由的嵌套(子)路由時觸發
canDeactivate(...) - fires when the user attempts to leave a route
canDeactivate(...) -用戶嘗試離開路線時觸發

Angular’s guard methods are available from @angular/router. To help them authenticate, they may optionally receive a few parameters. Such parameters do not inject via dependency injection. Under the hood, each value gets passed in as an argument to the invoked guard method.

可以從@angular/router獲得Angular的保護方法。為了幫助他們進行身份驗證，他們可以選擇接收一些參數。此類參數不會通過依賴項注入來注入。在幕后，每個值都作為參數傳遞給調用的guard方法。

ActivatedRouteSnapshot - available to all three
ActivatedRouteSnapshot全部三個都可用
RouterStateSnapshot - available to all three
RouterStateSnapshot適用于所有三個
Component - available to canDeactivate(...)
Component -可用于canDeactivate(...)

ActivatedRouteSnapshot provides access to the route parameters of the guarded route. RouterStateSnapshot exposes the URL (uniform resource locator) web address matching the route. Component references the component rendered by the route.

ActivatedRouteSnapshot提供對受保護路由的路由參數的訪問。 RouterStateSnapshot公開與路由匹配的URL(統一資源定位符)網址。 Component引用路線所呈現的組件。

To guard a route, a class implementing the guard methods needs to first exist as a service. The service can inject into AppRoutingModule to guard its Routes. The token value for the service may inject into any one Route object.

要保護路由，必須首先將實現保護方法的類作為服務存在。該服務可以注入AppRoutingModule中以保護其Routes 。服務的令牌值可以注入到任何一個Route對象中。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';import { AuthService } from '../../services/auth.service';
import { UserService } from '../../services/user.service';import { PrivateNestComponent } from '../../components/private-nest/private-nest.component';
import { PrivateAComponent } from '../../components/private-nest/private-a/private-a.component';
import { PrivateBComponent } from '../../components/private-nest/private-b/private-b.component';const routes: Routes = [{path: 'private-nest',component: PrivateNestComponent,canActivate: [ AuthService ], // !!!canActivateChild: [ AuthService ], // !!!canDeactivate: [ AuthService ], // !!!children: [{ path: 'private-A', component: PrivateAComponent },{ path: 'private-B', component: PrivateBComponent }]}
];@NgModule({imports: [ RouterModule.forRoot(routes) ],exports: [ RouterModule ],providers: [AuthService,UserService]
})
export class AppRoutingModule { }

canActivate, canActivateChild, and canDeactivate implement from AuthService. The service implementation will be shown shortly alongside the UserService implementation.

canActivate ， canActivateChild和canDeactivate實現。該服務實現將與UserService實現一起顯示。

UserService provides the information needed to authenticate a user. The AuthService guard method implementations perform the authentication. AppRoutingModule must include the two services into its providers array. This is so the module’s injector knows how to instantiate them.

UserService提供驗證用戶所需的信息。 AuthService保護方法實現執行身份驗證。 AppRoutingModule must include the two services into its providers array. This is so the module's injector knows how to instantiate them.

Nested routes exist off of the /private-nest path. The Route object for /private-nest contains a few more new fields. Their names should look familiar as they mirror their corresponding guard methods.

Each field fires its namesake’s method implementation inside of the service when triggered. Any number of services can populate this array too. The method implementation of each service gets tested. They must return a boolean value or an Observable that emits a boolean value.

Each field fires its namesake's method implementation inside of the service when triggered. Any number of services can populate this array too. The method implementation of each service gets tested. They must return a boolean value or an Observable that emits a boolean value.

See the AuthService and UserService implementations below.

// user.service.tsimport { Injectable } from '@angular/core';
import { Router } from '@angular/router';class TheUser {constructor(public isLoggedIn: boolean = false) { }toggleLogin() {this.isLoggedIn = true;}toggleLogout() {this.isLoggedIn = false;}
}const globalUser = new TheUser();@Injectable({providedIn: 'root'
})
export class UserService {theUser: TheUser = globalUser;constructor(private router: Router) { }get isLoggedIn() {return this.theUser.isLoggedIn;}login() {this.theUser.toggleLogin();}logout() {this.theUser.toggleLogout();this.router.navigate(['/']);}
}

The same instance of TheUser gets passed with each instantiation of UserService. TheUser provides access to isLoggedIn determining the user’s login status. Two other public methods let the UserService toggle the value of isLoggedIn. This is so the user can log in and out.

The same instance of TheUser gets passed with each instantiation of UserService. TheUser provides access to isLoggedIn determining the user's login status. Two other public methods let the UserService toggle the value of isLoggedIn . This is so the user can log in and out.

You can think of TheUser as a global instance. UserService is a instantiable interface that configures this global. Changes to TheUser from one UserService instantiation apply to every other UserService instance. UserService implements into AuthService to provide access to isLoggedIn of TheUser for authentication.

import { Component, Injectable } from '@angular/core';
import { CanActivate, CanActivateChild, CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';import { UserService } from './user.service';@Injectable({providedIn: 'root'
})
export class AuthService implements CanActivate, CanActivateChild, CanDeactivate<Component> {constructor(private user: UserService) {}canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {if (this.user.isLoggedIn)return true;elsereturn false;}canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {return this.canActivate(route, state);}canDeactivate(component: Component, route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {if (!this.user.isLoggedIn || window.confirm('Leave the nest?'))return true;elsereturn false;}
}

AuthService implements every guard method imported from @angular/router. Each guard method maps to a corresponding field in the PrivateNestComponent’s Route object. An instance of UserService instantiates from the AuthService constructor. AuthService determines if a user may proceed using isLoggedIn exposed by UserService.

AuthService implements every guard method imported from @angular/router . Each guard method maps to a corresponding field in the PrivateNestComponent's Route object. An instance of UserService instantiates from the AuthService constructor. AuthService determines if a user may proceed using isLoggedIn exposed by UserService.

Returning false from a guard instructs the route to block the user from routing. A return value of true lets the user proceed to his route destination. If more than one service authenticates, they all must return true to permit access. canActivateChild guards the child routes of PrivateNestComponent. This guard method accounts for users bypassing PrivateNestComponent through the address bar.

Guard method parameters pass in automatically upon invocation. While the example does not make use of them, they do supply useful information from the route. The developer can use this information to help authenticate the user.

AppComponent also instantiates UserService for direct use in its template. The UserService instantiation of AppComponent and AuthService reference the same user class (TheUser).

AppComponent also instantiates UserService for direct use in its template. The UserService instantiation of AppComponent and AuthService reference the same user class ( TheUser ).

import { Component } from '@angular/core';import { UserService } from './services/user.service';@Component({selector: 'app-root',template: `<ul><li routerLink="/private-nest">Enter the secret nest!</li><li routerLink="/">Leave the secret nest!</li><li *ngIf="user.isLoggedIn"><button (click)="user.logout()">LOGOUT</button></li><li *ngIf="!user.isLoggedIn"><button (click)="user.login()">LOGIN</button></li></ul><router-outlet></router-outlet>`
})
export class AppComponent {constructor(private user: UserService) { }
}

UserService handles all the logic for AppComponent. AppComponent mostly concerns its template. A UserService does instantiate as user from the class constructor. user data determines the template’s functionality.

結論 (Conclusions)

Routing strikes a fine balance between organizing and restricting sections of the application. A smaller application such as a blog or tribute page may not require any routing. Even then, including a little bit of hash routing could not hurt. A user may only want to reference part of the page after all.

Angular applies its own routing library built on top of the HTML5 history API. This API omits hash routing to instead use the pushState(...) and replaceState(...) methods. They change the web address URL without refreshing the page. The default path location routing strategy in Angular works this way. Setting RouterModule.forRoot(routes, { useHash: true }) enables hash routing if preferred.

Angular applies its own routing library built on top of the HTML5 history API . This API omits hash routing to instead use the pushState(...) and replaceState(...) methods. They change the web address URL without refreshing the page. The default path location routing strategy in Angular works this way. Setting RouterModule.forRoot(routes, { useHash: true }) enables hash routing if preferred.

This article focused on the default path location strategy. Regardless of the strategy, many routing utilities are available to route an application. The RouterModule exposes these utilities through its exports. Basic, parameterized, nested, and guarded routes are all possible utilizing RouterModule.

NgModules (NgModules)

Angular applications begin from the root NgModule. Angular manages an application’s dependencies through its module system comprised of NgModules. Alongside plain JavaScript modules, NgModules ensure code modularity and encapsulation.

Angular applications begin from the root NgModule. Angular manages an application's dependencies through its module system comprised of NgModules. Alongside plain JavaScript modules, NgModules ensure code modularity and encapsulation.

Modules also provide a top-most level of organizing code. Each NgModule sections off its own chunk of code as the root. This module provides top-to-bottom encapsulation for its code. The entire block of code can then export to any other module. In this sense, NgModules act like gatekeepers to their own code blocks.

Angular’s documented utilities come from NgModules authored by Angular. No utility is available unless the NgModule that declares it gets included into the root. These utilities must also export from their host module so that importers can use them. This form of encapsulation empowers the developer to produce his or her own NgModules within the same file-system.

Angular's documented utilities come from NgModules authored by Angular. No utility is available unless the NgModule that declares it gets included into the root. These utilities must also export from their host module so that importers can use them. This form of encapsulation empowers the developer to produce his or her own NgModules within the same file-system.

Plus, it makes sense to know why the Angular CLI (command-line interface) imports BrowserModule from @angular/core. This happens whenever a new app generates using the CLI command: ng new [name-of-app].

Plus, it makes sense to know why the Angular CLI (command-line interface) imports BrowserModule from @angular/core . This happens whenever a new app generates using the CLI command: ng new [name-of-app] .

Understanding the point of the implementation may suffice in most cases. However, understanding how the implementation wires itself to the root is even better. It all happens automatically by importing BrowserModule into the root.

NgModule Decorator (NgModule Decorator)

Angular defines its modules by decorating a generic class. The @NgModule decorator indicates the class’ modular purpose to Angular. An NgModule class consolidates root dependencies accessible/instantiable from the module’s scope. ‘Scope’ meaning anything originating from the module’s metadata.

Angular defines its modules by decorating a generic class. The @NgModule decorator indicates the class' modular purpose to Angular. An NgModule class consolidates root dependencies accessible/instantiable from the module's scope. 'Scope' meaning anything originating from the module's metadata.

import { NgModule } from '@angular/core';@NgModule({// … metadata …
})
export class AppModule { }

NgModule Metadata (NgModule Metadata)

The CLI generated root NgModule includes the following metadata fields. These fields provide configuration to the code block upon which the NgModule presides.

declarations: []
declarations: []
imports: []
imports: []
providers: []
providers: []
bootstrap: []
bootstrap: []

聲明書 (Declarations)

The declarations array includes all components, directives, or pipes hosted by an NgModule. They are private to the module unless explicitly exported inside its metadata. Given this use-case, components, directives, and pipes are nicknamed ‘declarables’. An NgModule must declare a declarable uniquely. The declarable cannot declare twice in separate NgModules. An error gets thrown otherwise. See the below example.

The declarations array includes all components, directives, or pipes hosted by an NgModule. They are private to the module unless explicitly exported inside its metadata. Given this use-case, components, directives, and pipes are nicknamed 'declarables'. An NgModule must declare a declarable uniquely. The declarable cannot declare twice in separate NgModules. An error gets thrown otherwise. See the below example.

import { NgModule } from '@angular/core';
import { TwoComponent } from './components/two.component.ts';@NgModule({declarations: [ TwoComponent ]
})
export class TwoModule { }@NgModule({imports: [ TwoModule ],declarations: [ TwoComponent ]
})
export class OneModule { }

Angular throws an error for the sake of NgModule encapsulation. Declarables are private to the NgModule that declares them by default. If multiple NgModules need a certain declarable, they should import the declaring NgModule. This NgModule must then export the desired declarable so that the other NgModules can use it.

import { NgModule } from '@angular/core';
import { TwoComponent } from './components/two.component.ts';@NgModule({declarations: [ TwoComponent ],exports: [ TwoComponent ]
})
export class TwoModule { }@NgModule({imports: [ TwoModule ] // this module can now use TwoComponent
})
export class OneModule { }

The above example will not throw an error. TwoComponent has been uniquely declared between the two NgModules. OneModule also has access to TwoComponent since it imports TwoModule. TwoModule in turn exports the TwoComponent for external use.

Imports (Imports)

The imports array only accepts NgModules. This array does not accept declarables, services, or anything else besides other NgModules. Importing a module provides access to what declarable the module publicizes.

This explains why importing BrowserModule provides access to its various utilities. Each declarable utility declared in BrowserModule exports from its metadata. Upon importing BrowserModule, those exported declarables become available to the importing NgModule. Services do not export at all since they lack the same encapsulation.

This explains why importing BrowserModule provides access to its various utilities. Each declarable utility declared in BrowserModule exports from its metadata. Upon importing BrowserModule , those exported declarables become available to the importing NgModule. Services do not export at all since they lack the same encapsulation.

提供者 (Providers)

The lack of service encapsulation might seem odd given the encapsulation of declarables. Remember that services go into the providers array separate from declarations or exports.

When Angular compiles, it flattens the root NgModule and its imports into one module. Services group together in a single providers array hosted by the merged NgModule. Declarables maintain their encapsulation through a set of compile-time flags.

If NgModule providers contain matching token values, the importing root module takes precedence. Past that, the last NgModule imported takes precedence. See the next example. Pay special attention to the NgModule importing the other two. Recognize how that affects the precedence of the provided service.

import { NgModule } from '@angular/core';@NgModule({providers: [ AwesomeService ], // 1st precedence + importing moduleimports: [BModule,CModule]
})
export class AModule { }@NgModule({providers: [ AwesomeService ]  // 3rd precedence + first import
})
export class BModule { }@NgModule({providers: [ AwesomeService ]  // 2nd precedence + last import
})
export class CModule { }

Instantiating AwesomeService from within AModule’s scope results in an AwesomeService instance as provided in AModule’s metadata. If AModule’s providers omitted this service, the AwesomeService of CModule would take precedence. So and so forth for BModule if CModule’s providers omitted AwesomeService.

Instantiating AwesomeService from within AModule's scope results in an AwesomeService instance as provided in AModule's metadata. If AModule's providers omitted this service, the AwesomeService of CModule would take precedence. So and so forth for BModule if CModule's providers omitted AwesomeService.

引導程序 (Bootstrap)

The bootstrap array accepts components. For each component of the Array, Angular inserts the component as its own root of the index.html file. The CLI-generated root NgModule of an application will always have this field.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';@NgModule({declarations: [ AppComponent ],imports: [ BrowserModule ],providers: [],bootstrap: [ AppComponent ]
})
export class AppModule { }

AppComponent’s element will inject into the base-level HTML of the app (index.html). The rest of the component tree unfolds from there. The scope of the overarching NgModule covers this entire tree plus any others injected from the bootstrap array. The array usually contains only one element. This one component represents the module as a single element and its underlying tree.

AppComponent's element will inject into the base-level HTML of the app ( index.html ). The rest of the component tree unfolds from there. The scope of the overarching NgModule covers this entire tree plus any others injected from the bootstrap array. The array usually contains only one element. This one component represents the module as a single element and its underlying tree.

NgModules vs JavaScript Modules (NgModules vs JavaScript Modules)

You have seen Angular and JavaScript modules working together in the previous examples. The top-most import..from statements constitute the JavaScript module system. The file locations of each statement’s target must export a class, variable, or function matching the request. import { TARGET } from './path/to/exported/target'.

You have seen Angular and JavaScript modules working together in the previous examples. The top-most import..from statements constitute the JavaScript module system. The file locations of each statement's target must export a class, variable, or function matching the request. import { TARGET } from './path/to/exported/target' .

In JavaScript, modules are file-separated. Files import using the import..from keywords as just mentioned. NgModules, on the other hand, are class-separated and decorated with @NgModule. And so, many Angular modules can exist in a single file. This cannot happen with JavaScript since a file defines a module.

In JavaScript, modules are file-separated. Files import using the import..from keywords as just mentioned. NgModules, on the other hand, are class-separated and decorated with @NgModule . And so, many Angular modules can exist in a single file. This cannot happen with JavaScript since a file defines a module.

Granted, conventions say that each @NgModule decorated class should have its own file. Even so, know that files do not constitute their own modules in Angular. Classes decorated with @NgModule create that distinction.

JavaScript modules provide token references to @NgModule metadata. This happens at the top of a file hosting a NgModule class. NgModule uses these tokens inside of its metadata fields (declarables, imports, providers, etc). The only reason @NgModule can decorate a class in the first place is because JavaScript imports it from the top of the file.

// JavaScript module system provides tokens
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AppService } from './app.service';
// Javascript module system is strict about where it imports. It can only import at the top of files.// Angular NgModule uses those tokens in its metadata settings
@NgModule({ // import { NgModule } from '@angular/core';declarations: [AppComponent // import { AppComponent } from './app.component';],imports: [BrowserModule // import { BrowserModule } from '@angular/platform-browser';],providers: [AppService // import { AppService } from './app.service';],bootstrap: [AppComponent // import { AppComponent } from './app.component';]
})
export class AppModule { }
// JavaScript module system exports the class. Other modules can now import AppModule.

The above example does not introduce anything new. The focus here is on the comments explaining how the two modular systems work together. JavaScript provides token references while NgModule uses those token to encapsulate and configure its underlying block of code.

Feature Modules (Feature Modules)

Applications grow overtime. Scaling them properly requires application organization. A solid system for this will make further development much easier.

In Angular, schematics ensure purpose-driven sections of code remain distinguishable. Beyond the sub-NgModule schematics, there are the NgModules themselves. They are a type of schematic too. They stand above the rest in the list of schematics excluding the application itself.

The root module should not stand alone once an application starts to scale. Feature modules include any NgModule used alongside the root NgModule. You can think of the root module as having the bootstrap: [] metadata field. Feature application ensure the root module does not oversaturate its metadata.

Feature modules isolate a section of code on behalf of any importing module. They can handle whole application sections independently. This means it could be used in any application whose root module imports the feature module. This tactic saves developers time and effort over the course of multiple applications! It keeps the application’s root NgModule lean as well.

In the root NgModule of an app, adding a feature module’s token into the root’s imports array does the trick. Whatever the feature module exports or provides becomes available to the root.

In the root NgModule of an app, adding a feature module's token into the root's imports array does the trick. Whatever the feature module exports or provides becomes available to the root.

// ./awesome.module.tsimport { NgModule } from '@angular/core';
import { AwesomePipe } from './awesome/pipes/awesome.pipe';
import { AwesomeComponent } from './awesome/components/awesome.component';
import { AwesomeDirective } from './awesome/directives/awesome.directive';@NgModule({exports: [AwesomePipe,AwesomeComponent,AwesomeDirective]declarations: [AwesomePipe,AwesomeComponent,AwesomeDirective]
})
export class AwesomeModule { }

// ./app.module.tsimport { AwesomeModule } from './awesome.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [AwesomeModule,BrowserModule],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

// ./app.component.tsimport { Component } from '@angular/core';@Component({selector: 'app-root',template: `<!-- AwesomeDirective --><h1 appAwesome>This element mutates as per the directive logic of appAwesome.</h1><!-- AwesomePipe --><p>Generic output: {{ componentData | awesome }}</p><section><!-- AwesomeComponent --><app-awesome></app-awesome></section>`
})
export class AppComponent {componentData: string = "Lots of transformable data!";
}

<app-awesome></app-awesome> (component), awesome (pipe), and appAwesome (directive) are exclusive to AwesomeModule. Had it not exported these declarables or AppModule neglected to add AwesomeModule to its imports, then AwesomeModule’s declarables would not have been usable by AppComponent’s template. AwesomeModule is a feature module to the root NgModule AppModule.

<app-awesome></app-awesome> (component), awesome (pipe), and appAwesome (directive) are exclusive to AwesomeModule. Had it not exported these declarables or AppModule neglected to add AwesomeModule to its imports, then AwesomeModule's declarables would not have been usable by AppComponent's template. AwesomeModule is a feature module to the root NgModule AppModule.

Angular provides some its own modules that supplement the root upon their importation. This is due to these feature modules exporting what they create.

Static module methods (Static module methods)

Sometimes modules provide the option to be configured with a custom config object. This is achieved by leveraging static methods inside the module class.

An example of this approach is the RoutingModule which provides a .forRoot(...) method directly on the module.

To define your own static module method you add it to the module class using the static keyword. The return type has to be ModuleWithProviders.

To define your own static module method you add it to the module class using the static keyword. The return type has to be ModuleWithProviders .

// configureable.module.tsimport { AwesomeModule } from './awesome.module';
import { ConfigureableService, CUSTOM_CONFIG_TOKEN, Config } from './configurable.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';@NgModule({imports: [AwesomeModule,BrowserModule],providers: [ConfigureableService]
})
export class ConfigureableModule { static forRoot(config: Config): ModuleWithProviders {return {ngModule: ConfigureableModule,providers: [ConfigureableService,{provide: CUSTOM_CONFIG_TOKEN,useValue: config}]};}
}

// configureable.service.tsimport { Inject, Injectable, InjectionToken } from '@angular/core';export const CUSTOM_CONFIG_TOKEN: InjectionToken<string> = new InjectionToken('customConfig');export interface Config {url: string
}@Injectable()
export class ConfigureableService {constructor(@Inject(CUSTOM_CONFIG_TOKEN) private config: Config)
}

Notice that the object the forRoot(...) method returns is almost identical to the NgModule config.

The forRoot(...) method accepts a custom config object that the user can provide when importing the module.

imports: [...ConfigureableModule.forRoot({ url: 'http://localhost' }),...
]

The config is then provided using a custom InjectionToken called CUSTOM_CONFIG_TOKEN and injected in the ConfigureableService. The ConfigureableModule should be imported only once using the forRoot(...) method. This provides the CUSTOM_CONFIG_TOKEN with the custom config. All other modules should import the ConfigureableModule without the forRoot(...) method.

The config is then provided using a custom InjectionToken called CUSTOM_CONFIG_TOKEN and injected in the ConfigureableService . The ConfigureableModule should be imported only once using the forRoot(...) method. This provides the CUSTOM_CONFIG_TOKEN with the custom config. All other modules should import the ConfigureableModule without the forRoot(...) method.

NgModule Examples from Angular (NgModule Examples from Angular)

Angular provides a variety of modules importable from @angular. Two of the most commonly imported modules are CommonModule and HttpClientModule.

Angular provides a variety of modules importable from @angular . Two of the most commonly imported modules are CommonModule and HttpClientModule .

CommonModule is actually a subset of BrowserModule. Both provide access to the *ngIf and *ngFor structural directives. BrowserModule includes a platform-specific installation for the web browser. CommonModule omits this installation. The BrowserModule should import into the root NgModule of a web application. CommonModule provides *ngIf and *ngFor to feature modules not requiring a platform installation.

CommonModule is actually a subset of BrowserModule . Both provide access to the *ngIf and *ngFor structural directives. BrowserModule includes a platform-specific installation for the web browser. CommonModule omits this installation. The BrowserModule should import into the root NgModule of a web application. CommonModule provides *ngIf and *ngFor to feature modules not requiring a platform installation.

HttpClientModule provides the HttpClient service. Remember that services go in the providers array of the @NgModule metadata. They are not declarable. During compilation, every NgModule gets consolidated into one single module. Services are not encapsulated unlike declarables. They are all instantiable through the root injector located alongside the merged NgModule.

Back to the point. Like any other service, HttpClient instantiates into a class through its constructor via dependency injection (DI). Using DI, the root injector injects an instance of HttpClient into the constructor. This service lets developers make HTTP requests with the service’s implementation.

The HttpClient implementation includes into the HttpClientModule providers array. As long as the root NgModule imports HttpClientModule, HttpClient will instantiate from inside the root’s scope as expected.

The HttpClient implementation includes into the HttpClientModule providers array. As long as the root NgModule imports HttpClientModule , HttpClient will instantiate from inside the root's scope as expected.

結論 (Conclusion)

Chances are you may have already taken advantage of Angular’s NgModules. Angular makes it very easy to throw a module into the root NgModule’s imports array. Utilities are often exported from the imported module’s metadata. Hence why its utilities suddenly become available upon importation within the root NgModule.

Chances are you may have already taken advantage of Angular's NgModules. Angular makes it very easy to throw a module into the root NgModule's imports array. Utilities are often exported from the imported module's metadata. Hence why its utilities suddenly become available upon importation within the root NgModule.

NgModules work closely with plain JavaScript modules. One provides token while one uses them for configuration. Their teamwork results in a robust, modular system unique to the Angular framework. It provides a new layer of organization above all other schematics excluding the application.

Hopefully this article furthers your understanding of NgModules. Angular can leverage this system even further for some of the more exotic use-cases.