跳转到主要内容

标签(标签)

资源精选(342) Go开发(108) Go语言(103) Go(99) angular(82) LLM(75) 大语言模型(63) 人工智能(53) 前端开发(50) LangChain(43) golang(43) 机器学习(39) Go工程师(38) Go程序员(38) Go开发者(36) React(33) Go基础(29) Python(24) Vue(22) Web开发(20) Web技术(19) 精选资源(19) 深度学习(19) Java(18) ChatGTP(17) Cookie(16) android(16) 前端框架(13) JavaScript(13) Next.js(12) 安卓(11) 聊天机器人(10) typescript(10) 资料精选(10) NLP(10) 第三方Cookie(9) Redwoodjs(9) LLMOps(9) Go语言中级开发(9) 自然语言处理(9) PostgreSQL(9) 区块链(9) mlops(9) 安全(9) 全栈开发(8) ChatGPT(8) OpenAI(8) Linux(8) AI(8) GraphQL(8) iOS(8) 软件架构(7) Go语言高级开发(7) AWS(7) C++(7) 数据科学(7) whisper(6) Prisma(6) 隐私保护(6) RAG(6) JSON(6) DevOps(6) 数据可视化(6) wasm(6) 计算机视觉(6) 算法(6) Rust(6) 微服务(6) 隐私沙盒(5) FedCM(5) 语音识别(5) Angular开发(5) 快速应用开发(5) 提示工程(5) Agent(5) LLaMA(5) 低代码开发(5) Go测试(5) gorm(5) REST API(5) 推荐系统(5) WebAssembly(5) GameDev(5) CMS(5) CSS(5) machine-learning(5) 机器人(5) 游戏开发(5) Blockchain(5) Web安全(5) Kotlin(5) 低代码平台(5) 机器学习资源(5) Go资源(5) Nodejs(5) PHP(5) Swift(5) 智能体(4) devin(4) Blitz(4) javascript框架(4) Redwood(4) GDPR(4) 生成式人工智能(4) Angular16(4) Alpaca(4) 编程语言(4) SAML(4) JWT(4) JSON处理(4) Go并发(4) kafka(4) 移动开发(4) 移动应用(4) security(4) 隐私(4) spring-boot(4) 物联网(4) nextjs(4) 网络安全(4) API(4) Ruby(4) 信息安全(4) flutter(4) 专家智能体(3) Chrome(3) CHIPS(3) 3PC(3) SSE(3) 人工智能软件工程师(3) LLM Agent(3) Remix(3) Ubuntu(3) GPT4All(3) 软件开发(3) 问答系统(3) 开发工具(3) 最佳实践(3) RxJS(3) SSR(3) Node.js(3) Dolly(3) 移动应用开发(3) 低代码(3) IAM(3) Web框架(3) CORS(3) 基准测试(3) Go语言数据库开发(3) Oauth2(3) 并发(3) 主题(3) Theme(3) earth(3) nginx(3) 软件工程(3) azure(3) keycloak(3) 生产力工具(3) gpt3(3) 工作流(3) C(3) jupyter(3) 认证(3) prometheus(3) GAN(3) Spring(3) 逆向工程(3) 应用安全(3) Docker(3) Django(3) R(3) .NET(3) 大数据(3) Hacking(3) 渗透测试(3) C++资源(3) Mac(3) 微信小程序(3) Python资源(3) JHipster(3) 大型语言模型(2) 语言模型(2) 可穿戴设备(2) JDK(2) SQL(2) Apache(2) Hashicorp Vault(2) Spring Cloud Vault(2) Go语言Web开发(2) Go测试工程师(2) WebSocket(2) 容器化(2) AES(2) 加密(2) 输入验证(2) ORM(2) Fiber(2) Postgres(2) Gorilla Mux(2) Go数据库开发(2) 模块(2) 泛型(2) 指针(2) HTTP(2) PostgreSQL开发(2) Vault(2) K8s(2) Spring boot(2) R语言(2) 深度学习资源(2) 半监督学习(2) semi-supervised-learning(2) architecture(2) 普罗米修斯(2) 嵌入模型(2) productivity(2) 编码(2) Qt(2) 前端(2) Rust语言(2) NeRF(2) 神经辐射场(2) 元宇宙(2) CPP(2) 数据分析(2) spark(2) 流处理(2) Ionic(2) 人体姿势估计(2) human-pose-estimation(2) 视频处理(2) deep-learning(2) kotlin语言(2) kotlin开发(2) burp(2) Chatbot(2) npm(2) quantum(2) OCR(2) 游戏(2) game(2) 内容管理系统(2) MySQL(2) python-books(2) pentest(2) opengl(2) IDE(2) 漏洞赏金(2) Web(2) 知识图谱(2) PyTorch(2) 数据库(2) reverse-engineering(2) 数据工程(2) swift开发(2) rest(2) robotics(2) ios-animation(2) 知识蒸馏(2) 安卓开发(2) nestjs(2) solidity(2) 爬虫(2) 面试(2) 容器(2) C++精选(2) 人工智能资源(2) Machine Learning(2) 备忘单(2) 编程书籍(2) angular资源(2) 速查表(2) cheatsheets(2) SecOps(2) mlops资源(2) R资源(2) DDD(2) 架构设计模式(2) 量化(2) Hacking资源(2) 强化学习(2) flask(2) 设计(2) 性能(2) Sysadmin(2) 系统管理员(2) Java资源(2) 机器学习精选(2) android资源(2) android-UI(2) Mac资源(2) iOS资源(2) Vue资源(2) flutter资源(2) JavaScript精选(2) JavaScript资源(2) Rust开发(2) deeplearning(2) RAD(2)

