Angular 시작하기: 첫 번째 애플리케이션에 경로 추가하기-JS 튜토리얼-php.cn

Angular 入门：向您的第一个应用程序添加路由

이 튜토리얼을 계속하기 전에 혼란과 실수를 피하기 위해 지금까지 수행한 모든 것을 요약하는 것이 좋습니다. 지난 세 가지 튜토리얼에서 단계를 놓친 경우 다시 돌아가서 필요한 사항을 변경하는 것이 좋습니다.

두 번째 튜토리얼에서는 country.ts、country-data.ts 和 country.service。 ts。 country.ts 文件用于存储 Country 类定义，以便我们可以将其导入到不同的文件中。 country-data.ts 文件用于存储名为 COUNTRIES 배열이라는 세 가지 파일을 만들었습니다.

이 배열은 애플리케이션에 표시하려는 모든 국가 개체를 저장합니다. country.service.ts 文件用于定义 CountryService 类，其中包含我们将用于在一个地方访问不同国家/地区信息的所有方法。 CountryService 클래스의 메서드는 인구, 면적 등의 기준을 기준으로 상위 국가를 가져오거나 특정 이름을 가진 국가에 대한 정보를 찾는 데 사용됩니다.

세 번째 튜토리얼에서는 모든 국가에 대한 정보에 액세스하고 저장하기 위한 다양한 메서드와 속성을 가진 애플리케이션용 HomeComponent。这是在名为 home.component.ts、home.component.html 和 home.component.css 的三个不同文件的帮助下完成的。 home.component.ts 文件包含 HomeComponent 클래스 정의를 만들었습니다.

HomeComponent 类中的方法依赖于 country.service.ts 中定义的方法来获取所有数据。 home.component.html 文件用于存储模板，该模板将在显示通过 home.component.ts 文件中定义的方法访问的所有数据时使用。 home.component.css 파일은 템플릿 내 다양한 요소의 모양을 제어하는 다양한 스타일 규칙을 제공하는 데 사용됩니다.

네 번째 튜토리얼에서는 애플리케이션용 구성 요소를 두 개 더 만듭니다. 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 파일에는 템플릿 파일의 요소에 적용되는 다양한 규칙이 포함되어 있습니다.

이 튜토리얼에서는 애플리케이션에서 라우팅을 구현합니다. 이런 방식으로 사용자는 한 구성 요소에서 다른 구성 요소로 쉽게 이동할 수 있습니다.

애플리케이션 셸 수정

이제 애플리케이션이 작동하도록 하려면 애플리케이션 셸을 변경하기만 하면 됩니다. app.component.ts 파일은 첫 번째 튜토리얼과 정확히 동일합니다.

으아아아

단, app.component.html파일은 변경하겠습니다. 이제 HTML 파일에 다음 코드가 포함되어야 합니다.

으아아아

이전에는 앱 제목만 표시되었습니다. 이제 템플릿에 탐색도 추가했습니다. routerLink 指令用于提供指向应用程序不同部分或页面的链接。 Angular 在 routerLink 指令的帮助下确定需要显示的组件。这些组件的渲染位置是使用 routerOutlets 控制的。这些组件在 router-outlet 마킹 후 렌더링됩니다.

템플릿 파일을 만든 후 다음 CSS를 app.component.css에 추가하여 탐색 링크와 헤더의 스타일을 지정합니다.

으아아아

이제 특정 경로나 경로에 대해 어떤 구성 요소를 렌더링해야 하는지 Angular에 알려드리겠습니다. src/app 目录中创建一个名为 app-routing.module.ts 파일에 다음 코드를 입력하세요.

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 中提供的资源。

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

위 내용은 Angular 시작하기: 첫 번째 애플리케이션에 경로 추가하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!