Material Design CSS / JS在Angular 2 app和静态html页面之间共享

时间:2017-01-17 18:47:21

标签: javascript html css material-design angular-material2

我们的Angular 2应用程序使用Material Design框架。该应用程序最终将作为一个嵌入式软件上的本地服务(无服务器)Web应用程序。为了性能,我们发现由于应用程序中几个地方的加载时间,在某些情况下必须使用非Angular静态html。

我希望我们的UI / UX程序员能够在静态html页面中使用尽可能多的md-prefixed组件和CSS / JS动画。换句话说,我希望他们能够在静态页面上编写UI,就像他们在Angular 2模板中编写代码一样,或者尽可能接近相同。

我还希望在Angular 2模板和静态html页面之间共享对C​​SS或JS所做的更改或任何自定义,因为它们应该具有相同的外观和感觉,并且应该看起来像是它们的一部分相同的应用程序。

我知道有很多方法可以在没有Angular 2的情况下实现材料设计。(bootstrap,聚合物等)有没有人知道一种干净的方法,可以在Web应用程序的Angular 2和非Angular部分之间实现无缝编码?

1 个答案:

答案 0 :(得分:0)

据我所知,对于各种可用的框架,有几种材料设计实现(https://material.io/guidelines/)。以下可以在静态html页面上使用,而不需要像Angular 2这样的全面框架:

......仅举几例。我们决定的是Polymer实现。这是因为聚合物语法与角度语法非常相似。 (均由谷歌撰写)聚合物前缀与'纸张 - '而不是' md - '但是非常相似,我们可以将这两个前缀添加到我们的.scss文件中的任何覆盖中,当我们需要覆盖默认样式时,可以在角度模板和静态html文件之间共享。

虽然管理分离材料设计实现并不理想,但鉴于我们在应用程序中需要静态html文件用于某些页面,这是可以接受的权衡。

如果有人有任何其他想法,仍然对此问题的其他解决方案感兴趣。