this is more of how does it work question than a problem.
I building a polymer app and need to use jQquery text function. So I simply call $(this.variable).text(). It all works perfectly.
When removing this script include :
I receive the below error
Uncaught ReferenceError: $ is not defined
Nowhere else I include jQuery. So my questions are : If another script includes jQuery does it make jQuery included in hte current app? Does Polymer never includes jquery?
Currently, scripts included in a web component execute in the global scope. That is to say while shadow DOM sandboxes HTML and CSS, it does not currently do that with scripts. There is some discussion of this type of isolation occurring, but it appears to be long off.
So if any web component included jQuery in the global scope - it would be available to any other web component.
While any particular polymer element COULD include jQuery, I've yet to see one that does. The Polymer library itself most certainly does not include jQuery.
Related
I know the question looks like some others I could read but it's not the exact same issue in my opinion.
I have a "loading screen" (small piece of HTML) in my Angular application. This loading screen is present in three places :
When the application is not loaded yet (so inside the tag of the root component in the index.html : <app-root>my loading html</app-root>
When the router inside the root component is not yet ready to display the "final" component. (See answer here for more detail)
In the "final" component itself waiting for some data to be loaded from an HTTP service.
In the second and the third cases the "loading screen" could be in another component. But it's not possible for the first one since another component will only be displayed after the app is fully loaded and we want the first loading screen to be visible as soon the user get the index.html.
So for the moment I have this short "loading screen" HTML duplicated in multiple places.
I don't care if it's duplicated once built and delivered to the user but from a code point of view I want it to exist only once... (You know how it is, when someone will have to change the message it will be forgotten in the other places...)
I could use iframe (or object but W3C advise to use iframe instead) but people here want to avoid it at all cost so I think the code duplication will be preferred to this solution.
I could also have a small JS to do it (like this answer) but it feel wrong to add a "wild js" in an Angular app...
My question is : Do I have a way to include HTML file into another HTML file (like the "include()" in PHP) with some markup (like in this answer about Service Side Include) that could be resolved during the Angular compilation?
I mean the AOT compilation is already checking the HTML template so it could be quite easy...
Thanks in advance!
It's not in the compilation time, but a way to do something similar to what you are asking, is this:
You could have your "loading screen" html code as a component (for instance, app-loading-component), declared and exported inside a Shared Module.
Then, in the component 'X' in which you want to use it, you have to import the Shared Module in the section imports:[] of the module of that 'X' component, and used it in your HTML in the usual way:
<app-loading-component></app-loading-component>
I have a single page application written in AngularJS. I need to put a UI5 text field there (for testing purposes) that I am using with Declarative Support.
I have 2 files:
index.html
sap.html.
In my index.html I have <div class="mainView" ng-view></div>
and there I inject sap.html into the index.html.
when I write this line in my index.html I see the sap text field:
<div data-sap-ui-type='sap.ui.commons.TextField' id='message' class='my-button' data-value='Hello World'></div>
However, when I put this code in sap.html the text field isn't being shown in the browser.
When I look in the chrome F12 source mode - I see that the UI5 related tag has been evaluted into textbox in the index.html. This doesn't happen in the sap.html (the "injected by angular ng-view" page) - I just see the tag "as is" - the DOM in the injected page was not evaluted.
Why is that happening? Does AngularJS bootstrap or life cycle
interfere with sap boostrap?
Any way to fix it?
I need to use AngularJS because it is a part of an existing app. A re-write of the app is not an option for me.
Thanks
I never came across this scenario and really do not consider this a good solution (but this is my opinion). I wonder why do you expect UI5 to be aware of AngularJS injecting markup dynamically?
However, the documentation shows an example of how to compile dynamically loaded markup. Obviously AngularJS provides an event to listen to reloads of ngView content, maybe it is possible to trigger the compliation there.
I'm coming from a javascript/react/react-router/webpack background to a clojurescript/om environment.
With webpack & react-router it was possible to split my code and only load the javascript needed. E.g. on /login I would only load the js necessary to display the login-page everything else would be left out.
How do I the same with clojurescript/om?
Apparently it's possible to split your code into multiple files: https://github.com/clojure/clojurescript/wiki/Compiler-Options#modules
The question is how do I only load the code necessary to render the current page: /login for example...
With webpack I would manually write require.ensure to asynchronously load the necessary javascript to render a certain page. React Router supports this very well.
Is there any equivalent in clojurescript without making multiple html files and each giving it the right script tag with the splitted code through google closure modules?
Sadly I don't have a concrete example yet, and I agree that webpack and react-router make this really easy. There are some links that may direct you to get it working:
Code splitting: http://swannodette.github.io/2015/02/23/hello-google-closure-modules
Manually adding script tags to html files
Actual docs: https://github.com/clojure/clojurescript/wiki/Compiler-Options#modules
Dynamic loading of cljs modules: https://rasterize.io/blog/cljs-dynamic-module-loading.html
Uses multi-methods for route definitions to dynamically add implementations when loading more code
Dense read, there is no easy tooling regarding this use case right now, but the article has all clues to get it working
I hope this helps. If you get around to implementing this in an OSS example it would be great if you could share the link.
The polymer app that is generated when "JavaScript Polymer custom element" is selected as the project type in Chrome Dev Editor's "New Project" dialog displays a blank screen when run.
Is this a bug or am I doing something wrong?
If it is a bug, then how would I get the polymer app to display something?
Judging by your description, it sounds like you are forgetting to refactor for CSP. Right click on your project name, and select Refactor for CSP. This will take a while, but when it's done, it will work.
Sorry for the delayed response.
Please try the up-to-date Chrome Dev Editor. It's possible that the mentioned template was broken and got fixed since you've submitted the question.
Also make sure that you either:
have index.html or demo.html selected when clicking the Run button; or
right-click on of them and select Run... from the context menu.
What might have happened is that you confused Polymer element with a Polymer app. The template that've you used generates an element. It also provides an example of the element's usage in form of demo.html, and a standard Polymer element description page (based on the core-component-page element that reads and displays elements properties from the metadata.html) in form of index.html. So you have to explicitly run one of those to see something. If you attempt to "run" the element itself (say, click the Run button with my-element.html selected), you will see a blank screen, just like with any other pure Polymer template, because there is no renderable HTML in there (it's called a template for a reason).
If you do indeed want a Polymer app, consider using JavaScript web app (using Polymer paper elements) or JavaScript Chrome app (using Polymer paper elements) project types.
Try at first, to run the bower update from your command line
bower install Polymer/core-elements --save
And you might also need to right click on your project directory from the right panel of chrome dev editor and select Refractor for CSP.
Possibly in the example app, the CDE project (bower.json level) was in a subdirectory of the directory that you imported into the editor. Try to import a level deeper instead.
I'm making an extension for chrome to visualize the js structure but for some reason I am not able to access custom js variables from the extension. How could I read these vars/properties? like knowing if jQuery exist?
Content scripts run in isolated world:
They cannot:
Use variables or functions defined by web pages or by other content scripts
You should try injecting a <script src='injected.js'><script> (this script should be able to 'see' the web page defined variables and functions) to page header from content script and then establishing a communication between these two. Content script and injected script can talk simply over DOM (by ie. posting messages in a hidden div) or, better, using postMessage/addEventListener.