我们的 Angular 2 应用程序使用 Material Design 框架。该应用程序最终将作为嵌入式软件上的本地服务(无服务器)网络应用程序。由于应用程序中几个地方的加载时间,我们发现在某些情况下必须使用非 Angular 静态 html 来提高性能。
我希望我们的 UI/UX 程序员能够在静态 html 页面中使用尽可能多的以 md 为前缀的组件和 CSS/JS 动画。换句话说,我希望他们能够像在 Angular 2 模板中编写代码一样,或尽可能接近地编写静态页面上的 UI。
我还希望他们对 CSS 或 JS 所做的更改或任何自定义在 Angular 2 模板和静态 html 页面之间共享,因为它们应该具有相同的外观和感觉,并且看起来像是它们的一部分同一个应用。
我知道有多种方法可以在不使用 Angular 2 的情况下实现 Material 设计。(bootstrap、polymer 等)有没有人知道一种干净的方法可以在 Web 应用程序的 Angular 2 和非 Angular 部分之间无缝编码?
最佳答案
据我所知,有多种可用框架的 Material 设计 ( https://material.io/guidelines/) 实现。以下内容可以在静态 html 页面上使用,而无需像 Angular 2 这样的包罗万象的框架:
- > https://elements.polymer-project.org/elements/paper-material
- > http://mdbootstrap.com/
- > http://materializecss.com/
...仅举几例。我们决定采用的是 Polymer 实现。这是因为聚合物语法与 Angular 语法非常相似。 (均由 google 撰写)Polymer 前缀为“paper-”而不是“md-”,但在其他方面非常相似,我们可以将这两个前缀添加到 .scss 文件中的任何覆盖中,这些文件可以在 Angular 模板和当我们需要覆盖默认样式时的静态 html 文件。
虽然分离 Material Design 实现并不理想,但考虑到我们在应用中的某些页面需要静态 html 文件,这是一个可以接受的权衡。
如果有人有任何其他想法,仍然对这个问题的其他解决方案感兴趣。
关于javascript - Angular 2 应用程序和静态 html 页面之间共享的 Material Design CSS/JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41704702/