AngularJS Get fails to retrieve image url with "302 found" - javascript

I'm trying to add an image to my AngularJS app with a url received from a random cat image site.
this is my controller.js:
'use strict';
/* Controllers */
var catPath = "http://thecatapi.com/api/images/get?format=src&results_per_page=1";
var Controllers = angular.module('museum1.controllers', []);
Controllers.controller('oneCatController', ['$scope', '$http',
function($scope, $http) {
$http.get(catPath).success(function(data) {
$scope.imgurl = data;
console.log($scope.imgurl);
});
}]);
and this is the partial that should show the image:
<div>
<img ng-src="{{imgurl}}">
</div>
the controller is called by the app.js, not shown here.
Using fireBug I get a message with the path i requested and "302 Found 770ms".
The same path works from the browser address line, and the angular code worked for me using this example.

A few things..
Usually I don't use double curly brackets for ng properties. You may consider removing them.
The case sensitivity of your controllers variable is different than that of the variable you access in ng-src. This may cause the ng-src value to not show up.
In the controller:
$scope.imgurl = data;
In the HTML:
<img ng-src="{{imageUrl}}">
Change your HTML to:
<img ng-src="{{imageurl}}">
Essentially, putting the 'U' into lowercase.
And finally, I'm not sure how the ng-src works off the top of my head. But, if it uses JavaScript to load the image--and your domain is not the same domain as the image you are loading, then you may be running into cross domain security issues. But, if ng-src does not use JavaScript to load the image somehow, then you should be fine.

Related

How to use href correcly with Angular routing?

Here, how I have configured the routing
var config = function (rp) {
rp.when(
'/docs',
{
templateUrl: 'Docs.htm'
}
);
};
config.$inject = ['$routeProvider'];
app.config(config);
then I added
Docs
to my htm page.
when the link is clicked, URL is changed to
my_pagename.htm#!#docs
and it does not load the template.
but when I manually type the URL in location as
my_pagename.htm#!/docs (replaced hash symbol with '/')
it loads fine.
Can you please tell me the error here?
what is the proper way of specifying the href attribute, in order to work with angular routing?
My angular version is 1.6.3
Why did you add # with href
try this
Docs
I don't know the consequences, but I changed the hrefs to
#!/<link>
Ex: #!/docs
#!/contacts
and now they work fine.
note that I didn't change route paths in js file.

How to load huge amount of Data ( like JSON or a text file) more than 30MB into HTML page (ex : within a div) using AngularJS

My requirement is to load a log file into a HTML File(ex : Div element) which is of more than 30MB it may be up to 100MB or more.
I am using AngularJS, AJAX, Jquery,CSS technologies. when I hit a link path to that data file will be hit and content will return into a object.
I read this object and show that data in a HTML element.
When data increased to more than 30MB for example , page not responding. server side is JAVA technology with REST. At the end of the day i need to search a specific word or phrase in the loaded HTML using search box. My Problem is I am not able to load huge data into HTML. Example code below.
<div ng-app="myApp" ng-controller="myCtrl">
<div style="color:black;font-size:12px;">{{myWelcome}}</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http, $timeout) {
$http.get("http://localhost/assetdownload_0205/json/generated.json")
.then(function(response) {
// var myjson = JSON.parse(data);
$timeout(function(){
$scope.myWelcome = response.data;
console.log("length",response.data);
},2000);
});
});
</script>
You can try clarinet. It looks quite promising for handling streams: https://github.com/dscape/clarinet
Within each chunk opening or closing in your big file you can render something on the webpage streamlike.
This example shows usage without node:
https://github.com/dscape/clarinet/blob/master/samples/simple.html

MEAN stack angular html <img> tag inject not working

im new to angular so im trying something new to get used to it.
I use socket.io to get a list of images [car1...car5] and i want to dynamically inject them to the view.
in my html i have a that looks like this:
<div id="section" ng-bind-html="HTML">
</div>
and in my core.js angular script i have:
var app = angular.module('test', []);
app.factory('socket', function () {
var socket = io.connect('http://localhost:8080');
return socket;
});
app.controller('TodoCtrl', function($scope, socket)
{
socket.emit('images', {}); //send for a list of images
socket.on('returnImages', function(data)
{
for(var i =1;i<=data.list.length;i++)
{
$scope.HTML = '<img style="left:'+(i*50)+'px;" src="/images/'+data.list[i]+'"/>';
}
$scope.$digest();
});
});
but this throws an error:
Error: [$sce:unsafe] http://errors.angularjs.org/1.2.16/$sce/unsafe etc
im following the docs so im not sure whats wrong and i tried including the angular-sanitize but I cant find the cdn link i keep getting a 404
You have to make html trusted
First inject $sce service in your controller
Like this
app.controller('TodoCtrl', function($scope, socket,$sce)
{
}
Then make your html trusted
$scope.HTML = $sce.trustAsHtml('<img style="left:'+(i*50)+'px;" src="/images/'+data.list[i]+'"/>');
You need to add the request domain to white list
check this: unsafe link in angular

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);
});

AngularJS: <a> tag not working on url's created by $sce.trustAsResourceUrl(fileURL); [duplicate]

In AngularJS, in the following scenario, Firefox puts unsafe: in front of urls that are generated in the following fashion. It then display an error-page saying "The address wasn't understood". This is a file request on my local PC.
Link:
<li ng-repeat="fruit in fruits">
{{ fruit.title }}
</li>
Array:
$scope.fruits = [
{ "title" : "Orange",
"link" : "fruits_orange.html" }
];
You are seeing side-effect of this commit:
https://github.com/angular/angular.js/commit/9532234bf1c408af9a6fd2c4743fdb585b920531 that aims at addressing some security hazards.
This commit introduced a non-backward compatible change for urls starting with file:// (it was subsequently relaxed in https://github.com/angular/angular.js/commit/7b236b29aa3a6f6dfe722815e0a2667d9b7f0899
I assume that you are using one of 1.0.5 or 1.1.3 AngularJS versions. If so you can re-enable support for the file:// URLs by configuring $compileProvider like so:
angular.module('myModule', [], function ($compileProvider) {
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);
});
Or in Angular 1.2.8 and above:
angular.module('myModule', [], function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);
});
Add a white list to your controller.
For Angular.js 1.2:
app.config(['$compileProvider', function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|tel):/);
}]);
For Angular 1.1.x and 1.0.x, use urlSanitizationWhitelist.
See reference.
angular.module('somemodule').config(['$compileProvider' , function ($compileProvider)
{
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto):/);
}]);
I'm using angular 1.4.0 and the following format worked:
ng-href="http://{{baseURLHref}}{{baseURLPort}}/routingPathName"
Adding http:// in the beginning of ng-href helped in getting rid of the unsafe appended by ng-Sanitize
If you're on https, then it shouldn't be a problem to hard code everything.
But if you've a system that has to work on both environments, you might want to use a protocol detection from location.protocol
I'm setting the variables in $rootScope (they help with issues with proxy servers that consume css from my site)
angular.module('myApp').run(function ($route, $rootScope, $location) {
$rootScope.baseURLHref = '';
$rootScope.baseURLPort = '';
if($location.host() != 'localhost'){
$rootScope.baseURLHref = $location.host();
$rootScope.baseURLPort = ':' + $location.port();
}
...
<a href="{{applicant.resume}}" download> download resume</a>
var app = angular.module("myApp", []);
app.config(['$compileProvider', function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data|chrome-extension):/);
}]);

Categories