首页 > 其他分享 >关于 Angular Universal 应用执行时需要 Browser API 的问题

关于 Angular Universal 应用执行时需要 Browser API 的问题

时间:2023-02-18 21:12:58浏览次数:30  
标签:浏览器 服务器端 Universal 应用程序 API Angular 路由

由于 Angular Universal Application 不在浏览器中执行,因此服务器上可能缺少某些浏览器 API 和功能。

例如,服务器端应用程序不能引用仅供浏览器使用的全局对象,例如 Window,Document,Navigator 和 Location 等对象。

什么是 Angular Universal Application?

Angular Universal 是 Angular 框架的一个功能,它允许在服务器端进行渲染,使得应用程序在客户端和服务器端均可运行。Angular Universal 应用程序可以在浏览器中以传统方式运行,也可以在服务器上进行渲染并返回 HTML,从而提高了应用程序的性能、SEO(搜索引擎优化)和用户体验。

具体来说,Angular Universal 可以让 Angular 应用程序在服务器端预先渲染(即将组件渲染成HTML),以便浏览器可以更快地呈现应用程序。这种预渲染过程可以减少浏览器需要执行的工作量,从而提高应用程序的性能和用户体验。此外,预渲染也有助于提高SEO,因为搜索引擎可以更好地理解和索引预渲染的 HTML 内容。

要创建一个 Angular Universal应用程序,需要将应用程序修改为支持服务器端渲染,并使用一个支持服务器端渲染的 Web 服务器。Angular 提供了一些工具和指南,以帮助开发人员实现这一点。

Angular 为这些对象提供了一些可注入的抽象,例如 Location 或 DOCUMENT; 它可能足以替代这些 API。 如果 Angular 不提供它,则可以编写新的抽象,在浏览器中委托给浏览器 API,在服务器上委托给替代实现(也称为 shimming)。

同样,如果没有鼠标或键盘事件,服务器端应用程序就不能依赖于用户单击按钮来显示组件。 应用程序必须仅根据传入的客户端请求来确定要呈现的内容。 这是使应用程序可路由(routable)的一个很好的论据。

什么是 Angular 应用的 Routable 特性?

在 Angular 应用中,一个 Routable 特性是指一个组件或模块可以通过路由配置进行导航,即它们可以由 Angular 路由器来管理导航。Routable 特性是指应用程序中的一些组件和模块具有自己的路由路径,并且可以被导航到该路径。

在 Angular 中,Routable 特性可以通过以下方式来实现:

(1) 定义路由:在应用程序中定义路由,以指定如何导航到每个组件和模块。这可以通过在应用程序中的路由配置中进行定义。

(2) 使用路由器:在应用程序中使用 Angular 路由器来处理路由导航。通过使用 routerLink 指令,可以在模板中设置链接,使用户能够在应用程序中导航。

(3) 定义路由参数:通过在路由路径中使用参数,可以定义动态路由,使得组件或模块能够根据参数的不同显示不同的内容。

(4) 使用路由守卫:通过使用路由守卫,可以在导航到某个组件或模块之前或之后执行一些操作,例如身份验证或权限检查等。

Routable 特性是 Angular 应用中非常重要的一个概念,它使得开发人员能够构建具有复杂导航和动态内容的应用程序。

标签:浏览器,服务器端,Universal,应用程序,API,Angular,路由
From: https://www.cnblogs.com/sap-jerry/p/17133606.html

相关文章

  • fastapi_sqlalchemy_mysql_rbac_jwt_gooddemo
    /Users//codelearn/fastapi_sqlalchemy_mysql_01/init_test_data.py#!/usr/bin/envpython3#-*-coding:utf-8-*-importasynciofromemail_validatorimportEmai......
  • 关于 Angular 应用的入口
    ANGULAR.JSON是包含Angular项目的各种属性和配置的文件。这是构建器首先引用的文件,用于查找所有路径和配置并检查哪个是主文件。下面是一个hello-world应用程序的ang......
  • Angular 应用里 index.html 的作用
    index.html位于应用程序的src文件夹中。编译器在此文件的末尾动态添加所有javascript文件。由于现在所有组件都是已知的,因此html文件调用根组件即app-root。根......
  • Linux 获取设置资源API
    getrlimit()/setrlimit()函数获取或设置资源使用限制,linux下每种资源都有相关的软硬限制,软限制是内核强加给相应资源的限制值,硬限制是软限制的最大值。非授权调用的进程......
  • 关于 Angular Universal 应用执行时需要 Browser API 的问题
    由于AngularUniversalApplication不在浏览器中执行,因此服务器上可能缺少某些浏览器API和功能。例如,服务器端应用程序不能引用仅供浏览器使用的全局对象,例如Window,Do......
  • API 接口测试工具--Eoapi
    一个简单、好用的API接口测试工具——Eoapi,下面会给大家简单演示一下,如何用这款工具进行API接口测试。  API接口测试在测试中我们可能会关注状态码、响应体以......
  • 打造自己的ChatGPT:OpenAI的API接入技巧
    打造自己的ChatGPT:OpenAI的API接入技巧Created:February17,20233:35PMStatus:Post简介......
  • 关于工具软件:Apipost和Apifox哪个更好用看这篇就够了
    很多人搞不清楚Apipost和Apifox到底有什么区别,以下为实际体验,各位能够依据本身状况参考一下,有什么不足之处还请各位大佬多多指教。一、产品定位这块能够间接看他们的官网,个......
  • 最新《API行业白皮书》正式发布!
    API(应用程序接口)作为传输数据与连接服务的桥梁,越来越广泛地应用在Web、移动应用和后端系统集成等场景中。在互联网+的背景趋势下,API更加深入地应用到各行各业的数字化生态之......
  • 最新《API行业白皮书》正式发布!
    API(应用程序接口)作为传输数据与连接服务的桥梁,越来越广泛地应用在Web、移动应用和后端系统集成等场景中。在互联网+的背景趋势下,API更加深入地应用到各行各业的数字化生态......