I am trying to get any information with Angular from the local api that I have created in Ruby, Sinatra platform. I am sure that the api is running on the port 4567 since I can see the data if i access m it directly through web interface. When I do that I see this (just next to the number 0 there is like a small arrow so it is possible to minimize the details of the object):
0
id "1"
name "Company-A21"
address "Gany-A11"
If I want to see RAW data I get this:
[{"id":"1","name":"Company-A21","address":"Gany-A11"}]
On the "other side" I am running apache2 and this HTML file:
<!doctype html>
<html >
<head>
<title>Hello AngularJS</title>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{company.id}}</p>
<p>The content is {{company.name}}</p>
</div>
</body>
</html>
And the hello.js:
angular.module('demo', [])
.controller('Hello', function($scope, $http){
$http.get('http://localhost:4567/api/v1/companies/2').
then(function(response) {
$scope.company = response.data;
});
});
Why I can not see response?
I just started to practice Angular and I stuck here...
Your data is an array of objects so you'd output it like: {{company[0].id}}
You probably followed an example using ng-repeat which would look something like this:
<div ng-repeat="company in companies">
<p>The ID is {{company.id}}</p>
<p>The content is {{company.name}}</p>
</div>
https://jsfiddle.net/ojzdxpt1/21/
Use ng-init to execute your get request. Implement your api call under a method:
angular.module('demo', [])
.controller('Hello', function($scope, $http){
$scope.getCompany = function(){
$http.get('http://localhost:4567/api/v1/companies/2').
then(function(response) {
$scope.company = response.data;
});
}
});
and use it in ng-init:
<!doctype html>
<html >
<head>
<title>Hello AngularJS</title>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello" ng-init="getCompany()">
<p>The ID is {{company.id}}</p>
<p>The content is {{company.name}}</p>
</div>
</body>
</html>
Related
I developed one RESTful web service. The link return json code, like these:
{"status":"itPassed","dest":"/elk2/kr659p/home"}
Now I want to display these data in my screen.
View:
<!doctype html>
<html ng-app="myApp">
<head>
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular-resource.min.js"></script>
<script src="../controllers/webservice.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{greeting.status}}</p>
<p>The content is {{greeting.dest}}</p>
</div>
</body>
</html>
My Controller
angular.module('myApp', []).controller('Hello', function ($scope, $http) {
alert(1);
$http.get('http://9.124.130.197:2020/PatchAdminTool/rest/service/getstatus/123').
success(function(data) {
alert(2);
$scope.greeting = data;
alert(data);
});
});
no errors in console? because that's not really how you write a controller in angularJS.
you should have something like
angular.module('mymodule', []).controller('Hello', function ($scope, $http) {
$http.get('http://9.124.130.197:2020/PatchAdminTool/rest/service/getstatus/123').
success(function(data) {
alert(data);
$scope.greeting = data;
alert(data);
});
});
by the way, does the alert actually show something?
Did you try to place breakpoints?
Open the Chrome Debugger - Place the following breakpoints:
on the $http.get line - see if you are reaching it.
on the alert(data) line - see if the data contain what you expected.
I'm teaching myself Angular and I've looked over a number of examples that show how to bind a model to an HTML input so that they always contain the same text.
I understand that Angular also provides the $location service which works with the URL.
I have an application that I'm thinking of partially rewriting in Angular as a learning example.
In my example, I have an HTML input that I keep synced up with a model using jQuery and also synced up with a hash URL.
Is there a simple way of accomplishing this with AngularJS?
Consider the example application bellow:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
function FirstController($scope, $location) {
var data = {
bar: 'hello world'
};
$scope.data = data
}
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstController">
<input ng-model="data.bar" />
<h2>{{ data.bar }}</h2>
</div>
</div>
</body>
</html>
This is a simple example showing how the model can be kept synced with a textbox. I was wondering if it's possible to keep it synced with a hash URL, as well, so that we would have http://www.example.com#bar=What_The_User_Typed
What you probably need is the $routeProvider
https://docs.angularjs.org/tutorial/step_07
I am trying to iterate with ng-repeat, using data served from a REST service. I manage to recover the data in my main.js file, but I can't get the data to be injected into the HTML.
I just started learning nodejs and angular, so it is very probable that I am not clearly getting it. I am logging twice the call to the REST service, getting the data in one of them (using a callback function) and getting a promise in the other (Which I assume happens because the call is synchronous, I didn't use any callback function here).
What I don't understand is why the HTML doesn't get the data.
Anyway, here's the code:
main.js
var myApp = angular.module('myApp', ['ngResource']);
myApp.factory('restservice', function ($resource) {
var source = $resource(
"http://rest-service.guides.spring.io/greeting/");
var data =source.get({},function(){
//this log shows the data
console.log (data);
})
return data;
});
function AvengersCtrl($scope, $resource, restservice) {
$scope.servicedata = restservice;
//this log shows the promise
console.log($scope.servicedata);
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Tutorials</title>
<!-- <link rel="stylesheet" href="vendor/foundation/foundation.min.css"> -->
</head>
<body>
<div ng-app="myApp">
<div ng-controller="AvengersCtrl">
<input type="text" ng-model="search.$">
<table>
<tr ng-repeat="resource in servicedata | filter:search">
<td>{{resource.id}}</td>
<td>{{resource.content}}</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-resource.js"></script>
<script type="text/javascript" src="/angular/app/main.js"></script>
</body>
</html>
Thanks in advance, regards
The code looks good to me.
The problem is the service returns a Json object instead of list.
If you wrap it with a list like this, you will see the result
$scope.servicedata = [restservice];
I need to code an AngularJS page which displays some JSON data coming from a REST Service.
The REST service when invoked displays this JSON example data:
[{"key":"ABX1234","value":"Network Hub"}]
Here is the HTML page that I'm using to retrieve the data:
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function Hello($scope, $http) {
$http.get('http://host/json').
success(function(data) {
$scope.json = data;
});
}
</script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{json.key}}</p>
<p>The content is {{json.value}}</p>
</div>
</body>
</html>
Unfortunately nothing is displayed as json.key or json.value. Can you help me to find out what is the issue ?
Thanks!
It should be like this:
<div ng-controller="Hello">
<div ng-repeat="json in json">
<p>The ID is {{json.key}}</p>
<p>The content is {{json.value}}</p>
</div>
</div>
You are getting array of objects. It needs to be iterated.
I tried to get ngMeteor (v0.1.7) working. The JS code runs without errors, however the data binding in the HTML code does not work. This is the code:
JS
if(Meteor.isClient) {
ngMeteor.controller('MainCtrl', ['$scope', function($scope) {
$scope.foo = 'bar';
}]);
}
HTML
<head>
<title>My Title</title>
</head>
<body>
<div ng-controller='MainCtrl'>
[[foo]]
</div>
</body>
This is what i get: [[foo]]
However, I should get: bar
Thoughts?