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 翻译,未经许可禁止转载。
谷歌放弃毛利率 99%业务:不想用我们的可以免费迁出!上云免费、下云无限“贵”的时代即将结束?
并发王座易主?Java 21 虚拟线程强势崛起,Go & Kotlin还稳得住吗 | 盘点
谷歌新年大裁员,引硅谷裁员潮!OpenAI正式推出GPT Store,但第一批应用已被像素级抄袭;腾讯服务器深夜崩溃 | Q资讯
微信扫码关注该文公众号作者