I am working on a project where we are starting to add in angularjs. I have a page where I am injecting some html into the page from an $http request. When I get the data back I compile it and insert it into the document. This all works. The problem I have is it is a large amount of html that has to be inserted into the site. If I save the html in a variable or cache (cacheFactory) I can then just recompile it and add it again. This works but the problem is when it $compiles it it makes the page non-responsive for a second or 2.
What I want to know is if I can cache the $compile html and just reuse that? What I have been trying so far does not work.
promise.then(function(data)) {
cacheService.put("testData", $compile(data)($scope));
addTestData();
}};
function addTestData() {
$("#placeHolder").empty().html(cacheService.get("testData"));
}
Related
I'm developing a web application using Angular 6.
I have a little problem: with this simple code inside in one of my services:
method() {
document.body.insertAdjacentHTML('beforeend', '<h1>Hello</h1>');
}
I can dynamically display html code every time I run.
This happens, however, only because <h1> is a native HTML tag.
How can I do the same thing with an Angular component associated with an HTMML template? For example, <myComponent></myComponent>,
it does not work this way ...
method() {
document.body.insertAdjacentHTML('beforeend','<myComponent>/myComponent>');
}
Can you help me with a solution that uses a few lines of code?
I have to use this method in a service. Thanks.
I am new in Angular
What I am going to try is to get the HTML of a page and reproduce it into an iFrame (it is an exercise).
I am using the following piece of code:
var prova = this._http.get(myUrl, {responseType: "text"}).subscribe((x) =>{
console.log(x);
});
I did it on a website (if is needed I can also insert the name of the pages) and it returns the html only of some pages.
In the other case the string x is empty.
Could it depend on connection?
Or there is some way to wait the end of the get request?
Or simply is wrong my approach and I should make a different type of request?
Your most likely going to need to use a library like puppeteer if you want to render a page properly. Puppeteer is a node library and useless headless chrome so I am not sure how well you could really integrate with Angular.
https://github.com/GoogleChrome/puppeteer
I'm writing an app in Swift 3.0 and I'm trying to scrape data from the search results of a webpage. I perform the search by including the search query as a parameter in the url, but the html that's getting returned to me has no results. I believe this is because the ajax on the webpage has not finished and populated the html with the search results by the time the html is returned to my app.
Question
How do I wait for the search results to load before getting the html?
EDIT:
URL: https://uscdirectory.usc.edu/web/directory/faculty-staff/#basic=a
This url performs a search on the USC directory for the character 'a'. The html in my browser on my MacBook includes these tags:
<tbody>(Search results are here)</tbody>
but in my app the html that is returned to me has nothing:
<tbody></tbody>
This is because the webpage initially has no search results, and then some time later the ajax finishes and the table body is populated. How do I use a URLSessionDataTask object in Swift to wait until the ajax finishes and ONLY THEN give me the html, such that I actually get the search results?
The workaround solution that I devised is unpleasant but functional. I created a WKWebView off screen and loaded the webpage I was interested in. I used a Timer to wait some arbitrary number of seconds for the javascript on the page to finish and then I retrieved the html from the webview
You can use property ajaxComplete() to fix this.
Ex:
$(document).ajaxComplete(function(){
//your code to render HTML
});
It will render your HTML only when ajax request is complete.
So I have a curious situation and I don't think it's going to work, but I figured I'd ask in case it is and someone knows how to. I am using a 3rd party website to create marketing funnels. You can add your own custom html and javascript, but it parses out the html in a rather unfavorable manor. Basically you specify an element on the page and it appends it as a data attribute and dynamically loads it into the DOM. Since this is happening this way, my app isn't being initialized because it's not in the DOM on page load. Is there a way to make this work? I'll explain a little deeper my configuration.
I add custom html such as:
<div data-ng-app="AppName"><div data-ng-controller="ControllerName"><div>perform controller logic here</div></div>
As you can see, this needs to be in the DOM for the app to initialize and, well work. Is there a way to initialize the app after the page has loaded dynamically? I can add my own JS files in the custom html field, but thats about as far as I can go for customization. Any help is appreciated!
Maybe you should execute angular's bootstrap function manually in your script after the required dom loaded.
var app = angular.module('appName', []);
app.controller([...]);
angular.bootstrap(document.getElementById('divId'), ['appName']);
For more information, you can see this doc https://docs.angularjs.org/api/ng/function/angular.bootstrap
I'm trying to render a .html webpage using #Renderpage() method in Webmatrix but the .html extension is not supported by the method. I guess the method only supports cshtml extensions. Is there a way I can render html pages dynamically on my site (Webmatrix). I dont want to use an iframe because I'll definitely have issues with my jquery files.
I attempted something i feel is safe yet feels unsafe. I resolved to read the html file and inject it to the DOM manually using:
Array html = null;
var mypage = Server.MapPath(page);
if(File.Exists(mypage)){
html = File.ReadAllLines(mypage);
}
After reading the file.....i injected it to the DOM
<div class="s_content s fontfix left s_content2 downdown">
#foreach (var data in html) {
<text>#Html.Raw(data)</text>
}
</div>
All this runs on compilation time before the page is created for rendering.....I attempted some security measures by attempting to inject server-side C# code in the HTML file but was useless. Makes me feel safe atleast. Is this risky? What is the possible threat to this alternative. i wish i can still have an alternative proper solution from the house. Thanks though.
Assuming #Renderpage() doesn't support HTML files, why don't you try Jquery.load or Ajax. There are lots of tutorials based on dynamic loading of html content.
I do something similar but I don't use #Renderpage or an html file. Instead I am using the "onclick" event and a javascript function which opens a cshtml file. You just put this and the java script function in your main cshtml file in the hmtl section. It will open a file in the current directory called my_window.cshtml when clicked
<a onclick=openWin("my_window",700,850);>Open when clicked</a>
<script type="text/javascript">
function openWin(url, width, height)
{
myWindow=window.open(url,'_blank','width='+width+',height='+height);
myWindow.focus();
}
Hope this helps!