I need to provide a link to download a file, the link must be hidden and accessible by any users, Here is my code , there are no errors whatsoever, but I can't even get the download dialog box to open:
Template
<a ng-href="#" target="page" type="button" class="btn"
ng-click="download()">Download</a>
Script file
$scope.download = function(){
//here i need to know the code,can anybody explain me
}
I had to achieve the functionality. Also had to make sure that it works for all the major supported browsers.
Here's the solution for the same!!!
Happy Coding!!!
Your View/HTML
<a target="_self" class="ui right floated btn btn-warning" href ng-click="downloadInvoice()"> Download </a>
Your Controller
$scope.downloadInvoice = function () {
$http.post(url,requestData, {responseType:'arraybuffer',headers:header
})
.success(function (response) {
var file = new Blob([response], {type: 'application/pdf'});
var isChrome = !!window.chrome && !!window.chrome.webstore;
var isIE = /*#cc_on!#*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
if (isChrome){
var url = window.URL || window.webkitURL;
var downloadLink = angular.element('<a></a>');
downloadLink.attr('href',url.createObjectURL(file));
downloadLink.attr('target','_self');
downloadLink.attr('download', 'invoice.pdf');
downloadLink[0].click();
}
else if(isEdge || isIE){
window.navigator.msSaveOrOpenBlob(file,'invoice.pdf');
}
else {
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
}
})
};
First of all, your can't "hide/not public" a link in a web based technology (HTML/CSS/JavaScript) application. Downloads are handled by the client, so the Download/Link-URL must be public. You can try to "hide" protective params like e.g. IDs in the download URL by using a backend executed programming language like "PHP or node.js, etc.". In that way you can create hash URLs like http://www.myside.com/download/359FTBW!S3T387IHS to hide parameters like the recordId in your URL.
By knowing this, your solution is pretty easy. Just use the HTML attribute download like <a href="http://mydownloadurl" download>link text</a> to force the browser to download the href source. No ng-click is needed here. Unfortunately the download attribute is not supported by Safari browser. This doesn't realy matter while the browser is handling the download itself. Depending on the users system OS configuration the file will be downloaded or directly opened in a programm installed on that system. For example, a PDF file will be opened in a PDF Viewer if some pdf viewer application is available.
I wrote a Plunker which handles ng-href in a AngularJS controller $scope. I hope this is what you need.
Your controller:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.fileHref = 'http://www.analysis.im/uploads/seminar/pdf-sample.pdf';
});
Your view:
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<a ng-href="fileHref" download="yourFilename">Download</a>
</body>
</html>
Related
I have a problem with my tooltip.
I have something like this
<span uib-tooltip="{{displayName()}}"></span>
and in js file
function displayName() {
return '<div>' +
name +
'div' +
'<b>something</b>'
}
So I have escape characters and I don't know how to deal with it. Obviously, I would like to display in my tooltip properly code, without
"div" etc.
How can I deal with it? I know that earlier we can use tooltip-html-unsafe, but it's deprecated now.
Parse the HTML as safe using the $sce service and use uib-tooltip-html as specified in the ui-bootstrap docs.
In HTML:
<span uib-tooltip-html="displayName()"></span>
In controller:
app.controller("AppCtrl", function ($scope, $sce) {
$scope.displayName = function () {
return $sce.parseAsHtml('<div>' + name + '</div><b>something</b>');
}
});
I'm not sure if this is what you want, but
You can have a tooltip with a template, which will parse / compile your HTML for you. You would need to use uib-tooltip-template. Here is a demo:
var app = angular.module('myApp', ["ui.bootstrap"]);
app.controller('myCtrl', function($scope) {
$scope.name = "'Any name'";
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<span uib-tooltip-template="'tooltipTemplate.html'" tooltip-placement="bottom">Tooltip with a template</span>
<!-- separate file -->
<script type="text/ng-template" id="tooltipTemplate.html">
<div>
{{name}}
</div>
<b>something else</b>
</script>
</div>
</body>
</html>
Simply installing ngSanitize and including it in your app will allow you to use uib-tooltip-html (rather than uib-tooltip) without worrying about safety.
https://docs.angularjs.org/api/ngSanitize
After installing, you can include it in your app:
var app = angular.module('myApp', [...,'ngSanitize']);
And of course, make sure you include the plugin in your build files. Personally, this allowed me to replace a lot of old unsafe tooltips very easily during upgrades from previous versions.
I am trying to set up an express app on a windows machine. A back-end file server.js in a directory called "server" responds to an angularjs file app.js in a directory called "public" and the display file index.html also in public displays the results. I have installed node, mongo, mongoose, express and angularjs. The index file is supposed to display a mongodb product I installed but it displays nothing.
the code from the three files
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app = "jetbrains" ng-controller="AppCtrl as app">
<ul>
<li ng-repeat = "product in app.products">
{{ product.name }}
</li>
</ul>
<script src="angular/angular.js"></script>
<script src = "app.js"></script>
</body>
</html>
public/app.js
var jetbrains = angular.module("jetbrains",[]);
jetbrains.controller("AppCtrl", function (shttp) {
var app = this;
shttp.get("http://localhost:3000").success(function (products) {
app.products = products;
})
})
server/server.js
var express = require("express");
var app = express();
var cors = require("cors");
app.use(cors());
var mongoose = require("mongoose");
mongoose.connect('mongodb://localhost/localhost');
var Product = mongoose.model('Product',{name:String});
app.get("/",function(req,res){
Product.find(function (err, products) {
res.send(products);
})
})
app.listen(3000);
The whole project is stored in a single directory and I'm using the webstorm ide to run the whole thing. Can anyone tell me why my index.html is displaying a blank page?
i think you using Directive Controllers (ng-conrtoller="AppCtrl as app"), so that your app.js in think your code is not right. You can see this video is simple example about Directive Controllers. Hope this helpful =):
http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/4/section/2/video/1
I'm new to AngularJS, I would like to update my data.json but that I don't know where my file users.json should be and I have this error:
Error: $injector:modulerr
http://errors.angularjs.org/1.3.14/$injector/modulerr?p0
Heres my code :
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('myApp', ['ngResource']);
app.factory('User', ['$resource',
function($resource){
return $resource('/users/:userId', {userId:'#id'},
{
'update': {method: 'PUT'}
}
);
}
]);
app.controller('UsersCtrl', function ($scope, User) {
$scope.users = User.query();
$scope.validate=function(user) {
user.$update();
}
$scope.delete=function(user) {
user.$delete();
}
$scope.create = function (newUserName) {
var user = new User();
user.name = newUserName;
user.$save();
$scope.users.push(user);
}
});
</script>
<body ng-app="myApp" ng-controller="UsersCtrl">
<ul>
<li ng-repeat="user in users">
<input type="text" ng-model="user.name" />
<button ng-click="validate(user)">Valider</button>
<button ng-click="delete(user)">Supprimer</button>
</li>
</ul>
Nouveau utilisateur :
<input type="text" ng-model="newUserName" />
<button ng-click="create(newUserName)">Créer</button>
</body>
</html>
Anyone have an idea please?
You forgot to add the ngResource file.
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>
From ngResource page:
You can download this file from the following places:
Google CDN
e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-resource.js
Bower
e.g. bower install angular-resource#X.Y.Z
code.angularjs.org
e.g. "//code.angularjs.org/X.Y.Z/angular-resource.js" where X.Y.Z
is the AngularJS version you are running.
Working Fiddle: http://jsfiddle.net/softvar/rq9eupee/1/
Add angular-resource script below the angular.js file depending upon the version you need within head tag.
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>
If you want to read some data from the file users.json, have it on server(Backend) and populate it as per your requirements. If you simply want to show the list of users, fetch it from server, server will read the file and returns it contents. If for some purpose, you need to read the file and display it contents on front-end, have it inside your js/ folder. But assuming, you read it to send the response, it should be on backend.
I am currently trying Monaca to develop an hybrid app using the Cordova barcode scanner plugin.
For some reason, scan callback started to behave not properly.
Immediatly after scanning, I get a syncing message dialog ("checking sync target files..."), then a "downloading files" dialog and then, finally, the result dialog I asked for. After closing my result dialog, app goes back to index page, which I do not want.
Here is my code (I use Onsen UI):
js/app.js
var app = angular.module('hello', ['onsen']);
app.controller('testController', ['$scope',function($scope) {
$scope.scan = function() {
window.plugins.barcodeScanner.scan(function(result) {
alert( result.text);
}, function(error) {
alert('scan error');
});
}
}]);
index.html
<!DOCTYPE HTML>
<html ng-app="hello">
<head>
<title>Barcode</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<script src="js/app.js"></script>
</head>
<body>
<div ng-controller="testController">
<input type="button" ng-click="scan()" value ="Scan !" />
</div>
</body>
</html>
Maybe it is related to the way plugin now has to be called ?
See http://community.phonegap.com/nitobi/topics/_barcodescanner_plugin_upgrading_scanner_javascript_api_code_changes_required :
The BarcodeScanner Plugin on PhoneGap Build will be getting an update today, and apps using it will need to change their code to use cordova.require:
Old:
window.plugins.barcodeScanner.scan(function(){ ... }, function(){ ... }, optionsObj)
New:
var scanner = cordova.require("cordova/plugin/BarcodeScanner");
scanner.scan(function (result) {...}, function (error) {...});
Thanks for your help.
For some reason, the culprit was a Monaca debugger parameter :
In Monaca app > Debugger settings > Turn off "Restart after resume"
I need to provide a link to download a file, the link must be hidden and accessible by any users, Here is my code , there are no errors whatsoever, but I can't even get the download dialog box to open:
Template
<a ng-href="#" target="page" type="button" class="btn"
ng-click="download()">Download</a>
Script file
$scope.download = function(){
//here i need to know the code,can anybody explain me
}
I had to achieve the functionality. Also had to make sure that it works for all the major supported browsers.
Here's the solution for the same!!!
Happy Coding!!!
Your View/HTML
<a target="_self" class="ui right floated btn btn-warning" href ng-click="downloadInvoice()"> Download </a>
Your Controller
$scope.downloadInvoice = function () {
$http.post(url,requestData, {responseType:'arraybuffer',headers:header
})
.success(function (response) {
var file = new Blob([response], {type: 'application/pdf'});
var isChrome = !!window.chrome && !!window.chrome.webstore;
var isIE = /*#cc_on!#*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
if (isChrome){
var url = window.URL || window.webkitURL;
var downloadLink = angular.element('<a></a>');
downloadLink.attr('href',url.createObjectURL(file));
downloadLink.attr('target','_self');
downloadLink.attr('download', 'invoice.pdf');
downloadLink[0].click();
}
else if(isEdge || isIE){
window.navigator.msSaveOrOpenBlob(file,'invoice.pdf');
}
else {
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
}
})
};
First of all, your can't "hide/not public" a link in a web based technology (HTML/CSS/JavaScript) application. Downloads are handled by the client, so the Download/Link-URL must be public. You can try to "hide" protective params like e.g. IDs in the download URL by using a backend executed programming language like "PHP or node.js, etc.". In that way you can create hash URLs like http://www.myside.com/download/359FTBW!S3T387IHS to hide parameters like the recordId in your URL.
By knowing this, your solution is pretty easy. Just use the HTML attribute download like <a href="http://mydownloadurl" download>link text</a> to force the browser to download the href source. No ng-click is needed here. Unfortunately the download attribute is not supported by Safari browser. This doesn't realy matter while the browser is handling the download itself. Depending on the users system OS configuration the file will be downloaded or directly opened in a programm installed on that system. For example, a PDF file will be opened in a PDF Viewer if some pdf viewer application is available.
I wrote a Plunker which handles ng-href in a AngularJS controller $scope. I hope this is what you need.
Your controller:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.fileHref = 'http://www.analysis.im/uploads/seminar/pdf-sample.pdf';
});
Your view:
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<a ng-href="fileHref" download="yourFilename">Download</a>
</body>
</html>