We Keep Coding

Get to know domain and context root url path in AngularJS

My angularJS application is running in a web server with the following path
http://www.some.domain.com/some/path/
Notice that /some/path/ is dynamic path because my app can be deployed to any web server to any directory. I need to get this absolute URL in AngularJS excluding all inner angular pages. For instance, if current user's page is
http://www.some.domain.com/some/path/inner/angular/page.html
then the code that I am looking for should return
http://www.some.domain.com/some/path/

You cannot use $location because it only has information about the current SPA.
The code that you are looking for ("/some/path/") is this:
var myContextWithPath = $window.location.pathname.substring(0, window.location.pathname.lastIndexOf("/"));
Other variation that returns only the context ("/some") is this:
var myContext = $window.location.pathname.substring(0, window.location.pathname.indexOf("/",2));
You can also obtain the origin ("http://www.some.domain.com"):
var origin = $window.location.origin;

You can use $location for this. Don't forget the add $location in to controller function
$location.host()
gives you base url.Which is application base server domain, like : www.example.com
$location.port()
gives you port like : 8080
$location.path()
gives you where you are : index.html

Angularjs image not showed : unsafe:background-image

I want to show an image in my Angularjs application here is the code :
<img src="background-image: url({{image.url}})" />
Where image.url is a scope variable with the value http://localhost/assets/photo/41/photo.jpg hosted on an apache server on localhost.
The GET request fail with the error :
unsafe:background-image: url(http://localhost/assets/photo/41/photo.jpg):1
GET unsafe:background-image: url(http://localhost/assets/photo/41/photo.jpg)
net::ERR_UNKNOWN_URL_SCHEME
Thanks in advance,

You are using img tag incorrectly
<img ng-src="{{image.url}" />
& your image url coming from server would be /assets/photo/41/photo.jpg instead of http://localhost/assets/photo/41/photo.jpg, Actual domain is not required when you are working on same domain.
Just not clarified what you want to do..It also seems like you may want to use background-image in that case ng-style would be helpful
<div ng-style="{'background-image': 'url('+ image.url+')' }"></div>
Update
As URL is of other domain & you wanted to show it in do that url as trustedResourceURL using $sce service
$scope.getTrustedResourceUrl = function(url){
return $sce.getTrustedResourceUrl(url)
};
HTML
And get other domain URL to get working it without prepending unsafe: before url then you need to sanitize imgSrc in config & whitelist url regx in it.
app.config(function($compileProvider) {
var imgSrcSanitizationWhitelist = /^\s*(https?|ftp|file):|data:image\//;
$compileProvider.imgSrcSanitizationWhitelist(imgSrcSanitizationWhitelist);
});

Download a website's favicon.ico through Javascript

I've tried Ajax:
$.ajax({
type : "GET",
url : "http://getfavicon.appspot.com/http://www.google.com",
success : function(result) {
// use the .ico result somewhere
}
});
which gives me the error:
XMLHttpRequest cannot load http://getfavicon.appspot.com/http://www.google.com. No
'Access-Control-Allow-Origin' header is present on the requested resource. Origin
'http://localhost' is therefore not allowed access.
So I tried to allow CORS on my Apache server, but found out the site I download from needs to have CORS allowed too. And if I understand this right I can't download anything from an external domain through javascript, images, text, whatnot?
I tried to go around this by calling a php script on my webserver through ajax instead:
var domain = "www.google.com";
$.ajax({
type : "POST",
url : "php/fetchIcon.php",
data : {
'domainName' : domain
},
success : function(result) {
// use the .ico result somewhere
}
});
fetchIcon.php:
$domainName = false;
if(isset($_POST['domainName'])){
$domainName = $_POST['domainName'];
}
echo file_get_contents("http://getfavicon.appspot.com/http://".$domainName, true);
In the Ajax success result I get back the image's binary code, but it seems broken in some way.
If I want to display the .ico file, can I do something like:
"document.getElementById("img").src = result;" ? In my project I want to use "THREE.ImageUtils.loadTexture(result);". But that's a bit too much for this question.
Do I need to use Base64 encoding/decoding and how?
Is there an easier way or hack to do it just in Javascript without PHP?
Thanks in advance.

Well i think you are making it more complex it simple i tried the below code and it worked for me
<img id='favicon' src='http://getfavicon.appspot.com/http://www.google.com'/>
so why are you using ajax request even if you want to change the soruce of the image you can do it easily with javascript
document.getElementById('favicon').src="address"; //address can contain new source

This worked for me, answered by Rocket Hazmat:
fetchIcon.php:
$domainName = false;
if(isset($_GET['domainName'])){
$domainName = $_GET['domainName'];
}
echo file_get_contents("http://getfavicon.appspot.com/http://".$domainName, true);
Simplest way to display that it worked without CORS restrictions:
<img src="fetchIcon.php?domainName=www.google.com" />
Otherwise this would have been sufficient:
<img src="http://getfavicon.appspot.com/http://www.google.com"/>
or the way I wanted to load a new texture uniform in THREE.js, in javascript, which I kept outside the question, but maybe someone run into the same problem as me:
iconUniform.map.value = THREE.ImageUtils.loadTexture("fetchIcon.php?domainName=www.google.com");

I'm not sure if you mean download as in download to a file, but this would do it in PHP. You could call this AJAX style if you need it to return the path to your JS function...
$url = 'http://getfavicon.appspot.com/http://www.google.com';
$img = 'icons/favicon.ico';
file_put_contents($img, file_get_contents($url));

Send and receive data to and from another domain

I'm trying to write a plugin. I can not use any libraries or frameworks.
At any website (domain) I would like to start a script from my own domain.
For example:
In the code of the website under domain A I put a code starting the script from domain B
<script src="http://domain-b.com/myscript.js" type="text/javascript"></script>
The code of JavaScript (myscript.js)
type = 'GET';
url = 'http://domain-b.com/echojson.php';
data = ‘var1=1&var2=2’;
_http = new XMLHttpRequest();
_http.open(type, url + '?callback=jsonp123' + '&' + data, true);
_http.onreadystatechange = function() {
alert(‘Get data: ’ + _http.responseText);
}
_http.send(null);
Script from http://domain-b.com/echojson.php always gives the answer:
jsonp123({answer:”answer string”});
But in a JavaScript console I see an error (200) and AJAX doesn’t get anything.

Script loaders like LAB, yep/nope or Frame.js were designed to get around the same-origin policy. They load a script file, so the requested file would have to look like:
response = {answer:”answer string”};

If you use your code like you have posted it here, it does not work, because you are using apostrophs for the data variable!

google tts with paid account

You now have to pay to use the google translate api. I'm happy to pay for the service but I can't find a way to use the tts. This is what I'm doing
var GoogleTranslate = function(){
var key = "myapikey"
this.speak = function(words) {
var url = "http://translate.google.com/translate_tts?tl=es&q=" + escape(words) + "&key=" + key
new Audio(url).play();
}
}
but when I do new GoogleTranslate().speak("hola")
The requests to http://translate.google.com/translate_tts never return a response. How do I get this working?

I haven't tried your code yet, so I'm not sure if you should be waiting for the sound to load before you can play it (most likely), but I've written an article about this service recently. The part that matters here is the following:
...if your browser forwards a Referer header with any value other than an empty string (meaning it tells the service which page you clicked the link on) then [Google] will return a 404 (Not Found) http error...
Read the entire article here: Embedding text-to-speech into HTML5 games
So in fact, the service is still there, you just need to hide your referer header. One way to do that is through creating a small gateway script. There's the source for one right in the article.