Angular Material VS Materializecss [关闭]

Posted 2023-02-22

【中文标题】Angular Material VS Materializecss [关闭]

【英文标题】：Angular Material VS Materializecss [closed]

【发布时间】：2016-12-22 11:21:00

【问题描述】：

好吧，我正在尝试使用 Angular Material 运行应用程序大约一周时间。 在对 Angular Material 及其神经紧张的错误进行了如此多的挑战之后（这可能永远无法解决，因为它们是尽快发布 Angular V2 的 V2 的里程碑），现在它让我大吃一惊，这就是为什么我必须使用 616KB JS+CSS Angular材质模块而不是254KB JS+CSS Materializecss。 据我所知（如果我错了，请告诉我！）：

最好尽量避免更改 DOM 元素

但 Angular 材质基础是导致大量回流/重绘的指令，实际上基于我看到的演示，Materializecss 比 Angular 材质更快更轻。 很明显，Angular Material 对 Angular 更友好，并且具有一些特定的功能，例如 $mdThemingProvider 和 ...，但我对使用 Angular Material 或者它的性能表示怀疑。 有什么话可以让我再次相信 Angular Material？ 使用 Angular Material 代替纯 Angular + Materializecss 是否值得？ 因为我看不到他们的结果有任何重大变化？

【问题讨论】：

我能确切地知道为什么我的票被否决了吗？？？

我没有，但可能是自以为是的问题风格。

快到 2020 年了。选择 Angular Material 而非 MaterializeCss 一定是疯了。选择 MaterializeCSS！

【参考方案1】：

Angular Material 是一个包含 Angular 指令的 Angular 模块。它是专门为 Angular 制作的，而 MaterializeCSS 是唯一带有一点 javascript 的 CSS 库。

您应该使用 Angular Material，因为所有组件都可以在您的应用中运行，这与 MaterializeCSS 不同，MaterializeCSS 中有些东西不起作用，它是为纯 Javascript 或 jQuery 设计的。

【讨论】：

到目前为止，jquery 根本不是强制性的。它不仅仅是一个带有一些 JS 的 CSS 库。我们已经使用 materialize-css 开发了一个完整的项目。

【参考方案2】：

现在感觉 MaterializeCSS 更加成熟和发达，有更多的功能、动画和组件。

然而 Angular Material 的 ToDo 列表很大，所以它可以赶上，但根据他们的 github readme status，它看起来要到 2018 年或更晚才会发生。目前在 2017 年底之后没有任何计划。

Materialize 优点和缺点

专业人士：ma​​terialize 的好处在于，你输入的就是你得到的，这意味着你放入 Angular 模板中的 html 和 css 正是它在浏览器中的样子，这意味着它很容易用 css 设置样式。

CON:ma​​terialize 的坏处是需要 jquery，这意味着使用 angular 时需要特殊设置。如果你使用 webpack，使用提供插件真的很容易

例子：

  new webpack.ProvidePlugin(
     $     : 'jquery',
     jQuery: 'jquery'
  )

这会自动使 jquery 在每个使用它的模块中都可用，所以它毕竟不是一件坏事。

专业人士： 另一个好处是它可以轻松地将您的 html/css 从一个项目移植到另一个项目，因为它只有 html 和 css，没有自定义指令。因此，如果您想从 angular 切换到 react 或普通 html，使用 Materialise 会很容易，同时保留您的所有标记和样式。

专业版：开发完善、组件多、样式多、功能多，真正为您的应用提供专业的润色

专业人士：非常好的文档和优秀的示例。

专业人士：开发人员对 GitHub 问题和 PR 反应非常迅速

MaterializeCSS 得分：+4

Angular Material 优点和缺点

PRO: 好消息是它是为 Angular 构建的，因此它具有自定义指令 Angular 样式。但是，这也需要设置，因为您必须导入模块，但这与任何 Angular 模块没有什么不同。

专业人士：开发人员对 GitHub 问题和 PR 也非常敏感

CON: Angular Material 的坏处在于它将所有这些自定义指令转换为它们自己的 html 和 css，我发现覆盖和自定义它们可能非常棘手，但不是不可能。

CON: 另一个不好的地方是它的代码不可移植。它只适用于 angular2+，所以你不能用它来切换框架。你所有的标记和样式都卡在了角度。

CON：需要更多的进步才能成熟并提供完整的 Material 体验。

CON： 文档不足。示例有限，对示例的解释很少，没有给出每个示例可以做什么的选项，充其量是令人困惑的。

角度材料得分：-2

基于这个简短的分析，在我看来，Materialize 是截至 2017 年 9 月的最佳选择，即使在使用 Angular2+ 应用程序时也是如此。我一直在我的 angular 4 应用程序中使用 Materialize，它工作得很好。我希望这会有所帮助。

【讨论】：

旁注：有 AngularJS 材质，用于 angularJs

【参考方案3】：

选择 Materialise。

我不知道为什么人们对你的问题投了反对票。这是一个合理的问题。尽管 Angular Material 看起来是一个更有吸引力的选择，因为它的名称中有著名的单词“Angular”。但这绝对不是正确的选择。它可能与 angular 有更好的集成，但优秀的程序员可以同样很好地集成 Materialize。

Angular Material 还没有那么多组件。事实上，对于某些组件，它甚至没有适当的示例。

我在 Angular Material 中开始了一个项目，但后来转向 Materialize a，因为截至 2017 年 9 月 20 日，它是一个更加全面的库。并且还通过大量示例正确记录。

【讨论】：

Cloud Firestore、Angular、Materialize 和 Polymer 怎么样......只是还没有

@Ruben Material Design 是 Google 产品，但 Materializecss 不是 Google 产品。它由4名学生开发。所以谷歌与它无关。