角度路由示例 - Javascript

在 Angular 应用程序中，路由是一个非常重要的概念。它允许应用程序根据 URL 的变化加载不同的组件，并在不同的视图之间进行导航。本示例将向你展示如何在 Angular 中创建一个简单的路由。

准备工作

首先，确保你已经安装了 Angular CLI 并创建了一个新的 Angular 项目。可以使用以下命令创建一个新项目：

ng new my-app

然后进入项目目录：

cd my-app

添加路由

在 Angular 中，路由由 @angular/router 模块提供。要添加路由功能，需要首先导入相关的模块和服务。在 app.module.ts 文件中加入以下代码：

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

const appRoutes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- 调试用选项
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppModule { }

以上代码定义了一个路由配置数组 appRoutes，它包含了不同的路径和对应的组件。在这个例子中，我们定义了 home、about 和 contact 路径，以及一个通配符路径 **，用于匹配所有其他无效的路径。我们还使用 redirectTo 属性将根路径重定向到 /home 路径。

appRoutes 被传递给 RouterModule.forRoot() 方法，该方法会把路由配置应用到应用程序中。enableTracing 选项用于启用路由跟踪功能。

创建组件

在 src/app 目录中，创建几个组件文件。例如，我们创建 home.component.ts、about.component.ts 和 contact.component.ts 文件，并定义以下代码：

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

@Component({
  selector: 'app-home',
  template: `
    <h1>Welcome to the Home Page</h1>
  `
})
export class HomeComponent { }

@Component({
  selector: 'app-about',
  template: `
    <h1>About Us</h1>
    <p>This is the about page content.</p>
  `
})
export class AboutComponent { }

@Component({
  selector: 'app-contact',
  template: `
    <h1>Contact Us</h1>
    <p>This is the contact page content.</p>
  `
})
export class ContactComponent { }

其中，template 属性包含了组件的 HTML 模板。

更新根组件

在 app.component.ts 文件中，更新根组件的 HTML 模板，以添加一些导航链接：

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

@Component({
  selector: 'app-root',
  template: `
    <nav>
      <a routerLink="/home" routerLinkActive="active">Home</a>
      <a routerLink="/about" routerLinkActive="active">About</a>
      <a routerLink="/contact" routerLinkActive="active">Contact</a>
    </nav>

    <router-outlet></router-outlet>
  `
})
export class AppComponent { }

以上代码中，我们使用 routerLink 属性添加导航链接，并使用 routerLinkActive 属性为当前路由激活的链接添加一个 CSS 类。

<router-outlet></router-outlet> 标签用于显示通过路由加载的组件。

运行应用

最后，在命令行中运行以下命令启动应用程序：

ng serve --open

这将自动启动开发服务器，并在浏览器中打开应用程序。现在，当你点击导航链接时，应用程序将加载不同的组件，并相应地更新 URL。

结论

Angular 的路由功能使我们能够根据 URL 的变化加载不同的组件，并实现页面之间的导航。在本示例中，我们展示了如何使用 Angular 路由创建一个简单的导航功能。希望这个示例能够帮助你了解 Angular 路由的基本用法。