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.
Related
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 am creating NODE.js app that use Nunjucks as view engine. I added tests to verify if the html created is valid (for now I just wanted to check if all tags are properly closed). In order to do this i spin up application, go to the site using headless chrome, making a snapshot and running validation code on output files.
The problem is that browsers try to fix HTML code automatically. They close tags by themself in order to create more or less valid HTML. Is there a way to disable this feature?
I would like to be sure that i created valid HTML document using nunjucks rather then counting that browser will fix it itself.
If you validate the source directly, Chrome will not change the HTML. Try this in your browser: view-source:https://stackoverflow.com/questions/65091531/disable-html-autofix-in-chrome
If you use the developer panel to inspect the DOM, Chrome tries to correct poor html. 😊
You could maybe just do a GET request to the application, and validate the result, instead of using Chrome.
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'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>');
I am trying to include a file (that's in html) inside of my HTML code. When i test it by opening it in my browser i can view the text fine, however when I upload it it does not appear. In chrome nothing appears and in IE it says that this content cannot be displayed.
<p><object src="resume-kylerschnaible.html"><embed src="resume-kylerschnaible.html" height="1300px"></embed></object></p>
http://jsfiddle.net/rd7yqo6m/
HTML isn't really the tool of choice for including files, there are countless security settings that are dependent upon browser and server configuration so these kind of include methods are generally seen as unreliable. I would suggest moving to php or asp.net if you need this kind of functionality. Failing that you might find that the iframe method is slightly more flexible.
<iframe src="resume-kylerschnaible.html"></iframe>