Erste Schritte mit Angular: Routen zu Ihrer ersten Anwendung hinzufügen

Bevor wir mit diesem Tutorial fortfahren, ist es eine gute Idee, alles, was wir bisher gemacht haben, zusammenzufassen, um Verwirrung und Fehler zu vermeiden. Wenn Sie in den letzten drei Tutorials Schritte verpasst haben, ist es eine gute Idee, noch einmal zurückzugehen und die erforderlichen Änderungen vorzunehmen.

Im zweiten Tutorial haben wir drei verschiedene Dateien mit dem Namen country.ts、country-data.ts 和 country.service。 ts。 country.ts 文件用于存储 Country 类定义，以便我们可以将其导入到不同的文件中。 country-data.ts 文件用于存储名为 COUNTRIESArrays erstellt.

Dieses Array speichert alle Länderobjekte, die wir in der Anwendung anzeigen möchten. Methoden der country.service.ts 文件用于定义 CountryService 类，其中包含我们将用于在一个地方访问不同国家/地区信息的所有方法。 CountryService-Klasse werden verwendet, um die Top-Länder anhand von Kriterien wie Bevölkerung und Fläche zu ermitteln oder um Informationen über ein Land mit einem bestimmten Namen zu finden.

Im dritten Tutorial haben wir die Definition einer HomeComponent。这是在名为 home.component.ts、home.component.html 和 home.component.css 的三个不同文件的帮助下完成的。 home.component.ts 文件包含 HomeComponent-Klasse für unsere Anwendung erstellt, die über verschiedene Methoden und Eigenschaften verfügt, um auf Informationen zu allen Ländern zuzugreifen und diese zu speichern.

HomeComponent 类中的方法依赖于 country.service.ts 中定义的方法来获取所有数据。 home.component.html 文件用于存储模板，该模板将在显示通过 home.component.ts 文件中定义的方法访问的所有数据时使用。 home.component.css-Dateien werden verwendet, um verschiedene Stilregeln bereitzustellen, die das Erscheinungsbild verschiedener Elemente innerhalb der Vorlage steuern.

Im vierten Tutorial erstellen wir zwei weitere Komponenten für unsere Anwendung. Für AllCountries 组件，我们创建了名为 all-countries.component.ts、all-countries.component.html 和 all-countries.component.css。对于 CountryDetail 组件，我们创建了名为 country-detail.component.ts、country-detail.component.html 和 country-detail.component.css。就像 HomeComponent 一样，.ts 文件包含我们组件的逻辑，.html 文件包含模板，而 .css-Dateien gibt es unterschiedliche Regeln, die für Elemente in der Vorlagendatei gelten.

In diesem Tutorial implementieren wir Routing in unserer Anwendung. Auf diese Weise können Benutzer problemlos von einer Komponente zur anderen navigieren.

Anwendungs-Shell ändern

Jetzt müssen wir nur noch Änderungen an der Anwendungs-Shell vornehmen, damit unsere Anwendung funktioniert. app.component.ts Die Datei wird genau die gleiche sein wie im ersten Tutorial.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Fun Facts About Countries';
}

Wir werden jedoch Änderungen an der app.component.html-Datei vornehmen. Die HTML-Datei sollte nun folgenden Code enthalten:

<h1>{{title}}</h1>
<nav>
  <a routerLink="/home">Go Back to Homepage</a>
  <a routerLink="/all-countries">List of all Countries</a>
</nav>
<router-outlet></router-outlet>

Bisher haben wir nur den Titel der App angezeigt. Jetzt haben wir der Vorlage auch eine Navigation hinzugefügt. routerLink 指令用于提供指向应用程序不同部分或页面的链接。 Angular 在 routerLink 指令的帮助下确定需要显示的组件。这些组件的渲染位置是使用 routerOutlets 控制的。这些组件在 router-outlet Nach dem Markieren gerendert.

Nachdem wir die Vorlagendatei erstellt haben, fügen wir app.component.css das folgende CSS hinzu, um die Navigationslinks und Kopfzeilen zu formatieren:

nav {
  margin: 0px;
  text-align: center;
}

h1 {
  font-family: 'Lato';
  color: #999;
  text-align: center;
}

h2 {
  font-size: 2em;
  margin-top: 0;
  padding-top: 0;
}

nav a {
  padding: 10px;
  text-decoration: none;
  margin: 10px 0px;
  display: inline-block;
  background-color: black;
  color: white;
  border-radius: 5px;
  font-family: 'Lato';
}

