Is there a way to run angularJS app as polymer component?

Question

I am looking a way to include asynchronously angularJS application with it's own styles and views included to JS into Polymer component. To make some kind of iframe.

If you have any ideas, suggestions or real-world examples, it would be really helpfull!

Answer 1

Finally, I found a solution on my own. Just needed to bootstrap angular application on the specific element to avoid conflicts in case it will run more than one application. And implemented ajax calling of the script.

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>

In this case, angular app bootstrapping on the my-app element. And we can deploy separately angular application, and hold it in the polymer container. It gives us flexibility, and speed download of the page.