Web开发框架-AngularJS
2013-04-07 14:26:38

AngularJS (Angular.JS) 是一组用来开发Web页面的javascript框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好。采用MIT协议授权。

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.


AngularJS可以让你扩展HTML的语法,以便清晰、简洁地表示应用程序中的组件,并允许将标准的HTML作为你的模板语言。AngularJS可以通过双向数据绑定自动从拥有JavaScript对象(模型)的UI(视图)中同步数据。

特性一:数据绑定
数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM。数据绑定是的代码更少,你可以专注于你的应用。传统来说,当model变化了。开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面,model变化驱动了DOM中元素变化,另一方面,DOM元素的变化也会影响到Model。这个在用户互动中更加复杂,因为开发人员需要处理和解析这些互动,然后融合到一个model中,并且更新View。这是一个手动的复杂过程,当一个应用非常庞大的时候,将会是一件非常费劲的事情。

特性二:模板
在AngularJS中,一个模板就是一个HTML文件。但是HTML的内容扩展了,包含了很多帮助你映射model到view的内容。HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。所有的指令都负责针对view来设置数据绑定。要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化,不是字符串的连接或者innerHTML变化。使用DOM作为输入,而不是字符串,是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令,甚至开发可重用的组件。

特性三:MVC
针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意味不同的东西。AngularJS并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。

特性四:依赖注入(Dependency Injection,即DI)
AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。DI允许你请求你的依赖,而不是自己找寻它们。比如,我们需要一个东西,DI负责找创建并且提供给我们。

特性五:Directives(指令)
指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情?那么AngularJS可以做到。指令可以用来创建自定义的标签,它们可以用来装饰元素或者操作DOM属性。

最新版本:1.2
Angular 第12版于2021年5月上旬正式发布,该版本更新内容如下:
性能改进
common: 删除 DomAdapter 中未使用的方法,减少生成的安全访问和无效合并的代码量
compiler-cli: 允许在存在重定向的源文件的情况下进行增量编译,缓存 absoluteFromSourceFile 的结果
core: 监听器指令的小改进,避免将 LView 存储在 ngContext 中,优化 getDirectives

重大变化
最小化的 UMD 捆绑包不再包含在分发的 NPM 包中;
animations: 当 root 视图被移除时,DOM 元素现在被正确移除。如果你使用 SSR 并使用应用程序的 HTML 进行渲染,你将需要确保在销毁应用程序之前将 HTML 保存到一个变量中。测试也有可能意外地依赖旧的行为,即试图找到一个在以前的测试中没有被删除的元素。如果这种情况下,失败的测试应该被更新,以确保他们有适当的设置代码来初始化他们所依赖的元素。
common: PlatformLocation 类的方法,即 onPopState 和 onHashChange,被用于返回 void。这些方法可以返回调用以删除事件处理程序的函数;
common: The methods of the HttpParams class now accept string | number | booleaninstead of string for the value of a parameter.If you extended this class in your application,you'll have to update the signatures of your methods to reflect these changes.
common: HttpParams 类的方法现在接受字符串、数字、布尔值,而不是字符串作为参数的值。如果你在你的应用程序中扩展了这个类。你将不得不更新你的方法的签名以反映这些变化。
Compiler-cli: 链接库不再生成传统的 i18n 消息 ID。任何为这些消息提供翻译的下游应用程序,将需要使用 localize-migrate 命令行工具迁移他们的消息 ID。
core: Angular 不再维护对 node v10 的支持;以前 ng.getDirectives 函数在给定的 DOM 节点没有与之相关的 Angular 上下文的情况下会出现错误。这种行为与其他在 ng 名称空间下的其他调试工具不一致,后者处理这种情况时不会引发异常。现在为这样的 DOM 节点调用 ng.getDirectives 函数会导致从该函数返回一个空数组;切换 emitDistinctChangesOnlyDefaultValue 的默认值,这改变了默认行为,可能会导致一些依赖不正确行为的应用程序失败。

