首页 > 其他分享 >Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?

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

时间:2023-04-04 09:22:37浏览次数:43  
标签:req APP 路径 ts 应用程序 server BASE HREF

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

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

在这里插入图片描述

在 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。

标签:req,APP,路径,ts,应用程序,server,BASE,HREF
From: https://www.cnblogs.com/sap-jerry/p/17285268.html

相关文章

  • SAP Commerce Cloud 里的 jsapps 和 jsapps-ssr 容器
    SAPCommerceCloudVersion2,简称SAPCCV2,上面有两种container,jsapps和jsapps-ssr,二者区别是什么?SAPCommerceCloudVersion2(简称SAPCCV2)是SAP提供的一款云端电商解决方案。在SAPCCV2中,"jsapps"和"jsapps-ssr"都是用于部署Web应用程序的容器,但它们之间存在一些区别......
  • Appium移动端UI自动化介绍
    一.appium基本介绍1.搭建移动端自动化环境,具体搭建环境可以百度a.安装jdk并配置环境变量b.安装安装sdk并配置环境变量c.安装node.jsd.安装appiume.安装夜神模拟器 2.查看被测app包信息 1.冷启动时,windows系统输入adb logcat| findstr START  2.通过aapt命......
  • Appium移动端自动化环境搭建
    一、JDK安装    1.先下载好jdk,下载地址:http://download.oracle.com/otn-pub/java/jdk/8u101-b13/jdk-8u101-windows-x64.exe    2.傻瓜式进行安装    3.配置环境变量     a.先新建JVAV_HOME         b.编辑path   ......
  • APP自动化
    一、APP工具1、三大工具appium、Robtium(只支持Java语言)、macaca2、原理:APP自动化执行原理 二、移动测试环境搭建1、搭建步骤  JDK安装:安卓应用或者开发工具使用java语言开发。必须使用JDK.AndroidSDK安装:1、Android开发工具包,......
  • Linux如何让Redis-server在后台运行
    文档课题:Linux如何让Redis-server在后台运行.系统:rhel7.9数据库:redis6.2.61、问题描述redis安装后运行reids-server命令,内容显示如下.此时在该session中无法执行其它操作,当执行ctrl+c关闭界面后才能输入其它命令,但此时redis进程也会被关闭.[[email protected].......
  • Gangstar Rio: City of Saints上手评测
    Gameloft的每一款游戏一直都收到一大帮粉丝的追捧,而《里约热内卢:圣徒之城》却稍微一些不一样的感觉,图形和整个游戏都很出色,但由于对故事进行了改变和加入了大量不必要的粗俗俚语,这让整个游戏的内容稍微变了味。游戏名称:《里约热内卢:圣徒之城》开发商:Gameloft价格:$6.99版本:1.0.0评......
  • AppMobi即将开源所有HTML5 API
    据国外媒体报道,HTML5开发公司AppMobi将于黑色星期五(11月25日)开源其所有HTML5设备端API。AppMobi正在致力于推动HTML5的发展,并希望通过HTML5影响整个互联网生态系统。AppMobi的HTML5不仅涉及台式电脑,还包括移动设备,曾开发过很多可访问摄像头、加速计和GPS等本地功能的HTML5......
  • Lights:奇妙的WebGL 3D体验
    了解WebGL技术的人应该都知道,WebGL是一种3D绘图标准,通过该技术标准Web开发人员可以借助系统显卡在浏览器里更流畅地展示3D场景和模型,创建复杂的导航和数据视觉化。而Lights就是这样一款拥有强大WebGL显示功能的产品,无需插件便可在支持WebGL的浏览器(如Chrome、Safari和Firefox等)中......
  • php-websocket hyperf/websocket-server/client 客户端和服务器实时双向数据传输
    WebSocket服务WebSocket是一种通信协议,可在单个TCP连接上进行全双工通信。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocketAPI中,浏览器和服务器只需要完成一次握手,两者之间就可以建立持久性的连接,并进行双向数据传输。Hyperf......
  • POJ 2773 Happy 2006 二分+容斥原理(二进制枚举或dfs)
    Happy2006TimeLimit: 3000MS MemoryLimit: 65536KTotalSubmissions: 14003 Accepted: 4946DescriptionTwopositiveintegersaresaidtoberelativelyprimetoeachotheriftheGreatCommonDivisor(GCD)is1.Forinstance,1,3,5,7,9...areallrelativel......