I'm fairly new to angular and I'm trying to understand how to query from a REST API using a scope variable to determine the URI that is being pulled in the get request.
Lets say I'm in my app.controller and it has a service that spits out an array of numbers.. and for the sake of making the code minimal, I'll skip to the important part:
$scope.currentCompanyId = '0001';
$http.get('/api/'+ $scope.currentCompanyId +'/c').
success(function(data, status, headers, config) {
$scope.cData = data;
}).
error(function(data, status, headers, config) {
// log error
});
I know this is cheating because the $http.get is in the controller. I know it needs to be a factory of some kind.. but I have no idea how to pass the $scope.currentCompanyID to the get request and have it return the JSON. Furthermore, if $scope.currentCompanyID were to change to another number, say... '0002'.. how would the $scope.cData change to reflect the new query?
I don't think using $http in your controller is cheating - one reason for putting it into a factory/service is make it reusable. If you are only doing it in one place a service doesn't add much.
That being said, your service can return a function that takes a parameter:
app.factory("service", function($http) {
return {
getCompany: function(companyId) { ...make $http call and return data... }
}
});
then in your controller:
service.getCompany($scope.currentComanyId).then(function(resp) {...})
You should consider using Angular $resource because it handles a lot of your abstractions. Either way, if you want to make a new request based on changes in the scope variable, you can $watch it:
$scope.$watch('currentCompanyId', function() {
if(!$scope.currentCompanyId) return;
$http.get().success(); // replace with whatever mechanism you use to request data
});
Your request wont launch if currentCompanyId change... You need to lauch your request manually .
otherwise, it seem to be correct
Did you look at $resource service? http://docs.angularjs.org/api/ngResource/service/$resource - it is rather convenient way to REST requests, and docs have quite a few examples that should suit you well
About changing $scope.currentCompanyID - it seems that you need to create watch for this case:
scope.$watch('currentCompanyID', function(newValue, oldValue) {
// do your update here, assigning $scope.cData with the value returned
// using your code:
$http.get('/api/'+ $scope.currentCompanyId +'/c').
success(function(data, status, headers, config) {
$scope.cData = data;
}).
error(function(data, status, headers, config) {
// log error
});
});
You simply need to pass the data in when calling your service. In your controller, you would need to include your service as a DI module and address it as so:
window.angular.module('myControllerModule', [])
.controller('myController', ['$scope', 'myHTTPService',
function($scope, myHTTPService){
$scope.currentCompanyId = 1;
$scope.lookupPromise = myHTTPService.get($scope.currentCompanyId);
$scope.lookupPromise.then(function(data){
//things to do when the call is successful
},function(data){
//things to do when the call fails
});
}]);
In your service, you deal with that value like this:
window.angualr.module('myHTTPServiceModule', [])
.factory('myHTTPService', '$http',
function($http){
function callHTTP(url){
return $http.get('/api/' + url + '/c');
}
return {
get: callHTTP
};
});
Related
With the code below I keep getting a 404 error. the hello.json file is in the root and I can access it in the browser since it is at localhost:3000/hello.json
not too sure what I did wrong and why this wont write and just returns a 404 not found error.
on click of the button(in the html) that runs the update function I get the alert with the error callback.
angular.module('seakrat')
.controller('MainCtrl', ['$scope','$http', function ($scope, $http) {
$scope.update = function(course){
$http.post("/hello.json", {hello: "there"})
.success(function(data, status, headers, config) {
alert('nailed it')
})
.error(function(data, status, headers, config) {
alert(data + status);
});
$scope.course = '';
};
}]);
You cannot write to a file using angularJS, its a client side framework. You need to have a serverside language to do this job.
I am developing a mobile application. I encountered a problem while trying to relay messages in the view that was returned from the server after an ajax call. The idea is to display the message in the view after the user clicks on a "Refresh" button.
The binding is not working exactly as I hope. It is not showing the user the current message but the one received from a previous click of the refresh button. Thus, the first time the user clicks the button after the view is loaded, nothing happens... I can't figure out why the view update is not instantaneous but rather only changes when the user clicks again.
Here is a simplified version of my code:
HTML:
<span ng-model="rec">{{rec}}</span>
<button ng-click="getNew()">
Refresh
</button>
JavaScript:
$scope.rec = window.localStorage.getItem('content');
$scope.getNew = function() {
$.ajax({
...
success: function(result, textStatus, xhr) {
...
window.localStorage.setItem('content', result.content);
$scope.rec = window.localStorage.getItem('content');
}
},
error: function(xhr, textStatus, errorThrown) {
...
}
});
};
I know that the ajax call is successful every time since the view is updated, but one step late of when it should be. Thanks for the help in advance!
There is no digest cycle after the ajax call is finished so the view does not get updated. If you use $http service instead of $.ajax. Then the view will get updated.
The code would look like this then:
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
window.localStorage.setItem('content', data);
$scope.rec = data;
}).
error(function(data, status, headers, config) {
...
});
Of course you must inject $http to your controller.
Of course! You MUST use Angular $http service.
Read this article.
In order to do a http call, Ideally you need to create a factory for this kind of scenario. Factory which implements http will return a promise by default on which you can update your scope variable.
Syntax for factory would be:
myapp.factory('getHttpData',function($http){
return{
getData: function(){
return $http.get('/urlA');
}
}
});
and in your controller:
.controller('testCtrl',['getHttpData',function(getHttpData){
getHttpData.getData().then(function(data){
$scope.rec = data;//Whatever you want to store in this variable
});
});
I have the following controller. It works all fine (it parses the data and sends them into the view). The only problem I have is that it does not send $http request. Here is the code block of controller (i just send a test $http without any value from the view just to test it works or not, which does not work):
(It's also worth mentioning that I check via browser's console to see if any ajax request is sent or not)
// Controller
LoginApp.controller("RegisterController", function($scope, $http, registerService){
var username = null;
var password = null;
$scope.registerSubmit = function(){
username = $scope.register.username;
password = $scope.register.password;
};
//registerService.CheckUser();
$http.post('server.php', {name : 'something'})
.success(function(data, status, header, config){
return data;
})
.error(function(data, status, header, config){
return data;
}); // end of $http request
});
EDIT: I have edited what #JoshBeam has recommended, passing data to the post(), but it does not change anything.
You need to pass data along with the HTTP request. According to the AngularJS documentation, it is in this format: post(url, data, [config]);
Thus:
$http.post('server.php', /* your data */);
I am sure this is an easy answer but I am not finding it anywhere. Essentially I have a $http service that brings back a JSON object with a ton of data that I need to use like so:
(function (angular) {
angular.module("forecasting").factory("DataServices", ["$http", function ($http) {
return {
//get forecast of entity
getForecast: function (callback) {
$http({
method: "GET",
url: Forecasting.urls.entityAPIRoot + "forecast/1722"
}).success(function (data, status, headers, config) {
callback(data);
}).error(function (data, status, headers, config) {
callback(data);
});
}
}
});
} (angular));
This is just a service that takes a call back so the data can be saved to the scope like so:
DataServices.getForecast(function (data) {
$scope.forecast = data;
});
This works well when trying to show the data in the view, it updates like you think it would. However simply trying console.log($scope.forecast) placed after the above code in my controller does not work.
I want to be able to take subsections of the data so I can use it in my app, however, I can't access $scope.forecast so I am not sure how I am able to.
I have looked at other solutions that use $scope.$apply() and promises. I am just kind of lost and not sure where to go from here.
How do I access a subset of the data being saved to the $scope outside of the callback?
Lets say I have a route set up like so:
$routeProvider.
when('/myroute', {templateUrl: '/views/RouteA.html', controller: 'AController'}).
otherwise({redirectTo: '/home'})
If the server is down, when I click a link to "http://myapp.com/#/myroute" I can see that the requests to load the RouteA.html file are timing out. However, to the user, the application just sits there leaving them with no indication of a problem. I don't see any clear explanation anywhere for handling this type of non-response.
The Best way to tackle this is to add routeChangeError event
$rootScope.$on("$routeChangeError", function () {
alert("there is some error");
//do what ever you want to do again
});
Maybe this cant be a hint for you...
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});