Using AngularJS in Polymer Web Component
I want to make a small Angular app from a Polymer web component.
I wrote a quick test to see if this is trivial:
<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 doesn't work. The page is displayed ... ...
instead of ... testing ...
. No errors are displayed on the console.
I tried to extract the Angular code from the hook ready
and completely over the Polymer function. A console.log(angular, app)
in ready
returned the correct things, but gave the same result as before.
I also tried to put the Angular code inside the template at the very bottom, essentially treating the tag <template>
as a tag <body>
. This also led to the same behavior.
Can Angular be used in a web component? If possible, I would like to be able to use the encapsulation properties (shadow DOM, etc.) of Web Components when using AngularJS.
source to share
I am currently using Angular and Polymer together without any problem in a very large web application using the ng-polymer-elements variant .
It also has helpful tests.
source to share
I was looking for the same solution and created a sample code. You can check the question / answer . And try using 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>
source to share
To summarize this problem in one line: Angular and Polymer don't go too well together
Angular and Polymer use a similar syntax when it comes to data-binding
others directives
, so both of these structures get confused and return an error or do nothing at all.
Please don't be mistaken web-components
for Angular Directive (custom elements), Angular compiles this custom element definition into native elements like div
and p
, whereas Polymer makes extensive use of some brand new features like Shadow-Dom
, html imports
etc. to develop custom elements natively, none of which is understood by the Angular compiler.
So my suggestion is that if you are submitting Meterial-design and you choose Polymer for that Meterial-design components, I suggest you use Angular-Material, this is Angular's custom material constructor to create attractive applications.
web-components
Can not be used with Angular at this time .
Below is a link to a video that goes deeper into this topic:
https://www.youtube.com/watch?v=p1NpZ-0Op0w
source to share