Angular 17 发布，带来了全新的品牌化

Angular，作为一种流行的单页面应用（SPA）框架，最近发布了版本 17，引入了声明式块模板语法，并对框架文档和 Logo 进行了全面修改。

声明性式模板指的是 Angular 模板引擎引入的一组新命令，其形式如下：

@command {  <component>}

第一个实现，内置控制流，简化了使用 for/switch/if 语句。

当前的 Angular 块模板语法常常会让新的开发者感到困惑，它不仅冗长而且将语句隐藏在 HTML 中，很容易被忽视。

<div [ngSwitch]="expression">  <component-one *ngSwitchCase="valu1"/>  <component-two *ngSwitchCase="value2"/>  <default-component *ngSwitchDefault/></div>

相比之下，新的语法将条件语句与组件分开，使它们更容易理解。

@switch (expression) {  @case ('value1') { <component-one/> }  @case ('value2') { <component-two/> }  @default { <user-dashboard/> }}

虽然新的块模板语法看起来只是一种简单的人性化改进，但它还提供了更好的类型检查、更小的捆绑大小以及在使用 for 循环时显著的性能提升。

内置控制流特性仍处于开发者预览阶段，因为在内容投射方面仍存在一些问题。要在项目中启用它，请在 CLI 中执行下面的代码：

ng generate @angular/core:control-flow

使用声明性块模板语法引入的第二个特性是可延迟视图。

可延迟视图为 ViewContainerRef 提供了一个简单的替代方案，它提供了一种声明性的方式，使用 @defer 标签来延迟模板的部分内容。

@defer {  <deferred-component />}  @placeholder {  <div>Loading...</div>}

defer 命令接受一个可选的触发器作为参数，用于确定何时加载延迟加载的组件。其中最有用的策略之一是 “on viewport”，即在组件进入视图时渲染组件。

@defer (on viewport) {  <deferred-component />} @placeholder {  <div>Loading...</div>}

“on idle” 策略会在浏览器空闲时获取组件。这是默认行为。

@defer (on viewport; prefetch on idle) {  <comment-list />} @placeholder {  <div>Loading...</div>}

在文档方面，Angular 团队对 Angular 品牌和文档页面进行了首次重大改版。

自 2012 年 AngularJS 首次发布以来，Angular 品牌几乎没有发生太大变化，早该做出一些变化了。新的、丰富多彩的品牌化让旧 Logo 变得更加现代。

新的品牌化是新文档页面的一部分，文档提供了更简单的入门流程，以及一个新的交互式教程和沙盒。虽然现有开发者可能需要重新适应，但整体体验似乎比旧文档更加流畅。

要了解完整的变更，请查阅 Angular Github 代码库中的官方发布说明。Angular 是基于 MIT 许可的开源软件。

查看英文原文：

https://www.infoq.com/news/2024/01/angular-17-new-branding/

声明：本文为 InfoQ 翻译，未经许可禁止转载。