Using AngularJS Modules and Services Feature in an ASP.NET MVC application

In our previous post, Hello AngularJS – Building a Tweet Reader we saw how to create a simple ASP.NET MVC application using AngularJS. We saw how the $scope and $http objects were injected in our app by Angular. We also saw how to do Templating and DataBinding. Today we will learn a few more constructs like the Modules and Services.

As with our demos we’ll walk with a code sample to see how the AngularJS features are used.

The Sample AngularJS Application - Recap

We’ll continue where we left off with the previous ASP.NET MVC sample where we built a Twitter reader.

The ASP.NET MVC Controller

To quickly recap, we have an ASP.NET MVC application with an MVC Controller. The controller has the Index action method. Here the LinqToTwitter framework first checks if user is Authenticated, if not, it redirects to Twitter and gets user to Authenticate.

The Controller also has an action method that returns a JSON array of last twenty tweets for the Authenticated user. This is invoked by Angular JS. Today we will look at modularizing our code further and understand a few concepts of how code is structured in AngularJS.

We start off by opening the existing solution (zip download from GitHub) in Visual Studio.

The Markup

We start off with the following markup.

The Script

Our AngularJS script is a tardy 13 lines of code including braces.



So now that we’ve had a look at the code that we are starting with, lets’ jump into our agenda for the day.

Modules in AngularJS

Modules are a way in AngularJS to organize and structure code. It is in an oblique way similar to Namespaces in C#, but Modules are more than passive naming constructs.

Declaring a Module

The syntax for creating a Module is as follows:



Notice the empty array parameter. This is actually an array of resources (we’ll see what are resources shortly), however if you don’t have any resources to pass, you need to pass an empty array. Missing out on the empty array may result in ‘undesired’ results.

As mentioned, Modules are like namespace so to add your Controller to the Module instead of having the controller floating around in JavaScript like in our previous example, we update the Controller to be a function in our module as follows:



Note, for better context, I’ve renamed the controller from IndexController to TimelineController because it is essentially showing Twitter’s Timeline.

Using the Modules in your View

Now that the Module has been declared, our Controller is no longer ‘visible’ to the Angular directly. So if we run the application as is, we’ll get errors on our Developer Console saying the Controller was not found.

To hookup the Module, we need to specify it in the ng-app attribute. This tells Angular which module to use for a given section on our page.

Since we changed the name of the Controller, we go ahead and change that as well. Our updated markup is as follows:



If we run the app now, things should work fine.

Next we look at defining a service which is again, more of code restructuring than new application features.

You first AngularJS Service

Services in AngularJS are simply reusable bits of code aiming to help make your app linear and more testable.

Declaring a Service

You can create Services in Angular using either the factory method or the service method provided by Angular. The Factory method returns a simple object, whereas the Service method returns a function. To start off with we’ll use the Factory method and declare our service as follows:



Notice that we have passed $http service into our TwitterService and Angular injects it for us at runtime.

Using a Service

To use it, we simply ‘ask’ for it in our Controller function and Angular simply injects it for us. Now instead of calling the $http service directly we call our TwitterService and request for the timeline. This still returns a promise so we continue to use the success completion method to bind our tweets.



Neat, another bit of code restructuring making our code more granular as we go along.

The Angular $Resource Provider

The Angular Resource provider is a plugin that can be used to further abstract and modularize our code. But first up, the Resource provider is in a separate JavaScript file angular-resource.js. So we’ve to add a reference to it to our markup.

Using the $Resource Provider

Next we tell our Module that it needs to use the Resource provider. We do that by passing ngResource, the name of the provider, in the array or resources that we had left empty earlier.



Next we update our service to use the resource provider instead of $http directly.



This change may confuse you. We were using $http.get(…) and now we are directly using $resource(…). How does that work? Well, from the Description provided in the documentation of AngularJS.

A factory which creates a resource object that lets you interact with RESTful server-side data sources. The returned resource object has action methods which provide high-level behaviors without the need to interact with the low level $http service.

So basically it is a helper around the $http service and internally provides Get, Save, Query, Delete functions.

We’ll use the query method in our controller to get our timeline back. Notice now we no longer have to wait for a promise to return. The trick here is Angular returns an empty promise when the query is fired, and when it returns it internally updates the original promise with array of objects that were returned. Since we are using data binding the UI updates itself appropriately.



Run the Application and we see the familiar response with a set of 20 latest tweets from our timeline.

Conclusion

With this we conclude our code restructuring for the day. We learnt how to Modularize code in Angular using Modules, created and used a custom service, finally we took a quick look at the $Resource provider in Angular.

Next step involves using the Resource provider to perform other actions like POSTing data to our server to send new Tweets.

Download the entire source code the article (Github)