Make AngularJS and .NET Web Services Work Together!

The Best of Both Technologies

Choosing AngularJS & .NET

angular.js and .net web services working together

JavaScript has exploded over the past few years, both in usage and job opportunities. With increasing device power, connection speeds, and the dawn of AJAX, it has become a dominant web programming language. You’d be hard pressed to find any modern website that DOESN’T use some form of JavaScript and yet many programmers still don’t give it the respect it deserves as a true programming language.

Enter JS Frameworks

Due to the complexity of JavaScript programming and the intricacy of the interactive user interfaces it enables several JavaScript frameworks have been created over the last decade to try and tackle the organization of this scripting language into more formal software design patterns. One of the first to provide such a framework was jQuery – which is awesome for bundling JS code that is highly coupled with specific user controls – but falls a bit short when you really want to dig into complex client-side architectures for things such as two-way binding, web service data manipulation, and component interactivity. For this purpose in our ecommerce platform we’ve elected to use AngularJS.

Getting AngularJS to Work with .NET

One of the challenges we’ve faced is that AngularJS controllers, bindings, & services are setup to work with RESTful web services out of the box (among other things, that means they expect JSON data in responses) – and if you’ve ever used .NET Web Service you know unless your explicit with your requests and coding, you’ll get XML responses. First, let’s cover the basics on how your web services code should be setup. For the purposes of this walk-through, we’ll assume you’ve already gone through the basic workspace setup steps for REST and Custom services at AngularJS.org.

Setting Up Your .NET Web Service Correctly

If you don’t have your project setup for .NET Framework 3.5+ you’ll be fighting an uphill battle and might as well face you’ll have to use the JavaScriptSerializer object manually and return a string. If you can upgrade or are already running .NET 3.5+:

Make sure that your web service class has the ScriptService directive specified above its declaration

[System.Web.Script.services.ScriptService]

public class MyService : System.Web.services.WebService

Next, be sure to include the WebMethod and ScriptMethod directives specifying the response type of JSON

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]
public List<MyObject> GetObjects()

AngularJS Version for .NET 3.5+

Since your web service STILL won’t return JSON unless you set the Content-Type of your request that would be the next logical step. The problem is that unless you’re sending data parameters in your request, AngularJS will remove any Content-Type headers you’ve added to the query. To fix this, and set the default Content-Type to application/json we’ve modified the angular source to be .NET friendly. Using the modified library you can use the following setup for a parameter-less web service call that actually will return JSON.

Your AngularJS Custom Service Setup to Interface with .NET

In your service.js, we’re using the ngResource module and service factory to create a referential promise. Notice we leave out the params query property and set the 'Content-Type' for both the default $httpProvider and the individual $resource itself.

angular.module('objectservices', ['ngResource']).
config(function ($httpProvider) {
$httpProvider.defaults.headers.post['Content-Type'] = "application/json"
}).
factory('ObjectServe', function ($resource) {
return $resource('/Webservices/MyService.asmx/GetObjects', {}, {
query: { method: 'POST', isArray: true, headers: { "Content-Type": "application/json" } }
});
});

In your controller.js, we’ll keep things pretty clean by setting up the service as shown above. Including the binding of the objectservices which would typically be housed in your app.js we get

var objectsApp = angular.module('objectsApp', ['objectservices']);

function ObjectCtrl($scope, objectservices) {
objectservices.query().$promise.then(function (promise) {
$scope.objectList = promise.d;
});
}

objectsApp.controller('ObjectCtrl', ['$scope', 'ObjectServe', ObjectCtrl]);

AngularJS Doesn’t Bind when Getting Data via Web Service

It’s not that Angular isn’t binding, it’s that it’s binding before you get a web service response. By leveraging the built-in $promise.then we can gaurentee that we get the JSON response before we bind to the $scope so that all the data actually get bound to your angular template. A simplistic view would like something like this