Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?

简介: Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?

Angular 应用里 server.ts 文件,下面这段代码的含义?

server.get('*', (req, res) => {
    res.render(indexHtml, {
      req,
      providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],
    });
  });

8ab2e29f3e7443b99541f34dc74ed000.png

在 Angular 应用中,server.ts 文件是用于构建服务器端渲染(Server-side rendering,简称 SSR)的入口文件。该文件中的代码通常使用 Node.js 的 http 模块创建一个 HTTP 服务器,用于处理客户端请求。


在这段代码中,server.get(‘*’, …) 表示当 HTTP 服务器收到任何请求时都会执行下面的回调函数。其中,res.render() 方法用于渲染 HTML 页面,并将其作为响应发送给客户端。这里的 indexHtml 是一个字符串,它是应用程序的 HTML 入口文件,在服务端渲染时需要将其填充为完整的 HTML 页面。可以通过 Node.js 的文件系统模块或者其他方式加载 HTML 入口文件。


res.render() 方法的第二个参数是一个对象,用于向 HTML 页面注入数据。在这个例子中,我们向 indexHtml 中注入了两个属性:


  • req:表示当前请求的上下文信息,包括请求的 URL、HTTP 头、HTTP 方法等。
  • providers:是一个数组,用于向 Angular 应用程序的 DI(Dependency Injection,依赖注入)系统中注入数据。在这个例子中,我们向 DI 系统中注入了一个 APP_BASE_HREF 的提供者,用于指定应用程序的根路径。req.baseUrl 表示当前请求的路径,它会作为 APP_BASE_HREF 的值被注入到 DI 系统中,从而在应用程序中可以使用 APP_BASE_HREF 依赖注入来获取当前请求的根路径。

需要注意的是,这段代码只是 server.ts 文件中的一部分,还需要在其他地方(例如在 main.ts 中)定义 APP_BASE_HREF 的提供者。这样才能在客户端和服务端都正确地使用 APP_BASE_HREF 依赖注入。


APP_BASE_HREF 是一个 Angular 应用中用于指定应用程序根路径的常量。它通常用于在应用程序中构建 URL,例如生成导航链接或者加载资源文件。


在浏览器端,APP_BASE_HREF 的默认值为 /,即应用程序根路径为域名或者子路径。例如,如果应用程序的 URL 是 http://example.com/my-app/,那么应用程序的根路径就是 /my-app/。在这种情况下,APP_BASE_HREF 的默认值就是 /my-app/。


在服务器端渲染(Server-side rendering,简称 SSR)时,APP_BASE_HREF 的值可能需要根据当前请求的路径动态设置。例如,如果当前请求的路径为 /my-app/foo/bar,那么应用程序的根路径应该是 /my-app/,而不是 /。在这种情况下,需要将 APP_BASE_HREF 的值设置为当前请求的路径,可以通过 Node.js 的 req.baseUrl 属性获取当前请求的路径,例如:

const { APP_BASE_HREF } = require('@angular/common');
// ...
app.get('*', (req, res) => {
  const providers = [
    { provide: APP_BASE_HREF, useValue: req.baseUrl }
  ];
  // ...
});

在应用程序中,可以使用 APP_BASE_HREF 常量来构建 URL,例如:

import { APP_BASE_HREF } from '@angular/common';
// ...
@Component({ /* ... */ })
export class MyComponent {
  constructor(@Inject(APP_BASE_HREF) private readonly baseHref: string) {}
  getMyUrl() {
    // 构建基于根路径的 URL
    return `${this.baseHref}/my-url`;
  }
}

在这个例子中,MyComponent 的构造函数中通过依赖注入获取了 APP_BASE_HREF 的值,然后使用它来构建 URL。


相关文章
|
15天前
|
缓存 JavaScript 前端开发
Angular 应用打包和部署
Angular 应用打包和部署
47 1
|
28天前
|
应用服务中间件 Java Maven
掌控视图的力量!深入解析 JSF 视图管理,揭秘视图生命周期的秘密,让你的应用更高效!
【8月更文挑战第31天】JavaServer Faces (JSF) 是一种强大的框架,用于管理 Web 应用程序的视图。本文通过具体案例介绍 JSF 视图管理的基础知识,包括创建、管理和销毁视图的过程。首先,在 Eclipse 中创建一个新 JSF 项目,并配置 Maven 依赖。接着,在 `WEB-INF` 目录下配置 `web.xml` 文件,设置 JSF servlet。
34 0
|
28天前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
34 0
|
28天前
|
开发者 Java 开发框架
JSF与EJB,打造企业级应用的神器!让你的Web应用更加稳定、高效!
【8月更文挑战第31天】在现代企业级应用开发中,JSF(JavaServer Faces)与EJB(Enterprise JavaBeans)是两大核心技术。JSF作为一款基于Java的Web应用框架,以其丰富的UI组件和表单处理功能著称;EJB则专注于提供分布式事务处理及远程调用等企业级服务。两者的结合为企业应用带来了高效便捷的开发模式。下文将通过一个简单的示例展示如何利用JSF进行用户信息的输入与保存,并借助EJB实现相关业务逻辑。尽管这一组合具有明显优势,但在实际应用中还需考虑其局限性并作出合理选择。
42 0
|
28天前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
38 0
|
28天前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
44 0
|
28天前
|
开发者 Windows Android开发
跨平台开发新选择:揭秘Uno Platform与.NET MAUI优劣对比,帮你找到最适合的框架,告别选择困难症!
【8月更文挑战第31天】本文对比了备受关注的跨平台开发框架Uno Platform与.NET MAUI的特点、优势及适用场景。Uno Platform基于WebAssembly和WebGL技术,支持Windows、iOS、Android及Web平台,而.NET MAUI由微软推出,旨在统一多种UI框架,支持Windows、iOS和Android。两者均采用C#和XAML进行开发,但在性能、平台支持及社区生态方面存在差异。Uno Platform在Web应用方面表现出色,但性能略逊于原生应用;.NET MAUI则接近原生性能,但不支持Web平台。开发者应根据具体需求选择合适的框架。
59 0
|
28天前
|
iOS开发 Android开发 MacOS
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
29 0
|
28天前
|
前端开发 JavaScript 开发者
JSF与WebSockets,打造实时通信魔法!让你的Web应用秒变聊天室,用户体验飞升!
【8月更文挑战第31天】在现代Web应用开发中,实时通信对于提升用户体验至关重要。本文探讨了如何在主要面向Web应用开发的JSF(JavaServer Faces)框架中引入WebSockets支持,以实现客户端与服务器之间的全双工通信。通过具体示例展示了在JSF应用中实现WebSockets的基本步骤:添加依赖、创建服务器端点以及在前端页面中嵌入JavaScript客户端代码。尽管这一过程中可能会遇到一些挑战,如复杂代码编写和额外配置需求,但借助AWS等云服务平台,开发者仍能高效地完成部署和管理工作,从而增强Web应用的实时通信能力。
32 0
|
28天前
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
38 0