I am learning AngularJS by decomposing code samples and putting them together in different ways. What specific changes need to be made to the code in this plnkr so that code from an external script can be called from the index.html view?
The code is from this tutorial, and the change that I want to make is simply moving the JavaScript code to an external JavaScript file that is called from inside the view.
First I changed the scripts tags to be like in the example you linked to.
Second, I added ng-app="helloApp" attribute to the html tag, so the helloApp angular module you defined will run on the html element (instead of not running at all).
Third, and lastly, I changed Calvin Hobbes on line 42 to be {{name}}, so it will be binded to the $scope.name var in your controller, instead of being a regular static text.
Here is a working example.
Related
I am creating a simple app in AngularJS and I am trying to build form steps wizard but JS is not getting applied.
I have copy pasted all the code from w3schools editor to the component.html file
getting the following output
output
The fastest way you can reuse this code is to take advantage of HTML <iframe>. Assuming that you saved all code from w3c site to file my_downloaded_code.html your iframe will look like
<iframe src = "path/to/file/my_downloaded_file.html" width="350px" height="600px" frameborder="0" scrolling="no"></iframe>
Attributes width, height etc. are not mandatory of course, but I have chosen them for exactly that case.
What's more the form is sent to action_page.php after confirmation, so You have to create such a file in appropriate localization (the same as the localization of my_downloaded_code.html).
However, if you like to make a AngularJS component containing that code it won't be very easy because as #Tomas commented
Code on the site w3school not written in Angularjs, but in pure JS...
but it is possible of course :) .
What have to be done?
Functions have to be moved to component controller.
Functions and variables in controller have to be visible in template, thus we must assign them to $scope.
on-click has to be changed to ng-click
Content of <style> tag has to be moved to .css file
You must create your action_page.php
I have made plunker with such working component for You.
In an ASP.NET Core app, I've a dashboard with widgets. Every widget has its own PartialViews, so the full page is generated in the following way:
-Layout.cshtml
--Dashboard.cshtml
--- Widget1.cshtml
--- Widget2.cshtml
Following best practices according to fast page load times, JavaScript is loaded before the closing </body> tag in Layout.cshtml. After that, there is a section for custom JS, which I commonly use to initiate objects on page load. So this section looks like this:
<script asp-append-version="true" type="text/javascript" src="~/clientscript/page.min.js"></script>
#RenderSection("Js", required: false)
In my Views, which are using the Layout.cshtml as layout (in this example, its Dashboard.cshtml), I can define a section like
#section Js {
// Js Code here
}
which is rendered after the script tag containing all script files. So I can be sure, that all dependencies like jQuery or custom classes are avaliable here.
But I also need to do this in widgets like Widget1.cshtml for example. The problem is: I load the PartialView Widget1.cshtml in Dashboard.cshtml. In the documentation is written, that this is not possible:
If you declare a Razor section in a partial view, it will not be visible to its parent(s); it will be limited to the partial view.
But that's exactly what I need. Is there a way to work around this limitation? Shortly, the goal is to inject JavaScript from a PartialView to the LayoutView, with an regular View between them.
The only way I know is the usage of setInterval() with a low interval like 50ms, and check there if jQuery or some of my custom class is defined in a loop until they are. Its a JS solution yes. But it makes it possible to include the script-block directly in the PartialView without making usage of sections. It fits well when you depend on a single variable like jQuery.
But I need to wait for custom classes to get loaded. They're included after jQuery. So writing a generic function like waitForTypeLoaded(type, callback) is not possible. It would cause me to write always the raw setInterval() code, which seems not a smart solution for me.
Something I did to get my scripts to run after Jquery was done loading was in my Partial Views and View Components I used the "DOMContentLoaded" event to load all my jQuery js script after the page was done loading. That way I could defer the Load of jQuery and Still Have jQuery code on my pages.
<script>
window.addEventListener('DOMContentLoaded',
function() {
$('body')....
});
</script>
Your problem can be solved as mentioned in my answer to this post:
How to render scripts, generated in TagHelper process method, to the bottom of the page rather than next to the tag element?
To sum up, you can create a pair of tag helpers, one that can be located in a partial view and just stores its content in a temporary dictionary, and the other that renders the content at the appropriate position (e.g. in the layout page). I use it extensively to render small dynamically created scripts as the final scripts of the body.
Hope it helps.
Honestly, I would make one step back and look at architecture once again if you have such dilemmas.
Why not add to required scripts which will be used on a couple of views/partial views to the main layout? In ASP.NET MVC you can use bundling mechanism (or you can write our own) - minify and bundle them with other required. It won't be heavy...
Your approach looks like unnecessary complicated.
I have been trying to save and load a page with two angular2 components from local storage with the next code but the css from components is never applied.
This is my code to save:
localStorage.setItem('body', JSON.stringify(document.getElementById("body").innerHTML));
This is my code to load:
document.getElementById("body").innerHTML=JSON.parse(localStorage.getItem("body"));
I hope to have explained my problem well
Sorry, you cannot do that. Angular likes to take over a lot of the DOM, so you cannot just replace the entire body of the DOM. However, if instead of doing the entire "body", you did a subset, then you could do this:
<div [innerHTML]="htmlVar">
</div>
Where htmlVar is a variable you loaded with something like:
this.htmlVar = JSON.parse(localStorage.getItem("htmlVar"))
Watch out, by default innerHTML will strip out lots of "unsafe" html. You can reenable most of them by calling DomSanitizer. Please note that you cannot use any Angular features in the html, like links with routerLink.
I am new to angularjs,so I am assuming there is something simple which I am missing about this. I am facing an issue where my back-end sends some html which includes a script tag which has some js example is as under.
<!--some html-->
<script>
//some js code
caption_class_fn = function(){
$('.jwcaptions').addClass('%s')//%s as its added from backend
}
caption_class_fn()
</script>
This html is then filled into $scope.htmlval which is bound with an html element like this ng-bind-html="htmlval". The issue I am facing is that I want to execute a js function which is present in side the script tags. I tried alert, console.log but nothing seems to work. Although once the page is loaded if I try the same fucntion from console it works.Any idea how can i achieve this with minimum code change. I also tried to this solution here but this also isn't working for me.
I have some div:
<div id='dialog'></div>
Now I want to load into this div an external html file and use its js functions.
I know I can load it using jQuery.Load() and it works fine, the problem is that I want to use the html js functions.
The main problem is that I have several divs which I load this html file into them and I want that when I'm activating js function it will only work on the specific div.
Pass parameter to view that you are loading that will indicate container of the loaded view:
jQuery.Load(url, { containerId: 'dialog' })
I remember I had the problem back when jQuery1.4 was issued. In that version, .load() suddendly began stripping out the js when a target container was specified.
What I did at that time :
separate html and js in different files (let's say myhtml.html and myjs.js ), or views
have my js file act as a js module, with a public entry point function (say initContent) taking a jQuery element as a parameter
have an invisible link in myhtml.html, namely
after loading myhtml.html into my target div, search for $('a.dynamicJs') in my target div to extract js url, and entry point function from the href
if the js had not previously been loaded, dynamically load the js into the page trhough an ajax call
dynamically call the entry point function with the target div as parameter
This also worked with css.
It required some time to tweak it on all navigators (limited number of css sections on IE, different way to dynamically call a function), and I ended with much more code I expected in the first place. It also required a lot of refactoring of my html/js modules (but I must confess I ended having a code that was really cleaner)
I'm sure there are frameworks that handle this kind of situation way better by now. But this is what I came up with at that time.
Hope this will help