Angular 2 的最佳实践答案

【问题标题】：Best Practice of Angular 2Angular 2 的最佳实践
【发布时间】：2017-02-23 09:31:45
【问题描述】：

Angular 2 在前端开发中被认为是一个完整的框架。与 jQuery 的各种功能相比，优势之一是以托管方式放置前端交互。

另一方面，jQuery 非常灵活，它的特性可以逐个函数地按需应用。它与纯 HTML 代码很好地协作，特别是视觉设计师准备了好看的模板。从这个角度来看，jQuery 似乎更加敏捷。

应用 Angular 2 的最佳实践是什么？它应该与 jQuery、bootstrap 和其他前端库/框架混合在一起吗？他们每个人应该承担什么责任？

【问题讨论】：

取决于需求，这并不意味着如果你使用 angular2 jQuery 就不应该显式使用。寻找选项。 Angular2 包含所有内容。
使用什么组件取决于需求。然而，可怕的事情是当开发人员根据自己的喜好使用 jQuery 并使应用程序前端难以管理时。因此，我期待将它们一起使用时的最佳实践或至少是指南。
最佳实践是不要将 jQuery 与 Angular2 一起使用。
查看stackoverflow.com/questions/13151725/…以获得更详细的答案
我喜欢 JQuery 的地方在于 DOM 的易用性，最重要的是：动画！

标签： jquery twitter-bootstrap angular

【解决方案1】：

由于这个问题是关于软件设计的，你可能会看到不同观点的答案，我不会假装保留“最佳答案”，并会尽量坚持事实。

jQuery 最初被设计为一个 DOM 操作库，通过 jQuery-ui 插件加上样式，加上 Promises、Deferred、ajax 调用等数据/异步管理。这些不同的功能集彼此之间没有太多的交互，除了它们可以很容易地链接起来。 jQuery 不是一个框架，而是一个库。

Angular2 的documentation 根本不建议操作 DOM 元素。需要时使用 Angular2 的渲染器。
Angular2 使用它的“http”类提供 ajax 调用。
Angular2 在 rxJs Observables、Promises 等方面表现出色，让您成为异步行为的大师。缺点是学习曲线非常陡峭。
CSS3 现已推出，并且非常好地支持动画。可以进行类绑定来改变组件的外观。
Boostrap 可以在 Angular2 项目中使用，and doesn't need jQuery to run~~，除非使用它的 javascript 库~~。

尽管如此，在项目中使用 jQuery 还是很吸引人的：

jQuery 有一个伟大的过去，学习它很容易并且有很多用户。
说真的，它的性能非常好。库只需压缩 84kb。
jQuery 有大量的插件，插件在 angular2 世界中还没有自己的继任者。例如 Boostrap 'javascript' 插件主要是（如果不是全部）jQuery 插件。 see here

【讨论】：

您指出了我的问题背后的理性。 1) 数据模型应该来自 AJAX 调用。 2) 应尽可能防止 DOM 元素操作。 3) 使用 CSS3 改变外观。 4) 然而，jQuery 有大量的插件和布局模板，而它们中的大多数在 Angular2 世界中都没有继任者。我们如何处理它们？
在我体验了一些使用Angular 4和jQuery的项目之后，我学会了如何平衡Angular 4和jQuery并将它们组合在一起。正如以上几点所描述的，最大的挑战是 jQuery 和 Angular 操作 DOM。我使用主 HTML 页面 (index.html) 来包含所有 jQuery 内容，并在一些 Angular 组件实例中调用 jQuery 函数，在这些实例中应该小心防止它们的冲突。一般来说，Angular 帮助管理组件交互，而 jQuery 帮助装饰。
更正：Bootstrap JS 可以在没有 jQuery 的 Angular 2+ 中使用：github.com/valor-software/ngx-bootstrap

【解决方案2】：

Angulars的核心思想之一是不直接操作DOM，这是jQuery要做的核心思想。所以正如@GünterZöchbauer 所说，除非你真的需要，否则不要使用它（这非常罕见）。 jQuery 更像是一个辅助库，Angular 是一个框架，应该这样使用。
您当然可以将它与 Bootstrap 混合使用，但您应该只使用样式并使用 Angular 2 版本的 Bootstrap：https://valor-software.com/ng2-bootstrap/#/ 或 https://github.com/ng-bootstrap/ng-bootstrap。

至于

和其他前端库/框架一起？

你不应该把它和另一个框架混在一起，那样只会把事情搞砸。库当然，对于大多数流行的库来说，存在（或将存在）一个带有 TypeScript 支持等的 Angular 版本。

【讨论】：