Sobre el Polímero Introducción página, podemos ver un ejemplo de Polímero en acción:

<html>
  <head>
    <!-- 1. Shim missing platform features -->
    <script src="polymer-all/platform/platform.js"></script>
    <!-- 2. Load a component -->
    <link rel="import" href="x-foo.html">
  </head>
  <body>
    <!-- 3. Declare the component by its tag. -->
    <x-foo></x-foo>
  </body>
</html>

Lo que usted notará es <x-foo></x-foo> siendo definido por platform.js y x-foo.html.

Parece que este es el equivalente a una directiva módulo en AngularJS:

angular.module('xfoo', [])
.controller('X-Foo', ['$scope',function($scope) {
    $scope.text = 'hey hey!';
})
.directive('x-foo', function() {
    return {
        restrict: 'EA',
        replace: true,
        controller: 'X-Foo',
        templateUrl: '/views/x-foo.html',
        link: function(scope, controller) {
        }
    };
});
  • ¿Cuál es la diferencia entre los dos?

  • ¿Qué problemas de Polímero de resolver que AngularJS no ha o no?

  • Hay planes para atar Polímero con AngularJS en el futuro?

InformationsquelleAutor Dan Kanze | 2013-08-06

10 Comentarios

  1. 519

    No eres la primera a esta pregunta 🙂 te voy a aclarar un par de cosas antes de llegar a sus preguntas.

    1. Del polímero webcomponents.js es una biblioteca que contiene varios polyfills para varios W3C Api que caen bajo los Componentes Web de paraguas. Estos son:

      • Elementos Personalizados
      • HTML Importaciones
      • <template>
      • Sombra DOM
      • Los Eventos De Puntero
      • otros

      La izquierda de la navegación en la documentación (polymer-project.org) tiene una página para todas estas «tecnologías de la Plataforma». Cada una de esas páginas también tiene un puntero a la persona polyfill.

    2. <link href="x-foo.html"> es un HTML de Importación. Las importaciones son una herramienta útil para la inclusión de HTML en otros HTML. Puede incluir <script>, <link>, la marca o cualquier otra cosa en una importación.

    3. Nada «enlaces» <x-foo> a x-foo.html. En el ejemplo, se supone que el Elemento Personalizado de la definición de <x-foo> (por ejemplo,<element name="x-foo">) se define en x-foo.html. Cuando el navegador se ve esa definición, es registrado como un nuevo elemento.

    A preguntas!

    ¿Cuál es la diferencia entre el Angular y el Polímero?

    Vimos algo de esto en nuestro Q&a Un vídeo. En general, los Polímeros es una biblioteca que tiene como objetivo utilizar (y muestran cómo el uso) de Componentes Web. Su fundación es la Costumbre de los Elementos (por ejemplo, todo lo que construimos es un componente web) y evoluciona a medida que la web evoluciona. Para ello, sólo compatible con la última versión de los navegadores modernos.

    Voy a utilizar esta imagen para describir Polímero de toda la arquitectura de la pila:

    ¿Cuál es la diferencia entre el Polímero y elementos de AngularJS directivas?

    Capa ROJA: llegamos de mañana en la web a través de un conjunto de polyfills. Tenga en cuenta, que las bibliotecas desaparecen con el tiempo como los navegadores de adoptar la nueva Api.

    Capa AMARILLA: añada un poco de azúcar con polymer.js. Esta capa es nuestra opinión sobre cómo usar la especificación había Api, juntos. También agrega cosas como el enlace de datos, syntatic el azúcar, el cambio de los vigilantes, publicado propiedades…pensamos que estas cosas son útiles para la construcción de la web basado en componentes de aplicaciones.

    VERDE: El amplio conjunto de componentes de interfaz de usuario (capa verde) está todavía en progreso. Estos serán los componentes web que utilizan todos los del rojo + amarillo capas.

    Angular de las directivas frente a los Elementos Personalizados?

    Ver a Alex Russell respuesta. Básicamente, la Sombra DOM permite componer bits de HTML, pero también es una herramienta para la encapsulación de que el HTML. Este es, fundamentalmente, un nuevo concepto en la web y algo de otros marcos aprovechará.

    ¿Qué problemas de Polímero de resolver que AngularJS no ha o no?

    Similitudes: declarativa plantillas de enlace de datos.

    Diferencias: Angular tiene un alto nivel de Api para servicios, filtros, animaciones, etc., soporta IE8, y en este punto, es mucho más robusto framework para el desarrollo de la producción de las aplicaciones. Polímero está empezando a cabo en alfa.

    Hay planes para atar Polímero con AngularJS en el futuro?

    Son proyectos independientes. Dicho esto, tanto el Angular y Ember equipos anunció que finalmente va a mover a la utilización de la plataforma subyacente Api en sus propios marcos.

    ^ Esta es una gran victoria de la OMI. En un mundo donde los desarrolladores web tienen poderosas herramientas (Shadow DOM, Elementos Personalizados), marco autores también puede utilizar estos primitivos para crear mejores marcos. La mayoría de ellas, ir a través de grandes aros para «hacer el trabajo».

    ACTUALIZACIÓN:

    Hay un gran artículo sobre este tema: «He aquí la diferencia entre el Polímero y Angular«

    • El punto importante aquí, es que el Polímero es acerca de la toma de la Web como la conocemos adelante, específicamente al mostrar cómo los Componentes Web puede hacer que la Web abierta, compartir y extensible. AngularJS (y Ember, para el caso) es acerca de la creación de un marco que aprovecha las mejores partes del navegador para crear sensible aplicaciones. Una vez que los Componentes Web de mejor soportado por los navegadores, Angulares y de otros marcos se puede construir sobre ellos, para hacer el marco del código de menores, y las aplicaciones más simples. Es por eso que es ganar-Ganar para todos.
    • Puedo entender los conceptos básicos de Polímero, y también el uso de Angulares… también me importa un bledo acerca de IE8 o por debajo. Son estos dos marcos compatible en la actualidad? O hay algunos oculta trampas con la inclusión de ellos juntos?
    • Todavía no entiendo cuál es la diferencia práctica entre los Polímeros Elementos Personalizados y Angular de las Directivas es? ¿Por qué utilizar Polímero Elementos Personalizados en lugar de Angular Directivas en un Angular del proyecto?
    • Por lo que los Angulares y Ember proyectos en última instancia benefician del uso de la plataforma subyacente Api. Pero cuando los Componentes Web de mejor soportado por los navegadores, sería no habría ningún beneficio en el uso de Angulares en nuevo de los proyectos, o lo hace de manera efectiva a ser redundante?
    • Creo que para hacerla en blanco y negro: palo con AngularJS para la producción de cosas y jugar con el Polímero en su tiempo libre, de modo que usted puede estar familiarizado con él cuando llegue el momento.
    • Es un buen resumen de polymer.js pero de ninguna manera responder a la pregunta de fondo…
    • AngularJS es todavía un marco MVC, y sus principales características, como la inyección de dependencia será útil incluso después de Polímero de su lanzamiento.
    • Permítanme alterar ligeramente la crepe de la pregunta: Aparte de la alfa-estado de Polímero, ¿hay alguna razón para preferir escribir Angular directivas de de Polímeros de elementos?
    • IMO.. polymerjs sólo debe ser utilizado como un no-interferencia manera de inyectar en el proyecto. Así que si usted ya tiene un proyecto con un marco, como php symphony, o mvc5 net framework, y desea mantener las cosas como están, puede adjuntar polímero como una manera de jugar con y agregar a su proyecto. Angular apenas se parece como un gran paso en otra dirección, donde, si desea crear un proyecto desde cero y diseño de una manera radicalmente diferente de cómo ha sido el diseño (es decir: el grueso del cliente vs espesor de servidor).
    • También debe comprobar fuera de Facebook del ReactJS, que encapsula el DOM de la misma manera como se describe por el Polímero. En mi opinión, ReactJS está más cerca del valor de la producción de polímero. Y tal vez en algún momento en el futuro, Angular se juega es de Polímero de la forma de crear componentes web en lugar de ir a través de la incorporada método de creación de directivas.
    • Tengo que decir, buen gráfico!
    • Yo estaba pensando que sería divertido si por alguna razón el OP no elegir tu respuesta como la correcta 😛

  2. 57

    Para su pregunta:

    Hay planes para atar Polímero con AngularJS en el futuro?

    Desde la cuenta oficial de twitter de AngularJS : «angularjs hará uso de polímeros para sus widgets. Es ganar-ganar»

    fuente : https://twitter.com/angularjs/status/335417160438542337

    • Ok, yo no respuesta al título del post, pero una de las preguntas dentro del post, Mi respuesta es solo para la 3ª pregunta : Are there plans to tie Polymer in with AngularJS in the future? supongo que es una buena idea para citar post original de AngularJS equipo no crees ?
    • Sí seguro ur punto es válido… Sólo que la descripción podría haber sido mejor… Como yo lo he hecho esta vez y estoy seguro de que la próxima vez u será así…
    • si seguro. thx por la actualización 🙂 (soy iniciar realmente el uso de stackoverflow, así que no veo su actualización antes de responder…)
    • Así lo hicieron el cambio de la mente? Me parece que no puede encontrar donde están el uso de polímero.
    • la «voluntad» significa que está en los planes, simplemente no se ha hecho todavía.
    • no creo que esta es una respuesta.

  3. 19

    1 & 2) Polímero componentes se encuentran en el ámbito debido a su ocultos del árbol en la sombra dom. Eso significa que su estilo y comportamiento no sangro. Angular no es el ámbito para que el particular, la directiva se crea como un polímero componente web. Un angular de la directiva podría estar en conflicto con algo en su ámbito global. IMO el beneficio que se obtiene de polímero es lo que he explicado.. modular de los componentes que han ámbito de css & JavaScript para ese componente en particular de que nada puede tocar. Intocable DOM!

    Angular de las directivas pueden ser creados para que usted puede anotar un elemento con varias piezas de funcionalidad. En Polímero de componentes web que no es el caso. Si desea combinar la funcionalidad de los componentes que incluyen dos componentes en otro componente (o incluirlos en otro componente) o se puede extender un componente existente. Recuerde que la principal diferencia es que cada componente se encuentra en el ámbito de polímero de componentes web. Usted puede compartir css & js archivos a través de varios componentes o usted puede en línea de ellos.

    3) Sí, Angular planes sobre la incorporación de polímero en la versión 2+ según Rob Dodson y Eric Bidelman

    Es curioso cómo aquí nadie ha mencionado la palabra alcance. Creo que es una de las principales diferencias.

    Hay muchas diferencias, pero también tienen un heck de mucho en común cuando se trata de crear modular de lego como piezas de funcionalidad de una aplicación. Creo que es seguro decir que Angulares sería el marco de la aplicación de polímero y algún día podría vivir en la misma aplicación a lo largo del lado de las directivas con la gran diferencia alcance, pero polímero puede ser un reemplazo para una gran cantidad de sus directivas actuales. Pero no veo razón por la Angulares podría no funcionar como es y que incluyen los componentes poliméricos así.

    La lectura a través de las respuestas de nuevo, mientras escribo esto, me di cuenta de que Eric Bidelman(ebidel) ¿tipo de cubierta que en su respuesta:

    «Shadow DOM permite componer bits de HTML, pero también es una herramienta para la encapsulación de que el HTML.»

    Dar crédito donde el crédito es debido, tengo mis respuestas de escuchar a muchas entrevistas con Rob Dodson y Eric Bidelman. Pero me parece que la respuesta no fue escrito para darle a este tipo de pregunta el entendimiento de que él quería. Con eso dicho, creo que me han tocado en la respuesta que está buscando, pero de ninguna manera puedo tener más información sobre el tema de Rob Dodson y Eric Bidelman

    Aquí son mis principales fuentes para la información que he reunido.

    JavaScript Jabber – Polímero con Rob Dodson y Eric Bidelman

    Tienda De Talk Show – Componentes Web Con Rob Dodson

    • Así que si yo uso normalize.css, no normaliza dentro de la sombra dom? Así que me necesita por separado normalizar cada uno de dichos componentes, sin una manera de hacerlo de una vez? Es una buena cosa?
    • No creo que de la Sombra DOM como un IFRAME. Y yo uso esta comparación de manera imprecisa, porque no es un IFRAME. Pero en un IFRAME, usted tendría su propio documento, que no está afectada por la CSS y JavaScript de las páginas del documento de los padres. Esta es una muy buena cosa. Esto significa que usted puede garantizar que un determinado componente se ejecutará como la intención y no ser interferido por la página principal. Sin embargo, Si la sombra DOM quería utilizar el DOM de la página principal se puede. Pero eso es otro tema.
    • Veo, sí, el CSS es una fuga en el lenguaje, pero en la mayoría de los casos no es sencillo (aunque no perfecta) de la solución mediante el uso exclusivo de la clase de los prefijos en el interior de la DOM que desea aislar. Y, por supuesto, evitando la etiqueta y los selectores id, que no es una buena práctica, de todos modos. Por otro lado, algunas de las declaraciones que en realidad puede quiero a la fuga (como normalize.css u otra etiqueta basada en las hojas), que es una vez más fácil de lograr sin Sombra DOM. Agradablemente no un perfecto aislamiento, pero prob. funciona en el 95% de los casos de uso, al menos los que yo pueda pensar.
    • Habiendo dicho esto, tengo que decir que veo el mérito de un aislamiento correcto, y encontrar su respuesta proporcionando una buena explicación.
  4. 6

    Polímero es una Web de los Componentes de la laminilla de

    • «Componentes Web» es un nuevo conjunto de normas que está envuelto por HTML 5 diseñado para proporcionar reutilizables bloques de construcción de aplicaciones web.

    • De los navegadores están en diversos estados de la implementación de la Web de «Componentes» de la especificación, y por lo tanto, es demasiado pronto para escribir HTML con Componentes Web.

    • Pero ¡ay!! El polímero al rescate! Polímero es una librería que proporciona una capa de abstracción para el código HTML, lo que permite hacer uso de la Web de los Componentes de la API como si fuera completamente implementado en todos los navegadores. Esto se llama poli-llenado, y el Polímero equipo distribuye esta biblioteca como webcomponents.js. Esto se llamaba platform.js btw.

    Pero Polímero es más que un relleno de la biblioteca de componentes web…

    Polímero también proporciona abiertos y reutilizables Componente Web de bloques de construcción a través de Elementos

    ¿Cuál es la diferencia entre el Polímero y elementos de AngularJS directivas?

    Todos los elementos se pueden personalizar y extender. Estos se utilizan como bloques de construcción para cualquier cosa, desde social widgets a la animación a la web de clientes de API.

    Polímero no es un framework de aplicaciones web de

    • Polímero es más de una biblioteca de un marco.

    • Polímero no tiene soporte para cosas como las rutas, ámbito de aplicación, controladores, etc.

      • Pero tiene dos vías de enlace, y la utilización de componentes «se siente» como en el uso de Angulares de las directivas.
    • Aunque hay algunas coincidencias entre Polímero y AngularJS, que no son el mismo. De hecho, la AngularJS equipo ha mencionado la utilización de Polímeros de las bibliotecas en las próximas versiones.

    • También tenga en cuenta que el Polímero es todavía considerado como «bleeding edge», mientras que AngularJS se está estabilizando.

    • Va a ser interesante ver a los dos de estos proyectos de Google evolucionar!

    • Polímero no es una calza o polyfills. Eso es lo que la webcomponents.js polyfills son. Polímero es una librería para la creación de componentes web. El Polímero equipo también creó también las colecciones de componentes de la web (se ha implementado el uso de Polímero), pero los que no son también «Polímero»
    • Actualización: Polímero ahora tiene rutas, y es estable! 😀
  5. 5

    Creo que desde un punto de vista práctico, en la final de la función de plantilla de angular de las directivas, y el componente web de la metodología aprovechado por polímero tanto realizar la misma tarea. Las principales diferencias que puedo ver es que se polímero aprovecha la Api web para incluir bits de HTML, una más sintácticamente correcta, y simplista de manera de lograr lo que Angulares hace a través de programación como se hace plantillas. Polímero es, sin embargo, como se ha dicho, un pequeño framework para la creación de declarativo y plantillas interactivas con el uso de componentes. Esté disponible para el diseño de interfaz de usuario sólo a los efectos de, y sólo se admite en la mayoría de los navegadores modernos. AngularJS es un completo MVC framework diseñado para hacer que las aplicaciones web declarativo por el uso de enlaces de datos, las dependencias y directivas. Son dos animales completamente diferentes. A tu pregunta, me parece que en este punto no obtendrá el mayor beneficio de usar polímero más angulares, excepto el tener docenas de pre componentes integrados, sin embargo, que todavía requieren que usted port aquellos a angular de las directivas. En el futuro, sin embargo, como la Api web se vuelven más avanzados, la web de los componentes de eliminar completamente la necesidad a través de programación definir y construir las plantillas como el navegador será capaz de simplemente incluirlos en una manera similar a la manera en que se maneja javascript o css archivos.

    • «Son dos animales completamente diferentes.» Sí lo son, pero que no tiene nada que ver con la pregunta. La pregunta es acerca de Polímero de ELEMENTOS vs AngularJS DIRECTIVAS. Y esos son muy similares en muchos aspectos. No estamos preguntando acerca de lo que es el Marco ideal para usar.. Polímero vs AngularJS. «a mí me parece que en este punto no obtendrá el mayor beneficio de usar polímero más de angular» nadie ha sugerido que esto, en realidad, lo que hemos hablado sobre el tiempo, utilizando al lado de la otra en alguna capacidad. «A su pregunta, … te vas a obtener ningún beneficio del uso de polímeros más de angular» de Nuevo, no es la cuestión.
  6. 0

    MVVM (model-view, vista modelo) que Angular ofrece no es una preocupación de que el Polímero se pretende resolver. El que se puede componer & re-utilizable de la naturaleza que Angulares directivas doy con una etiqueta personalizada + asociada a la lógica de combinación) es una de las más cuerdo de comparación cuando se considere la posibilidad de comparar Angular y de Polímero. Angular es y seguirá siendo un objetivo más amplio-servir de marco.

  7. 0

    ¿Cuál es la diferencia entre los dos?

    A un usuario: No mucho. Usted puede construir aplicaciones impresionantes con ambos.

    De un desarrollador: Que usar una sintaxis diferente para cada solución tiene un bastante empinada curva de aprendizaje. Angular ha sido de alrededor de más tiempo y tiene una GRAN comunidad, de manera que sería muy difícil encontrar problemas que no han sido resueltos.

    A un arquitecto: Muy diferente. Angular es un marco de aplicación responsable de todos los aspectos de su vida. Incluso se ha directivas integradas verticalmente en el caso de que quiera componente de características similares. Polímero en el otro lado es más como » pay-as-you-go. Quieres un modal, cosa segura, quieres un widget interactivo, no hay problema, usted desea que la ruta de manejo, podemos hacer eso. Polímero también es más portátil que Angulares requiere un Angular de la aplicación para la reutilización de las directivas. La idea con el Polímero es más moduler y va a trabajar en otras aplicaciones, incluso Angulares aplicaciones.

    ¿Qué problemas de Polímero de resolver que AngularJS no ha o no?

    Polímero es una aproximación a la cabeza para tomar ventaja de la nueva web de componentes estándares. Si las características como elementos personalizados, Sombra DOM y HTML importaciones son compatibles a nivel local, sería absurdo no tomar ventaja de ellos. En la actualidad la mayoría de los web componente de rasgos no son ampliamente apoyadas (estado actual) así Polímero actúa como cuña o un puente. Un poco como un relleno (de hecho se hace uso de polyfills).

    Hay planes para atar Polímero con AngularJS en el futuro?

    Hemos estado utilizando Angular y el Polímero juntos por más de un año. Parte de la decisión se basa en las promesas hechas directamente por el Polímero equipo para nosotros que la interoperabilidad de estar allí. Nos han dado la idea. Ahora nos estamos moviendo hacia el uso de sólo Polímero.

    A hacerlo todo de nuevo, probablemente no habría hecho la utilización de Polímeros en todo, en lugar de esperar a que madure. Que siendo dicho Polímero tiene sus pros (algunos muy buenos) y los contras (algunos de los cuales son bastante frustrante) pero creo que es un debate para otro hilo.

  8. 0

    Angularjs directiva es un enfoque para la fabricación de elementos personalizados. usted puede definir nuevas etiquetas personalizadas con atributos personalizados. Polímero también puede hacer esto, pero lo voy a hacer en un interesante y de un modo más simple.Polímero en realidad no es un marco que es sólo una biblioteca.pero un potente y maravillosa biblioteca que se puede caer en el amor con ella (me gusta). Polímero permitirá aprender el nativo de componentes web con tecnología hecha por el w3c, que los navegadores web, finalmente, la implementación de la misma.componente web es la tecnología del futuro, pero polímero permiten el uso que de la tecnología de ahora.Google Polímero es una librería que proporciona el azúcar sintáctico y polyfills para la construcción de elementos y aplicaciones con componentes web.Recuerdo que me dijo polímero no es un marco y una biblioteca.Pero cuando estás utilizando el Polímero, en realidad, su marco es DOM.este post fue acerca de angular js ver 1 y el polímero y me ha funcionado con ninguno de ellos es de mis proyectos, y yo, personalmente, prefiero las de polímero de más de angularjs. Pero Angulares de la versión 2 es completamente diferente en comparación de angularjs ver 1.la directiva angular 2 tiene un significado diferente.

  9. 0

    Angular directivas son conceptualmente similares a los Elementos Personalizados pero son implementados sin el uso de la Web de los Componentes de la Api. Angular directivas son una manera de construir los elementos personalizados, pero Polímero y la Web de los Componentes de la especificación de los estándares basados en la manera de hacerlo.

    polímero-elemento:

    <polymer-element name="user-preferences" attributes="email">
      <template>
        <img src="https://secure.user-preferences.com/path/{{userID}}" />
      </template>
      <script>
        Polymer('user-preferences', {
          ready: function() {
            this.userID= md5(this.email);
          }
        });
      </script>
    </polymer>

    Angular de la directiva:

    app.directive('user-preferences', ['md5', function() {
      return {
        restrict: 'E',
        link: function(scope, element, attrs) {
          scope.userID= md5(attrs.email);
        },
        template: '<img src="https://secure.user-preferences.com/path/{{userID}}" />'
      };
    }]);

Dejar respuesta

Please enter your comment!
Please enter your name here