This question already has answers here:
AngularJS: How to make angular load script inside ng-include?
(9 answers)
Closed 8 years ago.
When I paste any <script> into my angular view, it fails silently and does not load the script.
I'm trying to embed a Saucelabs video into my AngularJS project. (Documentation, example script)
<script src="https://saucelabs.com/video-embed/<jobId>.js?auth=<authToken>"></script>
However, pasting <script>alert('test')</script> into my view doesn't appear to work either, so I'm thinking this is default behaviour of Angular.
Clearly, logic doesn't really belong in the view, so generally I don't need to include any <script>s here, but in this case, I don't really see an alternative.
Any ideas?
Here is a hack I am using for loading scripts in the controller.
Btw, I put in into resolve of the view/state to wait till script loads.
$http.get('http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU').then(function(data){
window.eval(data);
deffered.resolve() // because I'm using it in the resolve part
});
Specify your own URL and thats works.
Another option could be using RequireJS, but I've not used it.
Related
This question already has answers here:
Javascript - inline vs external script - what's the difference?
(4 answers)
Closed 4 years ago.
I have a JS code which I want to include in my HTML project and I need to clear a doubt. To implement my JS code, I can do it in two ways:
Use <script> tag;
Load it through an external JS file as a function and execute the function from within <script> tags.
What I'm really curious about is whether there is any difference in terms of performance in both the above-stated methods. I do know that <script> tags are first converted in a block as a whole which causes a slight loading lag at the JS execution point, and this has me curious.
Well, in second case when you add code in separate file, browser will have to send an extra http request to load that file and if internet is slow and browser has not cached that file, that would not be so good.
And if you do all that code under your script tag, browser won't do that and your page would load a bit fast comparatively.
Else is same in both cases
Other than performance, if you write your code under script tag obviously it would be difficult to manage and you wont be able to use it in other files where you may need it.
This question already has answers here:
angularjs 1.6.0 (latest now) routes not working
(5 answers)
Closed 6 years ago.
Recently I have noticed that when using ngRoute module in an AngularJS app, the route contains #! in the URL, which was earlier just the #.
For example, www.webiste.com/#/login becomes www.website.com/#!/login
I have to enable the html5Mode and also disable the requireBase which removes the base as a whole using the code,
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
and the URL changes to www.website.com/login which works fine but is misleading and is not what Angular SPA URLs look like.
If I do not enable the html5Mode, the URL is encoded and I cannot get around it. So www.website.com/#/login becomes www.website.com/#!/#%2Flogin (Notice the later / is encoded as %2F).
Is this a change implemented by the developers for some specific purpose? What difference does it make? What changes do I need to make to my app to keep it working? Am I doing something wrong?
Github issue: https://github.com/angular/angular.js/issues/15547
It's called the hash bang.
For a while Twitter was using the same thing. It allows for AJAX calls and let search engines know your path without using a "real" path. It's considered obsolete though.
https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
There is another stackoverflow answer about that:
Doing links like Twitter, Hash-Bang #! URL's
Update:
One of the reasons for not having a need for the hash bang anymore is that we can push the history state without a page reload. Something so called "one page" websites, like React, do.
This question already has answers here:
execute a function after redirecting - javascript
(3 answers)
Closed 7 years ago.
So, on my website, a user types in a subject they want the gist of, then after searching, it redirects them to a Wikipedia API displaying the general idea of the subject. However, there's a bunch of information about the API that gets in the way on the webpage, so I need to use JavaScript to get rid of that excess stuff.
Unfortunately, after changing webpages, it seems I can't run any more code from my website.
Any solution to this?
You could use an iframe, like so:
<iframe id="wikipedia-stuff">
</iframe>
And populate it like so:
<script>
document.getElementById("wikipedia-stuff").src = "http://wikipedia.stuff";
</script>
The wikipedia stuff would be in the iframe, and your code would still be running.
This question already has answers here:
unsafe link in angular
(5 answers)
Closed 7 years ago.
I have a small AngularJS app where I am trying to open an uploaded image and am running into the issue where angular adds "unsafe:" at the beginning of the URL. I have added the following line in my app config to sanitize the URL, but it is not working for me:
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob:chrome-extension):|data:image|\//);
I am using Angular v1.3.0 so I am using the correct property name. I am using Chrome mostly, but I have the same issue in other browsers. Also, the beginning of my image looks like this:
unsafe:data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg...
Any idea what am I missing in my regex?
Thanks in advance!
If you $compileProvider.imgSrcSanitizationWhitelist() without the regexp parameter it returns the currently defined regexp .
Running this code on an empty angular 1.3.0:
app.config(function ($compileProvider) {
console.log($compileProvider.imgSrcSanitizationWhitelist()); //
});
I got this result - /^\s*((https?|ftp|file|blob):|data:image\/)/
And the base64 encoded JPEG using the basic <img ng-src="{{main.src}}"> actually works as you can see here, and another one with a png. Also look at the console to see the regexp.
Another test I've run is to move the data:image/jpeg;base64, out of the scope binded string and put it the ng-src:
<img ng-src="data:image/jpeg;base64,{{main.src}}">
As you can see it worked as well.
To make a long story short - you don't need to define a regexp in 1.3.0 and above for data:image/*, as it's defined by default.
I can't be sure what's the problem, but maybe you've got another definition of
imgSrcSanitizationWhitelist somewhere in your code or the data uri is broken somehow.
This question already has answers here:
Is it possible to stop requireJS from adding the .js file extension automatically?
(3 answers)
Closed 9 years ago.
I'm developing an app that uses a certain site to make payments easier, and the way it handles payments requires to import some javascript from this url https://bridge.paymill.com/ that contains the script.
The fact is, I'm using require js to load all the scripts, in my main.js configuration, I'm trying to make it this way:
requirejs.config({
...
'paymill': 'https://bridge.paymill.com/',
...
});
But this, of course, tries to fetch from https://bridge.paymill.com/.js, which is not the correct url (it's without the last .js)
How could I notify requirejs to load this without appending '.js' at the end?
Put a question mark at the end of the URL
requirejs.config({
...
'paymill': 'https://bridge.paymill.com/?',
...
});
How this works:
https://bridge.paymill.com/?.js is a valid URL with .js as a GET request.