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。


相关文章
|
1月前
|
监控 安全 数据可视化
【教程】为什么要为 App 应用加固 ?如何为 App 应用加固 ?
【教程】为什么要为 App 应用加固 ?如何为 App 应用加固 ?
|
1月前
|
JavaScript
uni-app中关于格式化时间的js文件
uni-app中关于格式化时间的js文件
32 0
|
2月前
|
JavaScript API 开发工具
uni.app cell的用法以及相关api
uni.app cell的用法以及相关api
26 0
|
2月前
|
iOS开发 开发者
苹果iOS App Store上架操作流程详解:从开发者账号到应用发布
很多开发者在开发完iOS APP、进行内测后,下一步就面临上架App Store,不过也有很多同学对APP上架App Store的流程不太了解,下面我们来说一下iOS APP上架App Store的具体流程,如有未涉及到的部分,大家可以及时咨询,共同探讨。
|
2月前
|
存储 iOS开发 开发者
如何在上架App之前设置证书并上传应用
在上架App之前想要进行真机测试的同学,请查看《iOS- 最全的真机测试教程》,里面包含如何让多台电脑同时上架App和真机调试。
|
1月前
|
JavaScript Android开发
【问题篇】打包Vue-cli3创建的vue项目成App的apk文件
【问题篇】打包Vue-cli3创建的vue项目成App的apk文件
26 0
|
2月前
|
机器学习/深度学习 算法 数据可视化
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
基于Google Earth Engine云平台构建的多源遥感数据森林地上生物量AGB估算模型含生物量模型应用APP
106 0
|
21天前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
12 1
|
1天前
|
开发框架 前端开发 Android开发
专刊:从网页到应用:探索在线生成 App 的技术方法
【4月更文挑战第27天】在数字化时代,移动App变得不可或缺,而在线生成App的技术正逐渐兴起,为开发者提供快捷创建移动应用的途径。本文探讨了网页到App的转变过程,介绍了WebView嵌入、混合式开发框架和云端打包技术等方法,以及在线生成App的步骤、优势和挑战。虽然存在性能和功能限制,但随着技术进步,未来在线生成App将有更多可能性,为移动应用开发带来便利。
|
1月前
|
iOS开发 开发者
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题