I need to use angularJS to call a rest api located at localhost:80/users.
The problem is that it does not read the url (the url works if I access it in the browser).
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>
</div>
<p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome" variable.</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("https://www.w3schools.com/angular/welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
</script>
</body>
</html>
When I run the code from above (which is from https://www.w3schools.com/angular/tryit.asp?filename=try_ng_services_http) on my PC I don't see the correct result. Instead
Today's welcome message is:
Hello AngularJS Students
The $http service requests a page on the
server, and the response is set as the value of the "myWelcome"
variable.
I see
Today's welcome message is:
The $http service requests a page on the server, and the response is
set as the value of the "myWelcome" variable.
in Chrome and Firefox.
If I replace the url from the code (https://www.w3schools.com/angular/welcome.htm) with my localhost/users, I also don't see the correct result. But, if the url is https://restcountries.eu/rest/v1/region/europe it works! Why does it work for some URLs and it does not for others?
The server which is running the angularJs uses a different localhost port than the Rest server provider. Could this be the problem?
I use the latest AngularJS version (1.6.7).
Related
How do you return a function from an express server and run it in a browser?
I have hosted a function on Google Cloud Platform (Cloud Functions) and want to run it in a web application via a script tag. The function is in Nodejs 16 and can be called via https, and is a simple hello world example:
exports.helloWorld = () => {
const widget = console.log("This is a widget");
return widget();
}
However, it seems as though I cannot call it that way, because I get an Error: could not handle the request and a 500 status message each time I try to hit the endpoint.
I want to be able to embed this function on a website via something like:
<script src="https://example.com/function-name"/>
How can I achieve that?
It seems that your Cloud Function is malformed. When you create a Cloud Function you have to return a status code otherwise the Cloud Function will timeout waiting for the return status code (throwing the 500 error you had).
If I guess correctly what you want to do is call an external script from the Cloud Function, you can use the next code:
exports.helloWorld = (req, res) => {
let message = 'alert("Hello world from CF")'; //Or any js code script here
res.status(200).send(message);
};
And call it from the HTML page like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://zone-project-id.cloudfunctions.net/helloworld"></script>
</head>
<body>
<!-- the content goes here -->
Hello world!
</body>
</html>
I have a API that uses the same auth middleware. So when I am successfully logged in, I am redirected to a page that gets data from my API from the same app. In my app.blade.php I only have axios added and a simple html and take note, I don't even have a csrf-token meta in my header except from my login page which has #csrf in my form.
Here is my app.blade.php layout
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
#yield('content')
<script src="{{ asset('js/axios.min.js') }}"></script>
<script>
const http = axios.create({
baseURL: '/api'
});
http.interceptors.request.use((request) => {
console.log('Starting Request', request);
return request;
});
</script>
#stack('scripts')
</body>
</html>
and in one of my pages:
#extends('layouts.app')
#section('content')
<div>
<h1>Hello World</h1>
</div>
#endsection
#push('scripts')
<script>
async function test() {
const { data } = await http('/some-page');
// I'm getting a data even without passing a csrf token?
console.log(data);
}
test();
</script>
#endpush
I'm getting the API data even without passing a csrf/xsrf token which is weird.
When I check my console for logs of outgoing request, this is the output
I mean, where did that came form? I don't even have a csrf token in my templates and also nothing or whatsoever passed to my axios config.
Am I missing something here?
Check the docs on XSRF token:
X-XSRF-TOKEN
Laravel stores the current CSRF token in a XSRF-TOKEN cookie that is
included with each response generated by the framework. You can use
the cookie value to set the X-XSRF-TOKEN request header.
This cookie is primarily sent as a convenience since some JavaScript
frameworks and libraries, like Angular and Axios, automatically place
its value in the X-XSRF-TOKEN header.
(I re-edited my initial question to better explain the context.)
I have a mean-stack web site built with angular-ui-router and html5mode. routes/index.js contains the following code, and it is views/index.html which has <ui-view></ui-view> and is the entry point of all the pages. As a result, https://localhost:3000/XXXX in a browser will remain the same (rather than adding #) and show the corresponding content based on the router.
router.get('*', function(req, res) {
console.log("router.get *");
res.sendfile('./views/index.html');
});
Now, because of this problem, I want to have views/addin.html that contains office.js and another router, such that the site serves a set of urls https://localhost:3000/addin/XXXX, and I don't mind if it is html5mode or not (a url can contain # somewhere). To this end, I added one block for addin in routes/index.js:
router.get('/addin/*', function (req, res) {
console.log("router.get /addin/*");
res.sendfile('./views/addin.html')
});
router.get('*', function(req, res) {
console.log("router.get *");
res.sendfile('./views/index.html');
});
And here is views/addin.html:
<html>
<head>
<title>addinF</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
</head>
<body ng-app="addinF">
addin content
<ui-view ng-cloak></ui-view>
</body>
<script>
var addinApp = angular.module('addinF', ['ui.router'])
addinApp.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('addinNew', {
url: '/addin/new',
template: "new page"
})
.state('addinHome', {
url: '/addin/home',
template: "home page"
})
}]);
</script>
</html>
However, loading https://localhost:3000/addin/new or https://localhost:3000/addin/home just shows addin content and does not show new page or home page in console; it did not raise any error either.
Could anyone tell me what's missing? Can one server serve 2 angularjs modules or routings?
Just add initial redirection:
appAddin.config(['$urlRouterProvider', function ($urlRouterProvider) {
$urlRouterProvider.otherwise("/addin/new");
}])
There is a working plunker
I'm writing JavaScript and AngularJS code and i'm trying to get through a https website some JSON data.
My code :
var app = angular.module('myApp', []);
app.controller('DecisionsCtrl', function($scope, $http) {
$http.get('https://test3.diavgeia.gov.gr/luminapi/opendata/search.json?org=10599')
.success(function (response) {$scope.decisions = response.decisions;});
});
and
<tr ng-repeat="x in decisions | limitTo:10 ">
<td>{{x.protocolNumber }}</td>
<td>{{x.subject}}</td>
<td>{{x.extraFieldValues.financialYear}}</td>
<td>{{x.extraFieldValues.budgettype}}</td>
</tr>
</table>
A pic from error through firefox console :
If i use http website or if i download https stuff into file.json, there isn't any problem.
Could anyone help me?
Your request is being blocked by CORS: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
If you control the server, then you can add the 'Access-Control-Allow-Origin' header to allow the host you are attempting to access it from.
If you don't control the server, contact the administrators and ask them to add it, or they may have another method of access (such as JSONP).
I'm changing my node.js application, i was using EJS template engine and now i want use angular.
For this i already install angular and is working good, but now i want get my data, and for this i'm using the $http service:
(function($) {
app.controller('EventCtrl', ['$scope', '$http', function($scope, $http){
$scope.data;
$http.get('/data').
success(function(data, status, headers, config) {
$scope.data = data;
}).
error(function(data, status, headers, config) {
$scope.data = data;
});
}]);
}(jQuery));
And i'm sending the data in the backend:
restAPI.GET(options).then(function (result) {
res.render('data/index.html', {
event: result,
});
}).then(undefined, function (error) {
console.log(error);
});
But its returning the HTML from the same page that i'm using the controller. What am i doing wrong here??
What is returning:
<!DOCTYPE html> <html ng-app="app"> <head> <title> Testando Angular </title> </head> <body> <div ng-controller="EventCtrl"> {{data}} </div> </body> <script type="text/javascript" src="/lib/jquery/dist/jquery.min.js"></script> <script type="text/javascript" src="/lib/angular/angular.min.js"></script> <script type="text/javascript" src="/app.js"></script> <script type="text/javascript" src="/controllers/EventCtrl.js"></script> </html>
You need to have node serve up the page which angular lives on.
(This is using just an example using express)
Something like this:
app.get('/', function(req, res) {
res.sendFile('../public/index.html');
res.end();
});
Then you need to set up routes for angular to query so it can get data:
app.get('/api/data', function (req, res) {
//Get some data here however you do that
res.json(data) //Send your data back to angular in the callback of your database query ( or whatever you are doing )
}
You use res.render() to send a page. You don't want to send a page. You just want to send data if you are using the $http.get request shown above. Fetch your data and send it with res.json(data)
If you need some insight into how all the pieces fit together, I would recommend working through the following tutorial:
Setting Up a MEAN Stack SPA