Develop Reference

Angular adding "unsafe" to url when trying to download an file [duplicate]

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.

Including <script>s in my Angular views [duplicate]

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.

Change URL without reloading [duplicate]

This question already has answers here:
Changing the URL without reloading the page
(7 answers)
Closed 8 years ago.
i see sometimes on some sites like facebook or the Play Store from google, that by clicking a link the url changes (NOT with #blah), but the wohle site doesn't reload. I can use back/forward, so it could't be javascript, i think.
Can anybody say me how to implement that on a site? thanks

It uses pushState, and it is done using javascript and HTML5 with pushState compatible browsers. Here is some documentation: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
A quote from those docs:
Suppose http://mozilla.org/foo.html executes the following JavaScript:
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
This will cause the URL bar to display
http://mozilla.org/bar.html, but won't cause the browser to load
bar.html or even check that bar.html exists.
The url can be changed in this way, and the new page is rendered using javascript. I do this by using Backbone.js, but there are other tools to do the same thing. It is mostly the same technique as those URLs with # in them, except they get rid of the hash. Backbone.js will use a # by default, but can be configured to make the URL to appear normal.
Here is a SO question about how to do this using Backbone

Another way this can be achieved is with AngularJS. As was said in the above comments, this will use AJAX to get new data to display, and then use javascript to change the content of the page, all without loading a new URL.

For browsers whose not support htmll5 like ie8, you can use the library https://github.com/browserstate/history.js/ which emulate the html5 pushstate method.

low cost page transitions [duplicate]

This question already has answers here:
How to show Ajax requests in URL?
(7 answers)
Closed 9 years ago.
I'm relatively new to web development so this probably is a odd question. I want part of my site to load a new page. But significant part doen't need to change. What I do now is that I load content into a div.
$('#rightdiv').load("about.html");
The downside to this is that the address doesn't change, I believe there is a good solution but I don't know how. I have tried googleing it but I can't find anything good on it. So I would love to see both a solution and how the sollution is called (hope you know what I mean).
Thank you for your time and effort.

Browsers supporting HTML5's pushState will let you change the path:
$('#rightdiv').load("about.html", function pushState(){
if(history && history.pushState){
history.pushState('','','about.html');
}
});

The standard way is to use location.hash. So for example if you were on mysite.com/, and loaded the about.html page, you could set the hash to #about. This would not cause the page to reload, but would alter the URL (to provide for bookmark/back button support).
As an example, using the success callback to load():
$('#rightdiv').load('about.html', function() {
location.hash = 'about';
});
HTML5 adds a new API called pushState. This allows for more complete modification of the URL without causing a page reload. Read more about that here.

This can easily be achieved by taking advantage of HTML5 and its features. Myspace does something similar to what you are asking. The HTML5 History API to change the browser URL without refreshing the page. Combining this with JQuery $.ajax can produce the effects shown in myspace, github and facebook. "arundavid" has a great explanation on this link at tinywall.info

That's the right way to load data into a div using AJAX. I personally prefer to use the jQuery.ajax() function though.

Keep track of site history? [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to keep the browser history in sync when using Ajax?
I think this is a rather easy fix but I can't find an answer anywhere else...so here goes...I made this kind of template for my homepage...I know the code's not insanely elegant but my main problem is that what if I want to send someone to a specific part of my page...rather than just my "home"...take a look http://useless-r-us.t15.org/
I mean how can I reference each of "blag", "projects", and "about me" using some unique url but still have my pretty css3 transitions...I'm thinking something like this...
http://radokirov.com
P.S....I know blag is a typo --> http://xkcd.com/148/

You should use url hashes (the part of the url following the # sign).
Then, in javascript, in the ready (jquery) event handler, based on the url's hash, you should do the appropriate ajax request and populate the page with the appropriate content.
For more details: Modify Address Bar URL in AJAX App to Match Current State