Angular 入門: 最初のアプリケーションにルートを追加する

このチュートリアルを続ける前に、混乱や間違いを避けるためにこれまでに行ったことを要約することをお勧めします。最後の 3 つのチュートリアルで見逃した手順がある場合は、戻って必要な変更を加えることをお勧めします。

2 番目のチュートリアルでは、 country.ts、country-data.ts、および country.service という名前の 3 つの異なるファイルを作成しました。 ts。 country.ts ファイルは、 Country クラス定義を保存し、それを別のファイルにインポートできるようにするために使用されます。 country-data.ts ファイルは、COUNTRIES という名前の配列を保存するために使用されます。

この配列には、アプリケーションで表示するすべての国オブジェクトが格納されます。 country.service.ts ファイルは、さまざまな国の情報に 1 か所でアクセスするために使用するすべてのメソッドを含む CountryService クラスを定義するために使用されます。 CountryService クラスのメソッドは、人口や面積などの基準に基づいて上位の国を取得したり、指定された名前の国に関する情報を検索したりするために使用されます。

3 番目のチュートリアルでは、アプリケーションの HomeComponent を作成しました。これは、 home.component.ts、home.component.html、および home.component.css という 3 つの異なるファイルを使用して行われます。 home.component.ts ファイルには、HomeComponent クラスの定義が含まれています。このクラスには、すべての国に関する情報にアクセスして保存するためのさまざまなメソッドとプロパティがあります。

HomeComponent クラスのメソッドは、country.service.ts で定義されたメソッドに依存してすべてのデータを取得します。 home.component.html ファイルは、home.component.ts ファイルで定義されたメソッドを通じてアクセスされるすべてのデータを表示するときに使用されるテンプレートを保存するために使用されます。 home.component.css ファイルは、テンプレート内のさまざまな要素の外観を制御するさまざまなスタイル ルールを提供するために使用されます。

この 4 番目のチュートリアルでは、アプリケーション用にさらに 2 つのコンポーネントを作成します。 AllCountries コンポーネントの場合、all-countries.component.ts、all-countries.component.html、および all-countries という名前のコンポーネントを作成しました。コンポーネント.css。 CountryDetail コンポーネントの場合、country-detail.component.ts、country-detail.component.html、および country-detail という名前のコンポーネントを作成しました。コンポーネント.css。 HomeComponent と同様に、.ts ファイルにはコンポーネントのロジックが含まれ、.html ファイルにはテンプレートが含まれ、.css ファイルにはアプリケーションが含まれています。テンプレート ファイル内の要素にはさまざまなルールがあります。

このチュートリアルでは、アプリケーションにルーティングを実装します。こうすることで、ユーザーはあるコンポーネントから別のコンポーネントに簡単に移動できるようになります。

アプリケーションシェルを変更する

あとは、アプリケーションを動作させるためにアプリケーション シェルに変更を加えるだけです。 app.component.ts ファイルは、最初のチュートリアルとまったく同じになります。

ただし、app.component.html ファイルに変更を加えます。 HTML ファイルには次のコードが含まれているはずです:

以前は、アプリケーションのタイトルのみが表示されていました。ここで、テンプレートにナビゲーションも追加しました。 routerLink ディレクティブは、アプリケーションのさまざまな部分またはページへのリンクを提供するために使用されます。 Angular は、routerLink ディレクティブを使用して、どのコンポーネントを表示する必要があるかを決定します。これらのコンポーネントのレンダリング位置は、routerOutlets を使用して制御されます。これらのコンポーネントは、router-outlet タグの後に表示されます。

テンプレート ファイルを作成した後、次の CSS を app.component.css に追加して、ナビゲーション リンクとヘッダーのスタイルを設定します。 リーリー

src/app ディレクトリに app-routing.module.ts というファイルを作成し、次のコードをそこに挿入します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">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 { } </pre><div class="contentsignin">ログイン後にコピー</div></div> <p>我们首先导入所有必要的依赖项，包括我们想要为不同路由渲染的组件。之后，我们指定不同的路径以及当用户访问这些路径时应呈现的组件。您还可以重定向路径，就像我们对此国家/地区信息应用程序所做的那样。每当用户访问 http://localhost:4200/ 时，他们都会被重定向到 http://localhost:4200/home。请记住，指定重定向路由需要您为 <code class="inline">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 中提供的资源。

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

以上がAngular 入門: 最初のアプリケーションにルートを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。