Develop Reference

How to access Angular's Optional Configuration Object for $http.get in ASP.net

I have a URL that looks like this:
example.com/users/34/
I want for Angular to be able to take this ID (34) and make a call to my ASP.net server to grab information about that user.
As per Angular's documentation (https://docs.angularjs.org/api/ng/service/$http#get) I am thinking I should be able to do something like this in order to achieve that:
$http.get("/api/users/", { UserID: 34 } ).
success(function (user, status, headers, config) {
console.log(user);
}).
error(function (data, status, headers, config) {
console.log(status);
});
But I cannot manage to write an ASP.net function that is able to grab the UserID variable. Here's what my C# function looks like at the moment:
[Route("api/users")]
public HttpResponseMessage getUser()
{
// do some stuff... but where is UserID? I can't find it in the header etc
}
When I set up a break point, that function fires successfully, but I cannot get UserID. Looking around and can't seem to find any documentation on this.
Any ideas?
--- Update ---
I've confirmed that this works:
Inside my Angular file:
$http.get("/api/users/?UserID=34" ).
success(function (user, status, headers, config) {
console.log(user);
}).
error(function (data, status, headers, config) {
console.log(status);
});
Inside my C# file:
[Route("api/users")]
public HttpResponseMessage getUser( int UserID )
{
// yay! UserID now equals 34
}
But what I would like to do instead of passing the variable as part of the URL string, is pass it as an Optional configuration object (as per https://docs.angularjs.org/api/ng/service/$http#get).
That's what I am asking help with.

AngularJS binding response from server not updating in view

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
});
});

Angular $http.get with dynamic route?

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
};
});

Updating models in controllers with AJAX Angular JS

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?

In Angular JS application, how do you handle the cases where there is no response from the server?

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.
});