12、构建基于 Angular 的前端应用及调试技巧

构建基于 Angular 的前端应用及调试技巧

1. 构建前端应用

在开发基于 Angular 的前端应用时，有几个关键步骤需要完成。

首先，创建 processAgentJob 方法并调用 AgentService 的 saveAgentAction 方法，代码如下：

processAgentJob(form: NgForm) {
    this.service.saveAgentAction(this.agentJob).  
    subscribe(
        res => this.handleSuccess(res),
        error => this.handleError(error)
    );
}

接着，更新 agent-jobprocess.component.html 模板，创建一个表单，使状态和代理备注字段可编辑。

在路由方面，当前应用存在一个问题：若未登录就尝试访问 http://localhost:4200/agent 或 http://localhost:4200/jobrequest 等 URL，应用会直接重定向到相应页面，这是因为路由未受保护。为解决此问题，我们将使用 Angular 提供的 AuthGuard 接口，具体实现 CanActivate