I am a Angularjs New bee.This is my first Angularjs application, i am just trying to interact with Nodejs service call and to print the response. But I am receiving different error in Chrome and Firefox.
In chrome i got uncaught error and in firefox i got Error: [$injector:modulerr]
Here is my coding:
index.html:
<!doctype html>
<html data-ng-app="myapp">
<head>
<title>Monitoring</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-resource.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js">
</script>
<script type="text/javascript" src="controller/controller.js"></script>
</head>
<body>
<div ng-controller="CommonMetricsCtrl">
{{data}}
</div>
</body>
</html>
controller.js
var App = angular.module('myapp', ['ngRoute', 'ngResource']);
App.controller('CommonMetricsCtrl', ['$scope', '$resource',
function($scope, $resource) {
function createResource(url) {
return $resource(url + '?alt=:alt&method=:callback', {
alt: 'json',
callback: 'JSON_CALLBACK'
}, {
get: {
method: 'JSONP',
headers: [{
'Content-Type': 'application/json'
}, {
'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8'
}]
},
isArray: false
});
}
URL = "http://localhost:1111/servicelist";
var resource = createResource(URL);
resource.get({}, function processResponse(response) {
console.log(response);
$scope.data = response;
if (response.error) {
console.log('Error here');
}
});
}
]);
I dont know where i went wrong, Can any one sort out the issue please?
You're adding the angular-route module twice.
Related
I have just started learning Node.js.
I have this following code where I need to submit the form using patch method to update an existing record.
Language/Edit.ejs
<form action="//localhost:3000/languages/6343eb83340e657a0321a9cc" method="post">
...
<div class="boxFooter grid gap-2">
<input type="hidden" name="_method" value="patch">
<button type="submit">Update</button>
</div>
</form>
Router
...
Router.patch('languages/:id', validations, update);
...
Controller
import Model from '#Models/Language.js';
...
const update = async (req, res) => {
try {
const item = await Model.findByIdAndUpdate(req.params.id, {
title: req.body.title,
description: req.body.description,
status: req.body.status,
}, {
new: true,
runValidators: true
});
res.send(item);
} catch (error) {
return res.status(400).json('Sorry, we have an error.');
}
};
But, I am getting this error always
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot POST /languages/6343eb83340e657a0321a9cc</pre>
</body>
</html>
I have also tried to use method="patch" instead of method="post". But, the outcome is still the same.
However, I tried to run this url with postman and it worked flawlessly.
Here is the peace of code that solved my problem. However, I am not sure whether this is the right way or not.
What I did was that I changed the method to patch and submitted the form with ajax.
Here is my code:
<form action="//localhost:3000/languages/6343eb83340e657a0321a9cc" method="patch">
...
<div class="boxFooter grid gap-2">
<button type="submit">Update</button>
</div>
</form>
<script type="text/javascript">
...
ajaxRequest({
...
type: $('form').attr('method'),
...
})
</script>
...
const ajaxRequest = (params) => {
return $.ajax($.extend(true, {
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type: 'POST',
url: '',
data: {},
cache: false,
beforeSend: () => {},
success: (response) => {},
complete: (response) => {}
}, params));
};
...
Is this the right way..?
I am using Node.JS on server side to send notification to 3 clients(browsers). Clients on Microsoft Edge and Chrome receive notifications, but Firefox do not (p.s. i'am testing on domain with https encryption)
Client code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.1/firebase-app.js";
import {
getMessaging,
getToken,
onMessage,
} from "https://www.gstatic.com/firebasejs/9.9.1/firebase-messaging.js";
const firebaseConfig = {
/* <config> */
};
const app = initializeApp(firebaseConfig);
const vapidKey = "vapid";
window.messaging = getMessaging();
window.messaging.onMessageHandler = console.log;
getToken(window.messaging, { vapidKey }).then((token) => {
const p = document.createElement("p");
p.appendChild(document.createTextNode(token));
document.querySelector("html").appendChild(p);
});
</script>
</body>
</html>
Server side code:
const firebase = require("firebase-admin");
const serviceAccount = require("mycredentials.json");
const app = firebase.initializeApp({
credential: firebase.credential.cert(serviceAccount),
});
firebase
.messaging(app)
.sendMulticast({
tokens: [
"<edge token>",
"<chrome token>",
"<firefox token>"
],
data: {
test: "Test",
},
webpush: {
notification: {
body: "Halo!",
title: "notification_new_message",
},
},
})
.then((response) => {
console.log(JSON.stringify(response, null, 4));
});
Unfortunately, I receive error:
{
"responses": [
{
"success": true,
"messageId": "<messageId>"
},
{
"success": true,
"messageId": "<messageId>"
},
{
"success": false,
"error": {
"code": "messaging/third-party-auth-error",
"message": "Auth error from APNS or Web Push Service"
}
}
],
"successCount": 2,
"failureCount": 1
}
I tried sending single request(messages:send) to Firefox Client, but it fails with the same error. Also, I tried to manually build and send raw Batch Request, but result was the same.
How can I figure it out?
I'm using Node.js 'https' module. And i'm sending a GET request with some headers option but I get the following error:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<TITLE>ERROR: The request could not be satisfied</TITLE>
</HEAD>
<BODY>
<H1>ERROR</H1>
<H2>The request could not be satisfied.</H2>
<HR noshade size="1px"> Bad request.
<BR clear="all">
<HR noshade size="1px">
<PRE> Generated by cloudfront (CloudFront) Request ID: 7H9MBMS_ullYt-ZSpdMw4WjAU0O1QlVaDNw_8QLwlXZa8olpjmRPDQ== </PRE>
<ADDRESS></ADDRESS>
</BODY> </HTML>
Following is my code
const var https = require('https')
var optionsget = {
headers: {
'client': process.env.MOVIEGLU_CLIENT,
'x-api-key': process.env.MOVIEGLUE_API_KEY,
'api-version': process.env.MOVIEGLU_API_VERSION,
'Authorization': process.env.MOVIEGLUE_AUTHORISATION,
'geolocation': user.loc[0] + ';' + user.loc[1],
'Content-Type':'application/x-www-form-urlencoded'
},
host: process.env.MOVIEGLU_HOST,
path: path,
method: 'GET'
};
// do the GET request
var content = ''
var reqGet = https.request(optionsget, function (response) {
response.on('data', function (data) {
// Append data.
content += data;
});
response.on('end', function () {
console.log('content ', content)
callback(null, content)
})
});
reqGet.end();
reqGet.on('error', function (e) {
callback(e, null)
});
});
Can someone please guide me what i'm doing wrong in setting headers? I'm really stuck.
Thanks
I would like to make some requests (GET, POST, PUT ...) for a RESTful API before displaying any window of my Electron application (use Electron app as a client). Is it possible to use ClientRequest to do this? Would anyone has an example?
Thank you very much.
Just clone this repo - git clone https://github.com/AldoHub/Electron-Weather.git.
Also the video for the same is at - https://www.youtube.com/watch?v=5_r7UQvnbtQ.
Also you need to register with the https://weatherstack.com/ and get 'Your API Access Key' and paste it in the file
Electron-Weather/src/public/functions.js
at line number 5
await fetch(`http://api.weatherstack.com/current?access_key=<your_access_key>&query=${city}`)
Also, for debugging the electron app, see the link - https://discuss.atom.io/t/how-to-make-developer-tools-appear/16232/6
Finally, to run the electron app,execute the command
1. npm install or yarn install
2. npm start or yarn start
Another POST example:
Method: POST
Url: http://161.117.231.37/api/v1/login
Body:
{
"email": "admin#gmail.com",
"password": "12345678"
}
Sample response is:
{
"success": true,
"data": {
"expiresIn": 6000,
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImFkbWluQGdtYWlsLmNvbSIsImlhdCI6MTYxNDMxNzM1MiwiZXhwIjoxNjE0MzIzMzUyfQ.wPcSA9Mx8PSLUgi1Okxwl8LBfx3Ia8m9bL5PEndcrs8",
"type": "Admin",
"verification": {
"mobile": true,
"email": true,
"isProfileCompleted": 0,
"isOnboardingComplete": false,
"forcePasswordChange": true
}
}
}
Now, the code for the same is
function.js
const cityForm = document.querySelector("#weatherForm");
document.addEventListener("DOMContentLoaded", (e) => {
cityForm.addEventListener("submit", (e) => {
e.preventDefault();
if(document.querySelector("#email").value != ""){
let conditionsDiv = document.querySelector("#conditions");
if(conditionsDiv){
document.querySelector("main").removeChild(conditionsDiv);
}
getToken(document.getElementById("email").value, document.getElementById("password").value);
}else{
console.log("You must provide a email and password");
}
})
})
const getToken = async(_email, _password) => {
let _body = {email: _email, password: _password}
console.log({email: _email, password: _password})
await fetch('http://161.117.231.37/api/v1/login',{
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify({email: _email, password: _password}) // body data type must match "Content-Type" header
})
.then(res => res.json())
.then(data => {
console.log(data)
let div = document.createElement("div");
div.setAttribute("id", "conditions");
let temp = document.createElement("div");
let tempNode = document.createTextNode("Your token is this......" + data.data.token );
temp.appendChild(tempNode);
div.appendChild(temp);
document.querySelector("main").appendChild(div);
}).catch(err => console.log(err))
}
In the index.html, you have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../public/main.css" type="text/css" />
<title>Electron Weather</title>
</head>
<body>
<img id="hero" src="../public/images/taxi-autopilot.png" />
<header>
<h1>Electron <br/> Weather</h1>
<p>illustration by <strong>Ouch.pics</strong></p>
</header>
<main>
<p>Type the email and password to find out the token ...</p>
<form method="POST" id="weatherForm">
<input type="text" id="email" placeholder="Email Name" />
<input type="text" id="password" placeholder="Password Name" />
<input id="postSubmit" type="submit" value="Submit" />
</form>
</main>
<script src="../public/functions.js"></script>
</body>
</html>
After hitting Ctrl + Shift +I two times, you get the console window in the electron app as:
My node.js web-app is using microsoft's ocr computer vision api
https://www.microsoft.com/cognitive-services/en-us/computer-vision-api
When I pass a static link to the api, it works
like:
body: "{'url':'LINK_TO_IMAGE'}",
this is the part of the request callback.
What I want is to pass links dynamically.
So that the callback function is evoked the variable link
I have tried using this:
body: {'url':link},
but this does not work, there is no response.
Is there any other format I should follow?
Look document, here https://dev.projectoxford.ai/docs/services/54ef139a49c3f70a50e79b7d/operations/5527970549c3f723cc5363e4
<!DOCTYPE html>
<html>
<head>
<title>JSSample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function() {
var params = {
// Request parameters
"language": "unk",
"detectOrientation ": "true",
};
$.ajax({
url: "https://api.projectoxford.ai/vision/v1/ocr?" + $.param(params),
beforeSend: function(xhrObj){
// Request headers
xhrObj.setRequestHeader("Content-Type","application/json");
xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","{subscription key}");
},
type: "POST",
// Request body
data: "{body}",
})
.done(function(data) {
alert("success");
})
.fail(function() {
alert("error");
});
});
</script>
</body>
</html>