【Angular开发】Angular 16发布:发现前7大功能

Angular 于2023年5月3日发布了主要版本升级版Angular 16。作为一名Angular开发人员,我发现这次升级很有趣,因为与以前的版本相比有一些显著的改进。

因此,在本文中,我将讨论Angular 16的前7个特性,以便您更好地理解。

1.Angular Signals

Angular Signals是自Angular 16路线图发布以来,开发人员一直在等待的主要功能。虽然Solid.js启发了这个概念,但它对Angular来说是一个全新的概念。它允许您定义反应值并表达它们之间的依赖关系。换句话说,您可以有效地使用Angular信号来管理Angular应用程序中的状态更改。

信号可以被识别为用户可以同步访问的规则变量。但它还附带了一些附加功能,比如通知其他人(组件模板、其他信号、函数等)其值的更改,以及以声明的方式创建派生状态。

以下示例显示了如何使用“角度”信号。

import { Component, computed, effect, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h1>Calculate Area</h1>
    <p>Answer : {{ area() }}</p>
    <button (click)="calculateArea(10,10)">Click</button>
  `,
})

export class App {
    height = signal(5);
    width = signal(5);
    area = computed(() => this.height() * this.width());
    constructor() {
      effect(() => console.log('Value changed:', this.area()));
    }
    calculateArea(height: number, width: number) {
      this.height.set(height);
      this.width.set(width);
    }
}

在本例中,我创建了一个计算值区域和两个名为height和width的信号。当通过调用calculateArea()函数更改信号值时,计算值将更新并显示在模板中。这里有一个工作的Stacklitz示例供您尝试。

虽然这看起来很神奇,但Angular并没有放弃zone.js和RxJS。信号是一个可选功能,Angular在没有它们的情况下仍然可以工作。Angular将在即将推出的版本中逐步改进Signals,使其成为一个完整的包。

2.服务器端渲染

与React相比,缺乏服务器端渲染(SSR)支持是Angular最显著的缺点之一。Angular 16通过对服务器端渲染的一些重大改进解决了这个问题。

以前,Angular对SSR使用破坏性水合作用。在破坏性水合中,服务器首先将应用程序渲染并加载到浏览器。然后,当客户端应用程序下载并启动时,它会破坏已经渲染的DOM,并从头开始重新渲染客户端应用程序。这种方法导致了重大的用户体验问题,如屏幕闪烁,并对一些核心Web Vitals(如LCP或CLS.anug)产生了负面影响。

Angular 16引入了一种称为非破坏性水合的新方法来防止这些缺点。下载并引导客户端应用程序时,DOM不会被破坏。它使用相同的DOM,同时使用事件侦听器等客户端功能对其进行丰富。

无损水合作用仍处于开发者预览阶段。但是,您可以通过在引导应用程序时添加provideClientHydration()作为提供程序来启用它。

import {
 bootstrapApplication,
 provideClientHydration,
} from '@angular/platform-browser';

...

bootstrapApplication(RootCmp, {
 providers: [provideClientHydration()]
});

根据Angular的官方发布说明,这只是一个开始。他们计划在下一步探索部分水合作用,并满足开发人员的几个要求。您可以在这里找到更多关于Angular SSR开发计划的信息。

3.实验性Jest支持

Jest是JavaScript开发人员中使用最多的测试框架之一。Angular已经听取了开发人员的请求,并在Angular 16中引入了实验性的Jest支持。

您所要做的就是使用npm安装Jest并更新angular.json文件。

// Install jest
npm install jest --save-dev

// angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "test": {
          "builder": "@angular-devkit/build-angular:jest",
          "options": {
            "tsConfig": "tsconfig.spec.json",
            "polyfills": ["zone.js", "zone.js/testing"]
          }
        }
      }
   }
}

他们计划在未来的更新中将所有现有的Karma项目转移到WebTestRunner。

4.基于esbuild的构建系统

Angular 16为开发服务器(ng-server)引入了一个基于esbuild的构建系统。Vite为这个新的开发服务器供电,并使用esbuild来构建工件。

这仍然处于开发人员预览阶段,但您可以通过使用以下内容更新angular.json文件来启用它。

"architect": {
  "build": { 
    "builder": "@angular-devkit/build-angular:browser-esbuild",
...

5.Required Inputs

在Angular 16中,现在可以根据需要定义输入值。您可以使用@Input装饰器或@Component装饰器输入数组来定义一个。

export class App {
  @Input({ required: true }) name: string = '';
}

// or
@Component({
  ...
  inputs: [
    {name: 'name', required: true}
  ]
})

6.路由器输入

Angular 16允许您将路由参数绑定到组件输入中,从而无需将ActivatedRoute注入组件。若要启用此功能,必须导入RouterModule并在app.module.ts文件中启用bindToComponentInputs属性。

@NgModule({
 imports: [
   ...
   RouterModule.forRoot([], {
     bindToComponentInputs: true 
   })
   ...
 ],
 ...
})
export class AppModule {}

The following example shows how we can bind query params to component inputs.

// Route
const routes: Routes = [
 {
   path: "articles",
   component: ArticleComponent,
 },
];

// Component
@Component({})
export class ArticleComponent implements OnInit {
  
  @Input() articleId?: string; 
  
  ngOnInit() {
  
  }
}

Now, when you navigate to the articles route, you can pass query params using the name of the component input. In this case, an example URL will look like the following.

http://localhost:4200/articles?articleId=001

If the input name is too long, you can rename the query parameter.

http://localhost:4200/articles?id=001 

@Input('id') articleId?: string;

You can also use this approach to bind path parameters and route data.

7.独立项目支持

Angular 14开始支持独立于模块的独立组件。Angular 16通过支持独立项目创建,将此提升到了一个新的水平。

Angular 16有一个通过Angular CLI创建独立项目的标志。您必须使用-standalone标志执行ng个新命令。然后,它将生成一个没有NgModules的项目。

ng new --standalone

Standalone Project Support in Angular 16

其他功能

Angular 16还提供了许多其他改进开发人员体验的更改:

  • 通过语言服务自动导入组件和管道。
  • 通过CLI支持TypeScript 5.0、ECMAScript装饰器、服务工作者和SCP。
  • CSP支持在线样式。
  • 自闭标签。
  • 停止对ngcc和TypeScript 4.8的支持。

结论

总体而言,Angular 16提供了一些重要功能。这些功能中的大多数都是我们在后续版本中可以期待的更大更新的垫脚石。您可以按照Angular的官方文档将现有项目升级到Angular 16。

如果您有任何问题,请通过我们的支持论坛、支持门户或反馈门户与我们联系。我们非常乐意为您提供帮助!

本文:【Angular开发】Angular 16发布:发现前7大功能 | 程序员云开发,云时代的程序员.

欢迎收藏【架构师酒馆】和【开发者开聊】

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/229302.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

12.8 作业 C++

使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;密码是否为…

Vue 核心 数据监听 computed | watch

Vue 核心 数据监听 computed | watch 一、今日学习目标 1.指令补充 指令修饰符v-bind对样式增强的操作v-model应用于其他表单元素 2.computed计算属性 基础语法计算属性vs方法计算属性的完整写法成绩案例 3.watch侦听器 基础写法完整写法 4.综合案例 &#xff08;演示&…

视频剪辑:视频转码实用技巧,批量将MP4转为MP3音频

随着数字媒体设备的普及&#xff0c;视频和音频文件已成为日常生活中的重要组成部分。有时&#xff0c;可能要将MP4视频文件转换为MP3音频文件&#xff0c;以提取其中的音频内容或者进行其他处理。这是耗费时间的任务&#xff0c;那要如何操作呢&#xff1f;本文详解云炫AI智剪…

使用pytorch查看中间层特征矩阵以及卷积核参数

这篇是我对哔哩哔哩up主 霹雳吧啦Wz 的视频的文字版学习笔记 感谢他对知识的分享 1和4是之前讲过的alexnet和resnet模型 2是分析中间层特征矩阵的脚本 3是查看卷积核参数的脚本 1设置预处理方法 和图像训练的时候用的预处理方法保持一致 2实例化模型 3载入之前的模型参数 4载入…

C#网络编程(System.Net命名空间)

目录 一、System.Net命名空间 1.Dns类 &#xff08;1&#xff09;示例源码 &#xff08;2&#xff09;生成效果 2.IPAddress类 &#xff08;1&#xff09;示例源码 &#xff08;2&#xff09;生成效果 3.IPEndPoint类 &#xff08;1&#xff09; 示例源码 &#xff0…

计算机方向的一些重要缩写和简介

参考&#xff1a; 深度学习四大类网络模型 干货|机器学习超全综述&#xff01; 机器学习ML、卷积神经网络CNN、循环神经网络RNN、马尔可夫蒙特卡罗MCMC、生成对抗网络GAN、图神经网络GNN——人工智能经典算法 MLP&#xff08;Multi Layer Perseption&#xff09;用在神经网络中…

Conda常用命令总结

使用conda或anaconda的小伙伴们都知道&#xff0c;图形界面时不靠谱的&#xff0c;而在命令行下&#xff0c;所有的操作就会稳定很多&#xff0c;且极少出现问题。因此&#xff0c;熟记conda的命令行就变得十分有用。但对于我这样近50岁依旧奋斗在代码第一线的大龄程序员而已&a…

作业12.8

1. 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数。将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;密码是…

HarmonyOS Developer——鸿蒙【构建第一个JS应用(FA模型)】

创建JS工程 JS工程目录结构 构建第一个页面 构建第二个页面 实现页面间的跳转 使用真机运行应用 说明 为确保运行效果&#xff0c;本文以使用DevEco Studio 3.1 Release版本为例&#xff0c;点击此处获取下载链接。 创建JS工程 若首次打开DevEco Studio&#xff0c;请点击…

C# Solidworks二次开发:选择管理器相关的API介绍

今天在讲述主要内容之前&#xff0c;先说一个不太相关的问题。 我之前在其他文章中看到有一些朋友在问为什么获取到的点位数据需要乘以1000进行单位转换&#xff0c;其实原因是这样的&#xff0c;在所有使用的API中如果没有特殊说明&#xff0c;所有的长度单位都是米&#xff…

解读链上经济“一等公民”:加密AI代理的优势和前沿应用

机器人正在成为加密经济的“一等公民”&#xff0c;最近的案例就能印证这一趋势。 搜索者&#xff08;Searchers&#xff09;部署像Jaredfromsubway.eth这样的机器人&#xff0c;利用真人用户对便利的渴望在DEX抢先交易。Banana Gun和Maestro允许真人用户通过Telegram的便利进…

网络编程基础api

1. IP 协议 1.1 IP 分片 &#xff08;1&#xff09;IP 分片和重组主要依靠 IP 头部三个字段&#xff1a;数据报标识、标志和片偏移 以太网帧的 MTU 是 1500 字节&#xff1b; 一个每个分片都有自己的 IP 头部&#xff0c;它们都具有相同的标识值&#xff0c;有不同的片偏移…

MVC、MVP、MVVM模式的区别

前言&#xff1a;这三个表现层框架设计模式是依次进化而形成MVC—>MVP—>MVVM。在以前传统的开发模式当中即MVC模式&#xff0c;前端人员只负责Model&#xff08;数据库&#xff09;、 View&#xff08;视图&#xff09;和 Controller /Presenter/ViewModel&#xff08;控…

【SQL开发实战技巧】系列(四十八):Oracle12C常用新特性☞多分区操作和管理

系列文章目录 【SQL开发实战技巧】系列&#xff08;一&#xff09;:关于SQL不得不说的那些事 【SQL开发实战技巧】系列&#xff08;二&#xff09;&#xff1a;简单单表查询 【SQL开发实战技巧】系列&#xff08;三&#xff09;&#xff1a;SQL排序的那些事 【SQL开发实战技巧…

总线(什么是南北桥?您都用过哪些总线?)

什么是总线&#xff1f; 计算机系统中的总线&#xff08;Bus&#xff09;是指计算机设备和设备之间传输信息的公共数据通道&#xff0c;是连接计算机硬件系统内多种设备的通信线路&#xff0c;它的一个重要特征是由总线上的所有设备共享&#xff0c;因此可以将计算机系统内的多…

ky10 x86 一键安装wvp gb28181 pro平台

下载代码 git clone https://gitcode.net/zengliguang/ky10_x86_wvp_record_offline_install.gitfinalshell mobaxterm 修改服务器ip 查看服务器ip ip a 在脚本文件中修改服务器ip 执行安装脚本 切换到root用户 sudo su cd ky10_x86_wvp_record_of

Qt12.8

使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;密码是否为…

代码随想录算法训练营 --- 第五十九天

今天同样是单调栈&#xff0c;第二题很重要。 第一题&#xff1a; 简介&#xff1a; 本题可以说和上一题很是相似&#xff0c;只是有一点不同&#xff0c;数组是循环的。本题有两种巧妙地解法&#xff0c;都不难。 第一种方法&#xff08;也是第一个想出来的方法&#xff09…

会个postman面试就要15k,怎么敢的啊!

postman应用实战 下面以微信公众平台举例&#xff1a; 第一步、先创建文件夹 第二步、打开postman&#xff0c;创建collections 第三步、设置环境变量&#xff0c;全局变量 设置环境变量&#xff1b;如下图&#xff1a; 设置全局变量&#xff1b;如下图&#xff1a; 第四步、…

机器人阻抗控制直观(图示理解)与控制框架/架构

在刚性碰撞下&#xff0c;机器人的阻抗调节可以使其更好地适应外部环境。具体来说&#xff0c;通过建立力与位移之间的关系&#xff0c;并改变阻抗参数&#xff0c;可以控制机器人对外部力的响应。 在具体实现上&#xff0c;可以采用基于位置的阻抗控制或基于力的阻抗控制。基于…