Sie sind nicht der erste, der diese Frage stellt :) Lassen Sie mich einige Dinge klären, bevor ich zu Ihren Fragen komme.
Polymer's webcomponents.js
ist eine Bibliothek, die mehrere Polyfills für verschiedene W3C-APIs enthält, die unter das Dach von Web Components fallen. Diese sind:
- Benutzerdefinierte Elemente
- HTML-Importe
<template>
- Schatten DOM
- Zeigerereignisse
- Andere
Das linke Navigationsgerät in der Dokumentation ( polymer-project.org ) enthält eine Seite für alle diese "Plattformtechnologien". Jede dieser Seiten hat auch einen Zeiger auf die einzelne Polyfüllung.
<link rel="import" href="x-foo.html">
ist ein HTML-Import. Importe sind ein nützliches Werkzeug, um HTML in anderes HTML aufzunehmen. Sie können zählen <script>
, <link>
, Markup, oder was sonst auch immer in einem Import.
Nichts "verlinkt" <x-foo>
auf x-foo.html. In Ihrem Beispiel wird davon ausgegangen, dass die Definition des benutzerdefinierten Elements von <x-foo>
(z. B. <element name="x-foo">
) in x-foo.html definiert ist. Wenn der Browser diese Definition sieht, wird sie als neues Element registriert.
Auf zu Fragen!
Was ist der Unterschied zwischen Angular und Polymer?
Einige davon haben wir in unserem Q & A-Video behandelt . Im Allgemeinen ist Polymer eine Bibliothek, die Webkomponenten verwenden (und deren Verwendung zeigen) soll. Die Grundlage sind benutzerdefinierte Elemente (z. B. alles, was Sie erstellen, ist eine Webkomponente), und sie entwickeln sich mit der Entwicklung des Webs. Zu diesem Zweck unterstützen wir nur die neueste Version der modernen Browser.
Ich werde dieses Bild verwenden, um den gesamten Architekturstapel von Polymer zu beschreiben:
ROTE Schicht: Wir erhalten das Web von morgen durch eine Reihe von Polyfills. Beachten Sie, dass diese Bibliotheken mit der Zeit verschwinden, wenn Browser die neuen APIs übernehmen.
GELBE Schicht: Etwas Zucker mit polymer.js einstreuen. Diese Ebene ist unsere Meinung dazu, wie die spezifizierten APIs zusammen verwendet werden. Es werden auch Dinge wie Datenbindung, syntatischer Zucker, Änderungsbeobachter, veröffentlichte Eigenschaften hinzugefügt ... Wir denken, dass diese Dinge hilfreich sind, um webkomponentenbasierte Apps zu erstellen.
GRÜN: Der umfassende Satz von UI-Komponenten (grüne Ebene) ist noch in Bearbeitung. Hierbei handelt es sich um Webkomponenten, die alle rot + gelben Ebenen verwenden.
Winkelanweisungen im Vergleich zu benutzerdefinierten Elementen?
Siehe Alex Russells Antwort . Grundsätzlich ermöglicht Shadow DOM das Erstellen von HTML-Bits, ist aber auch ein Werkzeug zum Einkapseln dieses HTML-Codes. Dies ist im Grunde ein neues Konzept im Web und etwas, das andere Frameworks nutzen werden.
Welche Probleme löst Polymer, die AngularJS nicht hat oder nicht haben wird?
Ähnlichkeiten: deklarative Vorlagen, Datenbindung.
Unterschiede: Angular verfügt über APIs auf hoher Ebene für Dienste, Filter, Animationen usw., unterstützt IE8 und ist zu diesem Zeitpunkt ein viel robusteres Framework für die Erstellung von Produktions-Apps. Polymer fängt gerade erst in Alpha an.
Gibt es Pläne, Polymer in Zukunft mit AngularJS zu verbinden?
Es sind getrennte Projekte . Das Angular- und das Ember-Team kündigten jedoch an, dass sie die zugrunde liegenden Plattform-APIs irgendwann in ihren eigenen Frameworks verwenden werden.
^ Dies ist ein großer Gewinn IMO. In einer Welt, in der Webentwickler über leistungsstarke Tools (Shadow DOM, Custom Elements) verfügen, können Framework-Autoren diese Grundelemente auch verwenden, um bessere Frameworks zu erstellen. Die meisten von ihnen durchlaufen derzeit große Probleme, um "die Arbeit zu erledigen".
AKTUALISIEREN:
Es gibt einen wirklich großartigen Artikel zu diesem Thema: " Hier ist der Unterschied zwischen Polymer und Angular "