特性:
animations: 更新节点版本的支持范围,通过 BrowserAnimationsModule.withConfig 添加对禁用动画的支持
bazel: 更新节点版本的支持范围
common: 更新节点版本的支持范围,为 Location 服务添加 historyGo 方法,在 HttpParams 上实现 appendAll() 方法
compiler: 支持模板中的 nullish coalescing,更新节点版本的支持范围
compiler-cli: 将使用部分编译模式的功能标记为稳定,更新受支持的节点版本范围,支持转换组件样式资源,支持生成特定的 Closure 的 PURE 注释
core: 引入 getDirectiveMetadata 全局调试实用程序,为 XhrFactory 导入添加迁移,放弃对 TypeScript 4.0 和 4.1 的支持,支持 TypeScript 4.2

更多详情可查看此处

最新版本:15
2022年11月中旬消息,在过去的一年里,Angular 团队删除了 Angular 的传统编译器和渲染管道,因此在过去几个月里 Angular 改进了一系列与开发者体验相关的内容。Angular v15 则是进一步推动了这项工作,它有几十项改进,使开发者有更好的体验和性能。

独立 API 脱离开发者预览版
在 Angular 14 中,引入了新的独立 API,使开发者能够在不使用 NgModules 的情况下构建应用程序。如今在 Angular 15 中,这些 API 已经脱离了开发者预览,现在是稳定的 API 的一部分。从现在开始,我们将按照语义版本的方式逐步改进它们。

Directive composition API
指令组合式 API(Directive composition API) 将代码重用带到了另一个层次,这项功能的灵感来自于 GitHub 上最受欢迎的功能请求(feature request),该请求要求提供向宿主元素(Host Element)添加指令的功能。指令组合式 API 使开发者能够用指令来增强宿主元素,并为 Angular 配备了强大的代码重用策略,指令组合 API 只适用于独立的指令。

Image 指令现在稳定了
在 Angular 14.2 中,Angular 带来了与 Chrome Aurora 合作开发的 Angular image 指令的开发者预览版。如今在 Angular 15 中,该指令现在已经达到稳定了,Land's End 对这一功能进行了实验,在 lighthouse lab 测试中观察到 LCP 有 75% 的改善。

更好的堆栈跟踪
Angular 团队从每年的开发者调查中得到了很多启示,在深入研究开发者面临的调试难题后,团队发现错误信息可能需要得到一些改进。这个片段有两个主要问题:
1)只有一行对应于开发人员编写的代码。 其他一切都来自第三方依赖项(Angular 框架、Zone.js、RxJS)
2)没有关于导致错误的用户交互的信息

Chrome DevTools 团队创建了一种机制,通过 Angular CLI 注释 source maps 来忽略来自 node_modules 的脚本。还合作开发了一个异步堆栈标记 API,允许我们将独立的、预定的异步任务连接成一个堆栈跟踪。

将基于 MDC 的组件发布到稳定版
基于 Material Design Components for Web(MDC)的 Angular material 组件的重构工作已经完成。这一变化使 Angular 更加接近 Material Design 规范。对于许多组件,Angular 更新了样式和 DOM 结构,而其他组件则从头开始重写了。Angular 为新组件保留了大部分 TypeScript API 和组件/指令选择器,与旧的实现方式相同。

实验性 esbuild 支持的改进
在 Angular 14 中,Angular 带来了在 ng build 中实验性地支持 esbuild,以实现更快的构建时间并简化 Angular 管道。在 v15 中,现在有了实验性的 Sass、SVG 模板、文件替换和 ng build --watch 支持。

语言服务中的自动导入
语言服务现在可以自动导入你在模板中使用但没有添加到独立组件或 NgModule 中的组件。

CLI 改进
在 Angular CLI 中,引入了对独立稳定 API 的支持。现在你可以通过 ng g component --standalone 生成一个新的独立组件。

