Viv*_*edi 5 javascript architecture material-design amp-html angular
我想用角度5创建一个电子商务渐进式网络应用程序.如何在Google Material Design Lite中使用带有角度5的AMP？如果它不具有可扩展性或可行性,那么其他有什么好的选择呢？
MrC*_*oft 15
我认为你已经熟悉使用Angular Universal的SSR /服务器端渲染了.由于没有自定义JavaScript被允许在AMP.
话虽如此,让我们谈谈AMP标准和限制,看看Angular可能存在哪些问题.
1.根据我的经验,网站/应用如何实施AMP？
那么,每个页面实际上有两个版本(常规版本和AMP版本 - 遵守严格的规则).假设你有一个视频页面my-app.com/video/1234/some-video-slug.并且您想告诉Google您有此页面的AMP版本.您可以通过在以下位置添加以下内容来执行此操作<head>:<link rel="amphtml" href="my-app.com/video-amp/1234/some-video-slug">其中,/video-amp将是为AMP版本提供服务的路径.接下来的所有要点都是关于AMP路线/页面上发生的事情.
2.您不得拥有任何外部风格
所以,没有<link rel="stylesheet" href="path-to-some.css">.
AMP允许的只有少数(如Font Awesome //maxcdn.bootstrapcdn.com/font-awesome/或Material Icons/Google Fonts //font.googleapis.com,因此仅限于特定的cdns,绝对不会托管在您自己的服务器上).
这是什么意思？好吧,当在AMP路线上时,您需要剥离AMP不允许的所有外部CSS引用的服务器呈现文档,并添加允许的,如果/在需要时 - 如需要一些图标或谷歌字体.卸下和文档(这样,这包括中添加标记<head>部分)是可能的使用document和renderer提供由角.但是,对我而言,即使只遍历该<head>部分的子节点以删除任何<link>标记,它似乎很慢.而且我认为你不能在你的Angular应用程序之外做到这一点,因为你对于在什么路线上需要做什么知之甚少.
3.那么你如何设计你的应用程序？
那么AMP允许你拥有的唯一自定义css是在<style>文档中的一个块内.
你是怎样做的？好吧,我没有看到任何其他解决方案,除了为一些css单独构建,它针对AMP版本并且与任何Angular/Angular CLI工作流程无关,除了可能编译/合并现有的css文件你已经为你的组件写了.并且不知何故,只有在AMP版本上时,才将生成的结果放在<style>部分内的块中<head>.
但请记住,这些样式不一定是100%有效的CSS.你可能有/deep/或:host.
4.您不能拥有任何自定义JavaScript.
因此,基本上不应包括整个Angular应用程序代码.您必须从任何<script>标记中剥离服务器呈现的html .
5.如果没有自定义JavaScript,你如何javascript？
例如,在移动设备上没有滑动菜单或下拉菜单似乎很疯狂.嗯......你可以!但只能使用AMP"组件".
您必须使用<amp-sidebar>而不是<mat-sidenav>您可能构建的任何自定义组件.但是 - 不知何故 - 只有在AMP路线上,因为我喜欢Angular Material组件.
它是如何工作的？的<amp-sidebar>？
当AMP为您提供包含JavaScript的组件时.为了使侧栏工作,您可以包括:https://cdn.ampproject.org/v0/amp-sidebar-0.1.js.这是允许的.你通常有很多常用的/所需的可用的组件:amp-carousel,amp-img(是的,你不能简单地使用该<img>标签), amp-video,amp-accordion...
6. HTML文档的其余部分怎么样？
好吧,只需通过AMP验证器传递Angular应用程序的服务器呈现的html,这里也存在很多问题:
它在任何自定义属性上出错.Angular充满了这些,特别是模仿本机ViewEncapsulation(你已经看到了所有_ngcontent-c1这些属性).为了摆脱这些,我想你要么必须去ViewEncapsulation.None,但是然后每个组件样式将成为全局或剥离服务器呈现html的所有这些_ng...属性,并经历了很多痛苦,以某种方式建立一个AMP css仅以类/ id等为目标,并且无论如何都要在组件中使用更多类来设置样式.
它也是所有自定义标签上的错误(当然不是AMP).而且你知道Angular应用程序和Material Components是用这些构建的.即便是第一个:<app-root>.而且,老实说,除了标签选择器以外,我不会使用其他任何东西,在某些情况下还有属性选择器(比如指令).
到目前为止,这就是我能想到的一切.
我想说在Angular应用程序上实现AMP几乎是不可能的.
但是,鉴于AMP和Angular都是谷歌项目,我希望很快就能看到Angular + AMP的一些进展.我听说过有人说Rob Wormald今年早些时候提到了关于AMP的一些事情,就像4月份在Ng-Conf那样...但我找不到任何相关内容,或者到目前为止的任何进展,我们接近2018年已经.另外,也许只有一些想法,甚至不是路线图...不知道!？
希望,Angular 6!我是一个乐观主义者.
目前,我认为渐进式网络应用程序应该足够快,以至于AMP无法在该速度上提高很多(只要你在第一次加载时没有连接错误).我不知道你的排名如何(拥有一个非常好的PWA而不是实施AMP - 当它是一个或另一个,而不是两个)
| 归档时间： |
|
| 查看次数： |
2369 次 |
| 最近记录： |