Angular的一生发生了重大变化!

你好👋

Angular v16带来了巨大的变化,这些变化肯定会改变Angular的未来、受欢迎程度和Angular开发人员的生活!

以下是Angular 16中令人兴奋的新功能列表!

🚦 信号

Signals(在开发者预览中)是Angular 16、Angular方向和整个生命中带来的最重大的变化,因为它将改变Angular检测变化的方式,并解决开发者迄今为止在Zone.js上遇到的许多痛苦。我已经谈到了Angular Signals背后的故事。你可以在这里查看。

The story behind Angular Signals!

The Angular change detection future

javascript.plainenglish.io

创建独立的应用程序示意图

独立组件现已完成应用程序示意图。您可以使用Angular CLI生成一个完整的独立应用程序。V16具有强大的原理图,允许您将组件、管道和指令转换为独立的。此外,这些示意图可以删除迁移后不必要的现有ngModuel。

新生成的应用程序代码更轻(没有来自v15改进的conf文件+带有独立功能的轻量级应用程序引导;因此,没有ngModule)。

...
bootstrapApplication(App, {
  providers: [provideHttpClient(), importProvidersFrom(FormsModule)],
}).catch((err) => console.error(err));

🏎 Esbuild开发服务器

已经提供了使用esbuild进行ng生成的实验性支持。使用v16,工具团队对开发服务器进行了一些改进(在开发人员预览中)。现在,您可以使用esbuild运行服务。

要查看它,请将“"@angular-devkit/build-angular:browser"更改为“"@angular-devkit/build-angular:browser-esbuild"”。

🧪Jest支持

Jest是开发人员最喜欢和最受欢迎的测试工具之一。Angular的默认工具是Karma,但现在,Angular也在努力支持Jest,这在Angular v16的开发者预览中,这是一个大新闻!

📢 Required inputs

在零运行时开销的情况下,现在可以确保组件或指令在需要时与其所需的输入一起使用。否则,您将得到一个编译时错误。

@Input({required: true}) myInput: string; // Required
@Input() myOtherInput: string; // Not required

将路由数据、路径参数和查询参数绑定到输入

这是一个非常优秀和实用的功能,它肯定会让代码更轻的开发人员的生活更轻松。我们可以利用强大的功能保护功能,直接从那里设置组件输入!

// Add the withComponentInputBinding feature to the provideRouter method.
providers: [
  provideRouter(appRoutes, withComponentInputBinding()),
]

// Update the component to have an Input matching the name of the parameter.
@Input()
set id(heroId: string) {
  this.hero$ = this.service.getHero(heroId);
}

mapToCanActivate辅助函数

在Angular 16中,类guards 是不推荐使用的,Angular提供了一个函数助手,可以轻松切换到函数,而不必删除现有的类保护。

const route: Route = {
  path: 'admin',
  canActivate: mapToCanActivate([AdminGuard])
};

DestroyRef & takeUntilDestroyed

v16附带的另一个功能是DestroyRef和takeUntilDestoryed,这在您想要取消订阅时提供了更大的灵活性。

...
obs$: Observable<SomeType>;
const subscripion = obs$.subscribe(...);

inject(DestoryRef).onDestroy(() => subscription.unsubscribe());

无损水化支撑

是时候通过非破坏性水合支持改善用户体验了。一旦浏览器从服务器接收到渲染的标记并将其解析为文档对象模型(DOM),Angular将遍历该结构,添加事件侦听器,并创建内部数据结构。从那时起,应用程序就变成了交互式的,而不需要重新绘制过程。这将解决Angular Universal遇到“闪烁”的问题。

💡 API为内联样式表提供CSP nonce

出于安全原因,许多企业都关心内联脚本。这有时被标记为不安全和不安全。此功能将帮助您指定和公布内联样式的内容安全策略。

// Standalone version
...
bootstrapApplication(AppComponent, {
  providers: [{
    provide: CSP_NONCE,
    useValue: globalThis.myRandomNonceValue
  ]}
});

我在上面没有提到很多其他很棒的功能,以使文章变得轻松,但它们在v16中也可用。以下是一个快速列表:

  • ☑️ NgTemplateOutlet严格的类型检查
  • ♻️ 重用服务器生成的零部件样式
  • 💡 为服务器端独立应用程序提供服务器渲染
  • 💙 TS 5.0支持(非实验性装饰器支持)
  • 🖼️ 对NgOptimizedImage的改进,使图像能够容纳在其父容器中,而不是具有显式尺寸
  • 💡 通过语言服务简化独立导入
  • 💡 改进文档和材料CDK组件的可访问性
  • 💡 Angular团队正在与材料设计团队密切合作,使Angular Material成为Web的参考材料设计实现

不幸的是,v16中尚未提供的一个即将推出的功能是在NgComponentOutlet中设置输入(此处为PR),这看起来像:

当创建一个动态组件以便能够直接设置其输入时,这是非常实用的。

<ng-container *ngComponentOutlet="MyComponent; inputs: myInputs" />
// In component class
myInputs: {
  message: "Hi there!",
  data: [...]
},

Angular v16盒子里的所有东西都很棒吗😊 … 我完全相信Angular在未来几年会变得更受欢迎!

今天就到这里了,再见🙋

如果你有任何问题或反馈,请点击评论或通过领英联系我——我洗耳恭听!

 

文章链接