Alright, I'll try and explain this as simply as possible. I have setup a Node and express and mySQL server running a RESTful API with the common get, post, put, delete working fine as I can test them with them in Postman and just looking it up in Chrome. This is all run locally on my machines for now. I have a Ubuntu box running the REST api. When I just query in chrome I get an expected output of the fields I am working with.
(Example request "http://192.168.239.130:1337/api/plates/") Gives me this.
{
"Plates": [
{
"lot_number": "P234",
"plate_number": "NGE-781",
"date_and_time": "2016-07-08T21:14:31.000Z"
},
{
"lot_number": "P234",
"plate_number": "FEB-423",
"date_and_time": "2016-07-08T21:26:08.000Z"
},
{
"lot_number": "P234",
"plate_number": "SEB-623",
"date_and_time": "2016-07-08T21:26:20.000Z"
},
{
"lot_number": "P234",
"plate_number": "ZEB-683",
"date_and_time": "2016-07-08T21:30:59.000Z"
},
{
"lot_number": "P234",
"plate_number": "FEW-083",
"date_and_time": "2016-07-08T21:31:57.000Z"
},
{
"lot_number": "L323",
"plate_number": "JEQ-324",
"date_and_time": "2016-07-11T18:59:03.000Z"
}
]
}
These are just some sample mySQL data that is printed to screen. Which is working as I had hoped. My problem is when I try to make a simple html page with angular script to try and print it it doesn't want to. All I get is a blank page. I have tried running my code with other api's online. I have no problem printing those out with the identical code which I will post below.
<!DOCTYPE html>
<html>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="platesCtrl">
{{plates}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('platesCtrl', function($scope, $http) {
$http.get("http://192.168.239.130:1337/api/plates")
.then(function (response) {$scope.plates = response.data;});
});
</script>
</body>
</html>
Like I said running this with any other API online works.... Mine doesn't It it something that has to do with it be local? Even though like I stated I can run the above address to the ....api/plates API in a browser no problem and get the JSON to spit out.
Any knowledge would be appreciated
Thanks.
Alright, I'll answer this myself. Thought from the comments given from a few other users. I checked the console and was given an error that states that I have a cross domain issue and that 'Access-control-Allow-Origin' missing. I was able to fix be going into my API calling functions and add
res.header("Access-Control-Allow-Origin", "*");
to every API call. For now this works though I am sure there is a more elegant way to implement the same thing.
Thanks for the help.
Related
and I want to have and add a button for add one more movies. I want to send different data at the same time like:
addmovies = [
{
movieName:"",
diractor:"",
releaseDate:""
},
{
movieName:"",
diractor:"",
releaseDate:""
}
];
Look up services and $http in the Angular documentation. You will have to build up an object to pass via POST to your server-side controller. Once you have tried to write some code if you are still having problems try posting with a much more specific question and examples of what you have tried.
I am very new to AngularJS and want to get started retrieving data from a remote source.
My app.js file looks like this:
var app = angular.module('footy', []);
app.controller('ClubController', ['$http', function($http){
var club = this;
club.team = [];
$http.get('http://api.football-data.org/teams/19').success(function(data){
club.team = data;
});
}]);
and my html looks like this:
<!doctype html>
<html ng-app="footy">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller = "ClubController as data">
{{data.club.team.name}}
</div>
</body>
</html>
When I view the page in a browser all that is returned is a blank page and in the source I can see "{{data.club.team.name}}" between the div.
When I view the data source Url in a browser I see this:
{
"id": 19,
"name": "Eintracht Frankfurt",
"shortName": "Eintr. Frankfurt",
"crestUrl": "http://upload.wikimedia.org/wikipedia/commons/0/04/Eintracht_Frankfurt_Logo.svg"
}
I have gone through and completed this course: http://campus.codeschool.com/courses/shaping-up-with-angular-js/ and was trying to apply the instructions from chapter 5 about services to this but I am having no luck.
Can someone help? Thanks in advance.
I see two problems here:
http://api.football-data.org/teams/19 doesn't allow CORS. You can't load the data. Update: The OP pointed out that s/he has an API key that allows CORS. This is not the issue then, but might be for other people trying to reproduce this.
{{data.club.team.name}} should be {{data.team.name}} because you said var club = this;. In other words, the controller you aliased data is the same as the club object. The club object is not a property of the controller data, it IS the controller's data.
See this plnkr for a demo. The commented out code doesn't work because of the api key, the locally hosted file does: http://plnkr.co/edit/ItD96Zfk0g1cLyGrrgBy?p=preview
I'm using yeoman to scaffold a project. In the end I want to learn to scaffold the CRUD. I'm getting stuck on a post request. I've picked the angular-fullstack generator because I'm very comfortable with normal angular-generator.
My post request attempts are being hulled by a 400 error while trying to submit a new object to the Things collection. I'm pretty lost, I need to see completed code of a post request using this folder structure.
UPDATE:
The 400 error is gone however, the req.body.
UPDATE2:
Everything is properly working now answers are both in my code and answer.
So, Using the angular-fullstack generator of yeoman, how would I make a post request to create an awesomeThing in the Thing collection of the mongo db.
I'm surely missing something but I think most of the pieces needed to make a POST request successful are presented below. Any direction would be much appreciated.
app/views/partials/main.html
<div class="row marketing">
<div ng-repeat="thing in awesomeThings">
<h4>{{thing.name}}</h4>
<p>{{thing.info}}</p>
</div>
</div>
<form ng-submit="addAwesome()">
<input type="text" ng-model="tempAwesome.name">
<input type="submit" class="btn btn-primary" value="Add">
</form>
app/scripts/controllers/main.html
$scope.name = [];
$http.get('/api/awesomeThings').success(function(awesomeThings) {
$scope.awesomeThings = awesomeThings;
});
$scope.addAwesome = function() {
$http.post('/api/awesomeThings', $scope.tempAwesome).success(function(postData) {
$scope.awesomeThings = postData;
}).error(function(postData, status){
console.log(postData);
$scope.status = status;
console.log(status);
});
};
lib/routes.js
app.route('/api/awesomeThings')
.get(api.awesomeThings)
.post(api.create);
lib/controllers/api.js
mongoose.model('Thing', ThingSchema);
exports.create = function (req, res) {
var awesomeThing = new Thing(req.body);
awesomeThing.save(function(err) {
if (err) return res.json(400, err);
});
};
lib/models/thing.js
var ThingSchema = new Schema({
name: String,
info: String,
awesomeness: Number
});
I have a hunch it is mongoose blocking this because my submission isnt matching the schema? ? any other thoughts?
Edit
Ok one last suggestion based on looking at some other code I have. try this for your post instead
$http.post('/api/awesomeThings' { name : $scope.name })
Edit based on code change
Change your ng-model in your form to.
<input type="text" ng-model="name">
I think this line is failing
var awesomeThing = new Thing(req.body);
what I think is happening is you are sending an object that looks like this in the body
{ tempThing: "sometext" }
when mongoose tries to create your object it dosen't have a property called tempThing so it bails out. This can be overridden by setting {strict:false} on your schema if you like but, if your intention is to set name from your form I would start with change tempThing to name.
Old Answer
I think your /lib/routes.js has a typo. you have a ';' after .get(api.awesomeThings)
that's causing the .post(api.awesomeThings) to be ignored. remove the semicolon and it would probably start working.
I'm a newbie in AngularJS and I've faced an issue when I try to make a POST request with AngularJS and it POSTs no parameters with it. I use Sinatra as a RESTful interface.
That's how my Sinatra backend looks:
post '/layer/:layer_id' do
#layer = PageLayer.where(id: params[:layer_id]).first
#layer.content = params[:content]
#layer.save
end
If try to POST with Postman chrome extension - it works! Sinatra saves the content properly. So I'm sure that the backend works as it should.
That's how my angular test code looks:
TestCtrl = ($scope, $routeParams, $http, $resource) ->
$scope.layer = []
Layer = $resource('/layer/:id', {id:'#id'})
$scope.layer = Layer.get {id: $routeParams.layerId}, ->
console.log "Got you!"
$scope.saveContent = ->
$scope.layer.$save()
console.log "Saved!"
angular.module('appDirectives', []).directive "test", ->
return (scope, element, attrs) ->
element.bind "blur", ->
console.log("blur!")
scope.saveContent()
And HTML-code:
<div>Content: {{layer.content}}</div>
<div>
<form>
<input type="text" test ng-model="layer.content">
</form>
</div>
So, the only question is: What's wrong? Why I can make correct request with Postman but not with angularJS? Angular returns empty "content" so Sinatra saves it as "" every time.
I've also attached a structure of a layer:
g {id: 27245, page_id: 2302, external_id: 26518, original_upload: null…}
content: "dfgdfg"
external_id: 26518
id: 27245
layerNumber: 8
page_id: 2302
How can I log what exactly angular POSTs?
Hey this is the exact problem I was having, and the answer now seems so obvious. I knew Angular was sending json, but no matter what I tried it wasn't working. This led me in the right direction, but as for parsing json I had to write
ng_params = JSON.parse(request.body.read)
I had to change 'string' to 'read'. Maybe I have a newer version of the json gem or something. My full save process is like this:
post '/api/v1/test' do
ng_params = JSON.parse(request.body.read)
#foo = Foo.new(ng_params)
if #foo.save
puts "Page Saved"
content_type :json
rabl :foos, format: "json"
end
end
I use rabl to format the json to have control over what json data Sinatra sends back (no emails or passwords please)
My Angular code is just this (have not yet implemented put, patch or delete, nor auto update of data just yet. You still have to refresh the page to see the new post.) And to be clear, I have a table named 'foos', where the ActiveRecord model is 'Foo', and one column named 'anything' (other than timestamps and id, which I make sure are always there).
// app declaration
var app = angular.module("App", ['ngResource']);
// data service
app.factory('Foo', ['$resource', function($resource) {
return $resource('/api/v1/test/:id', {id: '#id'});
}]);
// the controller
app.controller('Controller', function($scope, Foo) {
$scope.foos = Foo.query();
$scope.create = function(anything) {
Foo.save({anything: anything}, function(foo){
$scope.foos.push(foo);
});
};
});
Then in my markup the form looks like this, where the important thing is the call to 'create' with 'anything' as the argument in 'ng-submit'. If you have more than one column in your table you call 'create' with more than one argument ex. 'create(anything, bar)'.
<h3>Add something new</h3>
<form ng-submit="create(anything)">
<input ng-model="anything" type="text">
<button type="submit">Do it</button>
</form>
While displaying the data is
<li ng-repeat="foo in foos">
<p>{{foo.anything}}</p>
</li>
This link solved the problem. Just add
gem 'rack-parser'
to your Gemfile and add this code to config.ru. Will work like a charm.
require 'rack/parser'
use Rack::Parser, content_types: {
'application/json' => Proc.new {|body| JSON.parse body }
}
All right, I've solved the issue. Somehow Sinatra was not properly getting POSTs from Angular and was not automatically putting them into params.
So if we parse the request manually - it works. Like that:
post '/layer/:layer_id' do
#updated_layer = JSON.parse(request.body.string)
#layer = PageLayer.where(id: params[:layer_id]).first
#layer.content = #updated_layer['content']
#layer.save
end
I want to use JSON instead of MongoLab example shown on AngularJS website.
Here's the code from the website:
angular.module('mongolab', ['ngResource']).
factory('Project', function($resource) {
var Project = $resource('https://api.mongolab.com/api/1/databases' +
'/angularjs/collections/projects/:id',
{ apiKey: '4f847ad3e4b08a2eed5f3b54' }, {
update: { method: 'PUT' }
}
);
Is there any way I could connect and put into JSON file available on my folder instead of hosting it to MongoLab?
Any response would be really appreciated!
You can look at this example:
Reading in JSON through Angular Resources Service
You want to return the Project variable from your factory
var Project = $resource('test.json', {} );
return Project;
then use it in the controller after you inject it:
Project.get(function(data){
$scope.bar = data.foo;
});
Update:
After looking thru the 1.1.3 angular-resource.js code, it looks like it always does an http request to get its data. Set up a simple RoR app with a REST interface for testing.
Or use plunker (like the linked question above) for complete remote testing.