Angular 也在进行简化 ng new 输出的任务。作为第一步,通过删除 test.ts、 polyfills.ts 和 environments 来减少配置。现在你可以直接在 angular.json 中的 polyfills 部分指定你的 polyfills。为了进一步减少配置开销,现在使用 .browserlist 来让你定义目标 ECMAScript 版本。

社区贡献
自 v14 发布以来,Angular 收到了 210 多人对框架、组件和 CLI 的贡献。更多详情可查看此处

最新版本:16
在之前的 Angular v15 中,Angular 团队通过将独立 API 从开发者预览版升级至稳定版,在 Angular 的简易性和开发者体验方面达到了一个重要的里程碑。2023年5月上旬,Angular 将继续这一改进的势头,发布了自 Angular 最初推出以来最大的一次版本更新:第16版本;在 Reactivity、服务器端渲染和工具方面取得了巨大的飞跃。


重新思考 Reactivity
作为 v16 版本的一部分,Angular 带来了全新的 Reactivity 模型的开发者预览,它为性能和开发者体验带来了显著的改进。完全向后兼容并可与当前系统互操作的,并且能够:
通过减少变化检测过程中的计算次数,提高运行时的性能。
为 Reactivity 带来了更简单的 mental 模型,使其清楚地了解视图的依赖性和通过应用程序的数据流。
启用细粒度的 Reactivity,在未来的版本中,它将允许我们只检查受影响组件的变化。
在未来的版本中,通过使用 Signals 在模型发生变化时通知框架,使 Zone.js 成为可选的。
提供计算属性,而不会在每个变化检测周期中重新计算
实现了更好的与 RxJS 的互操作性

服务器端渲染和 hydration 增强
根据 Angular 的年度开发者调查,服务器端渲染是 Angular 的第一大改进方向。在过去的几个月里,Angular 与 Chrome Aurora 团队合作,改善了 hydration 和服务器端渲染的性能和 DX。Angular 带来了完整应用非破坏性 hydration 的开发者预览。


在新的完整应用非破坏性 hydration 中,Angular 不再从头开始重新渲染应用。相反,该框架在构建内部数据结构时查找现有的 DOM 节点,并将事件监听器附加到这些节点上。这样做的好处是:
对终端用户来说,页面上没有内容的闪烁
在某些情况下有更好的 Web Core Vitals
面向未来的架构,可以用我们今年晚些时候推出的基元实现细粒度的代码加载。
只需几行代码就能与现有的应用程序轻松集成
对于执行手动 DOM 操作的组件,在模板中使用 ngSkipHydration 属性逐步采用 hydration

新的服务器端渲染功能
作为 v16 版本的一部分,Angular 还更新了 Angular Universal 的 ng add schematics,它使你能够使用独立的 API 向项目添加服务器端渲染。还为内联样式引入了对更严格的内容安全策略的支持。

改进了独立组件、指令和管道的工具
Angular 是一个被数以百万计的开发者用于很多关键任务的应用程序的框架,我们认真对待重大变化。Angular 在几年前开始探索独立的 API,现在经过一年多的收集反馈和对 API 的迭代,Angular 想鼓励开发者更广泛地采用这些 API。为了支持开发者将他们的应用程序过渡到独立的 API,Angular 开发了迁移示意图和独立迁移指南。一旦在你的项目目录中运行:
ng generate @angular/core:standalone
该计划将转换你的代码,删除不必要的 NgModules 类,并最终改变项目的引导结构以使用独立的 API。

独立的 ng new
作为 Angular v16 的一部分,你可以从一开始就以独立的方式创建新的项目。要尝试独立模式的开发者预览,请确保你在 Angular CLI v16 上并运行:
ng new --standalone
会得到一个更简单的项目输出,没有任何 NgModules。此外,项目中的所有生成器都会产生独立的指令、组件和管道。

更多详情可查看此处


官方主页:http://angularjs.org/