Using AngularJS in a Polymer web component

3
votes

I would like to make a small Angular app from within a Polymer web component.

I wrote a quick test to see if this is trivially possible:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<script type="text/javascript" src="../../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../bower_components/angular/angular.js"></script>

<polymer-element name="test-component">
  <template>
    <div ng-app="app">
      <div ng-controller="AppCtrl">
        ... {{test}} ...
      </div>
    </div>
  </template>

  <script>
    !function () {
      Polymer('test-component', {
        ready: function () {
          var app = angular.module('app', [])
          app.controller('AppCtrl', function ($scope) {
            $scope.test = 'testing';
          });
        }
      });
    }();
  </script>
</polymer-element>

Unfortunately, this does not work. The page displays ... ... instead of ... testing .... No errors are shown in the console.

I tried taking the Angular code out of the ready hook and above the Polymer function entirely. A console.log(angular, app) in ready was returning the correct things, but yielded the same result as before.

I also tried to put the Angular code inside the template at the very bottom, essentially treating the <template> tag like a <body> tag. This also resulted in the same behavior.

Is it possible to use Angular in a web component? If possible, I would like to be able to use the encapsulation qualities (shadow DOM and such) of web components while still using AngularJS.

3
javascriptangularjspolymerweb-component

3 Answers

0
votes

As of now, I am using Angular and Polymer together without any problems, on a very large web app, using a variant of ng-polymer-elements.

It has some useful tests, too.

0
votes

I was looking for the same solution, and have created sample code. You can check question/answer. And try to use an example. Example: 

<link rel="import" href="../polymer/polymer.html">

<!-- Defines element markup -->
<dom-module id="my-element">
<template>
    <div id="my-app">   
        <ui-view></ui-view>
    </div>
</template>
<!-- Registers custom element -->
<script>
Polymer({
    is: 'my-element',

    // Fires when an instance of the element is created
    created: function() {},

    // Fires when the local DOM has been fully prepared
    ready: function() {
            $.getScript('./app/may-ng-app.min.js');
    },

    // Fires when the element was inserted into the document
    attached: function() {},

    // Fires when the element was removed from the document
    detached: function() {},

    // Fires when an attribute was added, removed, or updated
    attributeChanged: function(name, type) {}
});
</script>
</dom-module>
-1
votes

To summarize this problem in one line: Angular and Polymer don't go too well together

Angular and Polymer use kind of similar syntax when it come to data-binding and other directives, so both these frameworks get confused and returns error or worse nothing at all.

Please dont mistake web-components for Angular Directive(custom-elements), Angular compiles these custom-element definition into native elements such as div and p, whereas Polymer makes extensive use of some brand new Specs like Shadow-Dom, html imports and more to develop custom-elements natively, none of which are understood by Angular's compiler.

So my suggestion is that if you fancy Meterial-design and you choose Polymer for it's Meterial-design components I suggest you use Angular-Material, this is an angular specific Material-design module to build good looking apps.

As of right now, there is no way to use web-components with Angular.

Below is a link to a video that talks about this topic deeper:
https://www.youtube.com/watch?v=p1NpZ-0Op0w