jjzjj

javascript - 在Angular 5中将AMP与Material Design Lite一起使用

coder 2025-02-03 原文

我想创建一个带有 Angular 5的电子商务渐进式Web应用程序。如何在Google Material Design Lite中将AMP与 Angular 5一起使用？
如果它不具有可伸缩性或可行性，那么还有哪些其他好的选择呢？

最佳答案

我假设您已经对使用Angular Universal进行SSR/服务器端渲染非常熟悉，然后再进行其他操作。由于，AMP上不允许使用自定义JavaScript。

话虽如此，让我们谈谈AMP标准和限制，并看看涉及Angular时可能出现的问题。

1. How does a website/app implement AMP, in my experience?



好吧，实际上每个页面都有2个版本(常规版本和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. You are not allowed to have any external styles



因此，没有<link rel="stylesheet" href="path-to-some.css">。

AMP只允许少数几个(例如Font Awesome //maxcdn.bootstrapcdn.com/font-awesome/或Material Icons/Google Fonts //font.googleapis.com，因此仅来自特定的CDN，绝对不能托管在您自己的服务器上)。

是什么意思？ 好吧，在AMP路线上时，您需要删除AMP不允许的所有外部css引用的服务器呈现文档，并在需要时添加允许的外部css引用-例如，当您需要一些图标或Google时字体。使用Angular提供的<head>和document可以在文档中删除和添加标签(因此，这包括renderer部分)。但是，对我来说，即使仅遍历<head>部分的子节点以删除任何<link>标记，似乎也很慢。而且我不认为您可以在Angular应用程序之外执行此操作，因为您对在什么路线上需要执行的操作知之甚少。

3. How do you style your app then?



好吧，AMP允许您拥有的唯一自定义css是在文档内的<style>块内。

您如何做到的？ 好吧，除了针对css的单独构建(针对AMP版本，与任何Angular/Angular CLI工作流程无关)之外，我看不到任何其他解决方案，除了可能会编译/合并现有的CSS文件外您已经为组件编写过了。以及以某种方式，仅在使用AMP版本时，才将生成的结果放入<style>节内的<head>块中。

但请记住，这些样式不一定是100％有效的CSS。您可能具有/deep/或:host。

4. You are not allowed to have ANY custom JavaScript.



因此，基本上不应该包含您的整个Angular应用程序代码。您必须从任何<script>标记中剥离服务器渲染的html。

5. How do you javascript then, without custom 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. What about the rest of the HTML document?



好吧，通过简单地通过AMP验证器传递服务器渲染的Angular应用程序的html，这里也存在很多问题:
  • 任何自定义属性均出错。 和Angular充满了这些，尤其是模拟本地ViewEncapsulation(您已经看到了所有_ngcontent-c1和此类属性)。为了摆脱这些，我想您要么不得不使用ViewEncapsulation.None，但是然后每种组件样式都将变为全局或将服务器渲染的html从所有这些_ng...属性中剥离出来，并且以某种方式经历了很多痛苦构建仅按类/id等为目标的AMP css，并在组件中使用更多类以通过任何方式进行样式设置。
  • 也会在所有自定义标签(当然不是AMP)上出错。
    而且您知道Angular应用程序和Material Components是使用
    那些。甚至第一个:<app-root>。老实说，我
    除标签选择器外，不能与其他任何东西一起使用，并且
    在某些情况下，属性选择器(例如与指令一起使用)。


    • 到目前为止，这就是我能想到的一切。

    我想说，在此时，在Angular应用程序上实现AMP几乎是不可能的。

    但是，鉴于AMP和Angular都是Google项目，我希望尽快在Angular + AMP方面看到一些进展。我听说有人说罗伯·沃尔莫德(Rob Wormald)确实在今年年初提到过一些关于AMP的事情，例如4月在Ng-Conf上……但是我找不到任何东西，或者到目前为止没有任何进展，我们已经接近2018已经。另外，也许只有一些想法，甚至没有路线图……不知道!？

    希望有了Angular 6!我是个乐观主义者。

    就目前而言，我认为渐进式Web应用程序应该足够快，以至于AMP不能在该速度上有很大的提高(只要您在第一次加载时没有出现不良连接)。不过，我不知道您的排名如何(拥有一个非常好的PWA与实现AMP-两者兼而有之，而不是两者兼而有之)

    关于javascript - 在Angular 5中将AMP与Material Design Lite一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47198198/

    javascriptMaterialcodestrongbrangulararchitecturematerial-designamp-html

    有关javascript - 在Angular 5中将AMP与Material Design Lite一起使用的更多相关文章

    1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

      我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

    2. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

      我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

    3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

      类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

    4. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

      很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

    5. ruby - 在 Ruby 中使用匿名模块 - 2

      假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

    6. ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2

      我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，

    7. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

      我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

    8. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

      关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

    9. ruby-on-rails - rails : "missing partial" when calling 'render' in RSpec test - 2

      我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身，new.html.erb，有代码:当我运行rspec时，它失败了:1)messages/new.html.erbshou

    10. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

      我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

    随机推荐