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.
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>
How is it possible for a web application/website to have the same identical source code behind every page on the site with no change at all. I was looking at the crypto - fiat currency exchange website: (Remitano.com) and for each page on the site the code is the same. How could this be possible?
The site is most likely a single page application (SPA). This means that it dynamically adds and removes elements with JavaScript. This is why sites made with React, Vue, and Angular don't work without JavaScript enabled.
For example, if you look at the code of a Vue app, you'll see something like <noscript><strong>We're sorry but myvueapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>. The content inside noscript only displays if the user has JS disabled in their browser.
I assume that <app-root> is from angular development.
However, I was under the impression that frameworks solve into html/js/css as they compile.
When I open a angular page, in the source code and go to the <body>, I can only see the <app-root> tag.
How does my browser read that?
Why can I not read the (html, should it not be?) source code?
Angular is a SPA (Single Page Application) framework. Basicaly, the app-root will be replaced in execution-time with the properly html/css/js when it's required, the whole thing is done internaly by the framework using javascript.
So, if you click to show the source code (CTRL + U on Windows), you will see only the app root. Of course, you can inspect the page with your browser console to see the "magic" going on.
You can understand better and more deep on the official documentation.
I have AngularJS application. Let's say, index.html has ng-view or ng-include, and inside that I have ng-if or some custom directive. When I look at Chrome F12, I don't even see the included files. If everything goes fine, I can seem some important stuff in ng-inspector (now that batarang is dead).
But what if I need to debug. Maybe I have a complex expression in ng-if, or even if I simple want to get into a complex binding (order.orderline[2].itemname or similar). But how can I put breakpoints in what is essentially HTML, especially if it's dynamically loaded?
I've got a problem getting the "real" source code from a website:
http://sirius.searates.com/explorer
Trying it the normal way (view-source:) via Chrome I get a different result than trying it by using inspect elements function. And the code which I can see (using that function) is the one that I would like to have... How is that possible to get this code?
This usually happens because the UI is actually generated by a client-side Javascript utility.
In this case, most of the screen is generated by HighCharts, and a few elements are generated/modified by Bootstrap.
The DOM inspector will always give you the "current" view of the HTML, while the view source gives you the "initial" view. Since view source does not run the Javascript utilities, much of the UI is never generated.
To get the most up-to-date (HTML) source, you can use the DOM inspector to find the root html node, right-click and select "Edit as HTML". Then select-all and copy/paste into your favorite text editor.
Note, though, that this will only give you a snapshot of the page. Most modern web pages are really browser applications and the HTML is just one part of the whole. Copy/pasting the HTML will not give you a fully functional page.
You can get real-time html with this url,bookmark this url:
javascript:document.write('<textarea width="400">'+document.body.innerHTML+'</textarea>');