Vous n'êtes pas le premier à poser cette question :) Permettez-moi de clarifier quelques points avant de passer à vos questions.
Polymer webcomponents.js
est une bibliothèque qui contient plusieurs polyfills pour diverses API W3C qui relèvent du parapluie des composants Web. Ceux-ci sont:
- Éléments personnalisés
- Importations HTML
<template>
- DOM fantôme
- Événements de pointeur
- autres
La navigation de gauche dans la documentation ( polymer-project.org ) a une page pour toutes ces "technologies de plate-forme". Chacune de ces pages a également un pointeur sur le polyfill individuel.
<link rel="import" href="x-foo.html">
est une importation HTML. Les importations sont un outil utile pour inclure du HTML dans un autre HTML. Vous pouvez inclure <script>
, un <link>
balisage ou tout autre élément dans une importation.
Rien ne "relie" <x-foo>
à x-foo.html. Dans votre exemple, il est supposé que la définition d'élément personnalisé <x-foo>
(par exemple <element name="x-foo">
) est définie dans x-foo.html. Lorsque le navigateur voit cette définition, il est enregistré en tant que nouvel élément.
Passons aux questions!
Quelle est la différence entre angulaire et polymère?
Nous en avons couvert une partie dans notre vidéo de questions-réponses . En général, Polymer est une bibliothèque qui vise à utiliser (et à montrer comment utiliser) les composants Web. Il repose sur des éléments personnalisés (par exemple, tout ce que vous créez est un composant Web) et il évolue au fur et à mesure que le Web évolue. À cette fin, nous ne prenons en charge que la dernière version des navigateurs modernes.
Je vais utiliser cette image pour décrire toute la pile d'architecture de Polymer:
![entrez la description de l'image ici](https://i.stack.imgur.com/Ksn6s.png)
Couche ROUGE: Nous obtenons le Web de demain grâce à un ensemble de polyfills. Gardez à l'esprit que ces bibliothèques disparaissent avec le temps lorsque les navigateurs adoptent les nouvelles API.
Couche JAUNE: Saupoudrer de sucre avec du polymère.js. Cette couche est notre avis sur la façon d'utiliser ensemble les API spécifiées. Il ajoute également des éléments tels que la liaison de données, le sucre syntaxique, les observateurs des modifications, les propriétés publiées ... Nous pensons que ces éléments sont utiles pour la création d'applications basées sur des composants Web.
VERT: L'ensemble complet de composants d'interface utilisateur (couche verte) est toujours en cours. Ce seront des composants Web qui utiliseront toutes les couches rouges + jaunes.
Directives angulaires vs éléments personnalisés?
Voir la réponse d' Alex Russell . Fondamentalement, Shadow DOM permet de composer des bits de HTML mais est également un outil pour encapsuler ce HTML. Il s'agit fondamentalement d'un nouveau concept sur le Web et quelque chose que d'autres cadres utiliseront.
Quels problèmes Polymer résout-il qu'AngularJS n'a pas ou ne veut pas?
Similitudes: modèles déclaratifs, liaison de données.
Différences: Angular possède des API de haut niveau pour les services, filtres, animations, etc., prend en charge IE8 et, à ce stade, est un cadre beaucoup plus robuste pour la création d'applications de production. Polymer commence tout juste en alpha.
Est-il prévu de lier Polymer à AngularJS à l'avenir?
Ce sont des projets séparés . Cela dit, les équipes Angular et Ember ont annoncé qu'elles finiront par utiliser les API de plate-forme sous-jacentes dans leurs propres cadres.
^ C'est une énorme victoire à l'OMI. Dans un monde où les développeurs Web disposent d'outils puissants (Shadow DOM, éléments personnalisés), les auteurs de framework peuvent également utiliser ces primitives pour créer de meilleurs frameworks. La plupart d'entre eux passent actuellement par de grands cerceaux pour "faire le travail".
MISE À JOUR:
Il y a un très bon article sur ce sujet: " Voici la différence entre Polymer et Angular "