How is the page in the Angular2 is rendered? Does it render all the DOM elements that might be used at the page, for example pop-up, dialog? Or does it render after the element is being invoked?
For angular 2 when you spin up a server it loads all the html templates lazily. The index.html page is the entry point and by default the app-root directive is loaded first. If you have say another component featureA and featureB that are triggered by clicking a button or some other UI element those aren't loaded until you actually click on it.
Related
On my working project, the frontend is not entirely an SPA, as well not defining all the components in the template engine, but image loading is inconsistent between the document and vue. I am having trouble coming up with an appropriate solution with loading the document images when the vue components are loading and displaying.
We need to display everything at once when vue displays components.
One solution I can think of is to apply the source links in data-src in all the img elements. When vue is ready to display the components, the value from data-src would be applied to the src attribute and the browser starts to download the image files.
But there are other issues with CSS loading images as well and I'm not sure how I would control the loading there. I'm assuming I would have to define outside of CSS and use JS for this?
2 other solutions I can think of is to just hide the page until vue has completed rendering, but this would increase the time to see the page. Or use placeholder media in place of loading photos.
I am using ui-router of angularjs in my SPA. When i add an style to my view pages, angularjs loads them when switching to than view. Thats actually pretty cool that it can be done in runtime.
The problem is i do not want it to do so. for example i want to use bootstrap css in my view. it is already inserted in the main page, so it is not needed to get loaded again form child view. but for my IDE to auto-complete class names, it is needed to be added to html page of subview.
Is there any way to ask Angularjs to ignore Head part and just load Body part of my html?
I am rendering a HTML page in flex using the htmlloader component. The html content has an anchor tag clicking on which should launch the webpage in the browser.
This anchor tag doesn't work.Do we have to use an intermediate communication of JS to AS(actionScript) to make this work?
This is the code I am using to render the html in flex
html.location = "https://my_url?path=get_notifications";
Html snippet
Go to web
The issue comes from the HTMLLoader's handling of target="_blank". If you want the HTMLLoader to handle _blank you will need to create a custom htmlHost for the HTMLLoader (HTMLLoader.htmlHost). This custom htmlHost will need to override the createWindow function and that will handle the _blank case. More information about this is available from the following links:
Adobe - Defining browser-like user interfaces for HTML content
Forrst - enable link with target='_blank' in Adobe AIR HTMLLoader component
Sonke Rohde - AIR HTML with “_blank” Links Part II – Using HTMLHost
I have 3 pages:
By clicking the "filter" button on page1, it takes you to page2. Clicking the "grey buttons" on page2 takes you to page3. Clicking the "red buttons" on page2 take you back to page1.
But during all these transitions, the pages lose their styles.
I tried adding this code on page1, but it didn't seem to work very well:
$(document).bind('pagechange', function() {
$('.ui-page-active .ui-listview').listview('refresh');
$('.ui-page-active :jqmData(role=content)').trigger('create');
});
It seems that When the user clicks a link in a jQuery Mobile-driven site, the default behavior of the navigation system is to use that link's href to formulate an Ajax request (instead of allowing the browser's default link behavior of requesting that href with full page load).
This means that any scripts and styles referenced the head of a page won't have any effect when a page is loaded via Ajax, but they will execute if the page is requested normally via HTTP.
So I tried to consolidate the styles, as well referenced the same set of stylesheets and scripts in the head of every page. This fixed the issue.
http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
If you r using windows 8 navigation, when you navigate to one page to another, the new page css is loaded, if any css selector have the same name, the new css will be valid. When you back you can lose this styles.
Try to use css namespaces for each page and subpage:
https://www.google.com.br/search?q=css+namespace
I m not sure what logic you have are using to navigate to page2 or page3
you can try changePage function to navigate to different page..
$.mobile.changePage("page2.html", { allowSamePageTransition: true,
transition: "slide", reloadPage: true });
When you use pageChange an Ajax request will be made to that url and it will be loaded only the content inside the div with data-role="page". So everything you have out of this element will be ignored (JS and CSS).
I begin to develop mobile app using PhoneGap. First I make 2 .html files named index.html and place.html
In index.html I use $.get() method to get json data from web service and then show on HTML tag.
When user click link from index.html page it going to place.html. In place.html I put back button like
Back
for back to index.html page.
A problem is when I click back button to index.html page it run $.get() method when page is loaded.
How to cache index.html page? When I clicking back button, it use same data from the first time.
Thanks!
Have you tried jQuery mobile?
You don't have to actually incorporate the entire library, but only utilize the
<div class="home-page" data-role="page" data-dom-cache="true" >
attributes on the Home page container. Another thing to note is that all your pages need the data-role="page" attribute for jQM to work.
By default, jQM has disabled caching, you can enable it in JavaScript as follows
$.mobile.page.prototype.options.domCache = true;
Reference: jQM Documentation on caching pages