nav a:hover {
  background-color: gray;
}

nav a.active {
  color: #039be5;
}

Jetzt teilen wir Angular mit, welche Komponenten für eine bestimmte Route oder einen bestimmten Pfad gerendert werden müssen. Datei in src/app 目录中创建一个名为 app-routing.module.ts und fügen Sie den folgenden Code ein:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { AllCountriesComponent } from './all-countries/all-countries.component';
import { CountryDetailComponent } from './country-detail/country-detail.component';

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent },
    { path: 'detail/:name', component: CountryDetailComponent },
    { path: 'all-countries', component: AllCountriesComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }

我们首先导入所有必要的依赖项，包括我们想要为不同路由渲染的组件。之后，我们指定不同的路径以及当用户访问这些路径时应呈现的组件。您还可以重定向路径，就像我们对此国家/地区信息应用程序所做的那样。每当用户访问 http://localhost:4200/ 时，他们都会被重定向到 http://localhost:4200/home。请记住，指定重定向路由需要您为 pathMatch 属性指定一个值，以告诉路由器如何将 URL 与任何路由的路径相匹配。

如果用户访问 http://localhost:4200/all-countries，我们将在 router-outlet 标记之后呈现 AllCountriesComponent >app.component.html 文件显示所有国家/地区的列表。

我们在 AllCountriesComponent 以及 HomeComponent 的模板中使用了 routerLink 指令来提供用户可以点击阅读的链接更多关于任何国家的信息。在这些模板中呈现的每个国家/地区的 routerLink 值遵循以下格式：routerLink="/detail/{{country.name}}"。用于渲染 path 属性的值 CountryDetailComponent 已指定为 detail/:name，保留 routerLink 记住指令。该路径中的 :name 部分用于标识国家/地区的名称。

更新 app.module.ts 文件

为了拥有一个功能齐全的 Angular 应用程序，我们需要做的最后一件事是更新 app.module.ts 文件。如果您在文本编辑器中打开此文件，您会注意到我们使用 Angular CLI 生成的所有三个组件都已导入到该文件中。在我们进行任何更改之前，您的 app.module.ts 文件应包含以下代码：

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

import { AppComponent } from './app.component';
import { CountryService } from './country.service';
import { HomeComponent } from './home/home.component';
import { AllCountriesComponent } from './all-countries/all-countries.component';
import { CountryDetailComponent } from './country-detail/country-detail.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AllCountriesComponent,
    CountryDetailComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [CountryService],
  bootstrap: [AppComponent]
})

export class AppModule { }

我们只需对 app.module.ts 文件进行两处更改。首先，我们必须从我们在上一节中创建的 app-routing.module.ts 文件中导入 AppRoutingModule 类。其次，将该类添加到 @NgModule.providers 数组中。进行这些更改后，您的 app.module.ts 文件应如下所示。

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

import { AppComponent } from './app.component';
import { CountryService } from './country.service';
import { HomeComponent } from './home/home.component';
import { AllCountriesComponent } from './all-countries/all-countries.component';
import { CountryDetailComponent } from './country-detail/country-detail.component';

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AllCountriesComponent,
    CountryDetailComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [CountryService],
  bootstrap: [AppComponent]
})

export class AppModule { }

如果您移动到项目目录并在控制台中键入以下命令，您的应用程序将加载并呈现 HomeComponent。

ng serve --open

您可以单击各个国家/地区块或导航链接来加载不同的组件。

最终想法

在本系列中，我想教以前从未使用过 Angular 的读者如何创建基本的 Angular 应用。仅在我们完成上一个教程后，该应用程序才开始正常运行。这是故意的，因为我想避免在相同的文件之间来回移动，进行需要在后续教程中覆盖的更改。这对于初学者来说可能会非常困惑，因此我们只是一次性对文件进行了所有更改。

为了练习，您可以尝试创建更多组件，以不同的格式显示有关国家/地区的信息。

此外，如果还不清楚的话，JavaScript 已经成为事实上的网络语言之一。正如 Angular 在本教程中所演示的那样，它并非没有学习曲线，并且有大量的框架和库可以让您忙碌起来。如果您正在寻找其他资源来学习或在工作中使用，请查看我们在 Envato Market 中提供的资源。

如果您对本教程或本系列的任何其他教程有任何疑问，请随时发表评论。

Das obige ist der detaillierte Inhalt vonErste Schritte mit Angular: Routen zu Ihrer ersten Anwendung hinzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!