As with our demos we’ll walk with a code sample to see how the AngularJS features are used.
The Sample AngularJS Application - RecapWe’ll continue where we left off with the previous ASP.NET MVC sample where we built a Twitter reader.
The ASP.NET MVC ControllerTo 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.
We start off by opening the existing solution (zip download from GitHub) in Visual Studio.
The MarkupWe start off with the following markup.
The ScriptOur 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 AngularJSModules 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 ModuleThe 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.
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 ViewNow 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 ServiceServices in AngularJS are simply reusable bits of code aiming to help make your app linear and more testable.
Declaring a ServiceYou 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 ServiceTo 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.
Using the $Resource ProviderNext 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
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.
ConclusionWith 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)