ng url映射 端口

Angular中的URL映射通常是指前端路由的配置，而不是在服务器端配置的端口映射。前端路由是在前端JavaScript应用中管理视图切换的一种技术，不需要重新加载页面即可显示不同的内容。Angular内置了路由模块，允许开发者定义路由规则，将URL路径映射到特定的组件。

在Angular中配置URL映射（前端路由）的基本步骤如下：

1. 首先，需要在Angular模块中导入`Router`模块，并在模块的`@NgModule`装饰器中声明`RouterModule`和`Routes`。

2. 定义路由配置，即一个路由数组，其中每个路由包含路径（`path`）、组件（`component`）、子路由（`children`）、数据（`data`）等属性。

3. 在模块中通过`imports`数组引入配置好的`RouterModule`，并使用`forRoot`方法提供路由配置，这样路由器就知道如何处理应用中的导航。

4. 在组件的模板中，可以使用`<router-outlet>`指令来指定子视图的加载位置。

5. 使用`<a [routerLink]="['/route']">`指令来创建导航链接，以实现客户端路由跳转，而不是传统的通过改变浏览器地址栏的URL并重新加载页面。

下面是一个简单的路由配置示例：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Page1Component } from './page1.component';
import { Page2Component } from './page2.component';

const routes: Routes = [
  { path: '', redirectTo: '/page1', pathMatch: 'full' },
  { path: 'page1', component: Page1Component },
  { path: 'page2', component: Page2Component }
];

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

<!-- app.component.html -->
<nav>
  <a [routerLink]="['/page1']">Page 1</a>
  <a [routerLink]="['/page2']">Page 2</a>
</nav>
<router-outlet></router-outlet>