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
Related
I have a problem with my single Page Application. When I start my Project with the keyuser.html as first site(home page) the Table from the connected Database is shown with the Data. When I use the normal home.html as entry Point for my Program, I can click the Hyperlink to my keyuser.html file, the controller does the necessary routing and I am on my keyuser.html site. But here is just the update Button, but not my Table with my Data.
+++++++++ keyuser.html ++++++
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="update()">Update</button>
<div id="flexGrid"></div>
</body>
</html>
<script>
var cv = new wijmo.collections.CollectionView();
var flexGrid = new wijmo.grid.FlexGrid('#flexGrid');
flexGrid.itemsSource = cv;
// Get Data
wijmo.httpRequest("/api/Colors", {
success: function (xhr) {
cv.sourceCollection = JSON.parse(xhr.response);
}
});
</script>
++++++++++++ control.js ++++++++++++++
var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/keyuser", {
templateUrl: "keyuser.html"
});
++++++++++++ home.html ++++++++++++++
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
</head>
<body>
<div ng-app="myApp">
Stammdaten
<div ng-view></div>
</div>
There are multiple things wrong here.
First of when loading HTML templates with routing the entire template gets loaded into the ng-view element. Which means that in your case the doctype tag, html tag, body tag and all the other tags are loading twice which might break your page.
Secondly when using AngularJS do not write your javascript in script tags, instead start using controllers, directives, componentens and services.
And last, make sure to include the correct AngularJS scripts like angular.js and angular-route.js
In general i highly recommend just going through the basics of AngularJS before proceeding because i feel like you are missing those.
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>
I'm trying to follow this [dojo tutorial]1 , a very simple , but it doesn't run
work.
here is the Html code :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
dojoConfig = {
parseOnLoad: true,
baseUrl: "http://localhost/arcgis_js_api/library/3.15/",
isDebug: true
};
</script>
<script src="http://localhost/arcgis_js_api/library/3.15/dojo/dojo.js"></script>
</head>
<body>
<div id="container">
</div>
<script>
require(["dijit/form/CheckBox"], function(CheckBoxk) {
var chbox = new CheckBoxk({
id: "chbox1",
checked: true
});
chbox.placeAt("container", "first");
});
</script>
</body>
</html>
and this is Google chrome output:
Unless you are hosting your own custom version of the ArcGIS API for JavaScript on your system (i.e. because you are using localhost), you should instead use ESRI's CDN to load the API resources.
Ex:
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<script src="https://js.arcgis.com/3.15/"></script>
Otherwise it appears you simply have a bad web server configuration on your system, i.e. "arcgis_js_api" doesn't point where you think it points. Check your web server log for more information about the 404.
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>
I have a working test service on our local 2012 server which returns JSON like so:
192.168.1.11:8080/api/values
[{"ID":1,"Name":"sankar","Address":"cuttack","DOB":"1983-01-22T00:00:00"},{"ID":3,"Name":"My Test Name","Address":"My Test Address","DOB":"1980-01-01T00:00:00"}]
I'm using VS2010 and empty asp.net project (one .html page) with the following code to pull a simple list from the local server like so:
<html lang="en" data-ng-app="">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script type="text/javascript">
function ValuesController($scope, $http) {
$scope.length = 0;
$scope.data = [];
$http.get("192.168.1.11:8080/api/values")
.then(
function (result) {
angular.copy(result.data, $scope.data);
},
function () {
//handle error
}
);
}
</script>
</head>
<body>
<div data-ng-controller="ValuesController">
<div class="row">
<h2>Projects and its Tasks</h2>
<p>Number of Projects : {{ data.length }}</p>
</div>
<div data-ng-repeat="d in data">
<p>Name : {{d.Name}}</p>
</div>
</div>
</body>
</html>
Try adding the protocol to your URL. I think angular might be treating that as a relative URL without the protocol.
$http.get("http://192.168.1.11:8080/api/values")
You will also need to enable CORS on your Web API and in AngularJS to make cross domain calls.
If you are just getting started and trying to learn how AngularJS works, you would probably be better off running the Web API under the same site that is hosting your JavaScript/HTML.