Getting started with ASP.NET API with MongoLab and Angularjs part 4

In my previous blogpost we created a Web API with a Mongodb backend. Now we'll create a client application that consumes the API with a JavaScript framework.
That is obviously the way to go nowadays.

There is a plethora of Javascript frameworks to use and Angular.js is in fact the first one that I've tried, because it gets a lot of traction lately.

What are we creating?

Let's try to make a single page application (SPA) where people can enter and lookup their contacts. Instead of the classic addressbooks, it is possible to enter Facebook pages, Twitter accounts and so on.
To make sure it looks nice we will be using Twitter Bootstrap.

Getting ready for Angular

First get the Angular.js and Twitter Bootstrap through the Nuget Package Manager Console:

Install-Package angularjs
Install-Package bootstrap

Then, create a folder named 'app' with the following subfolders:
-app
---css
---fonts
---img
---js
---lib

Then drag the css and angular etc to this new folder structure, like so:

2013-11-02 12_02_23-AddressBook - Microsoft Visual Studio

In case you are wondering why I am doing this. When I first started to look at Angular, I used Angular-seed as a boilerplate. I think that is a good startingpoint for organizing code.
Further, the Web API has nothing to do with the client code I'm going to write. I will not be using ASP.NET MVC routing and views with Razor, instead I will be using the routing and the controllers from the Angular framework. So that explains the separate 'app' folder in the project.

We need to configure the AddressBook application to start in the app folder though:

2013-11-03 09_45_19-AddressBook - Microsoft Visual Studio

I've also changed to port to 8000 so it's easier to remember.

A little bit of Angular background info

This is a good introduction to Angular by Dan Wahlin. Be sure to check it out.

Angular uses modules to specify how a web application should be bootstrapped.
Modules break an application up into functional sections. For example, services, directives, controllers and filters that are specific to a particular application can be added to the application module.
Ehm.. What does that even mean!?
Well, controllers for front-end development serve a very similar purpose as controllers we know from ASP.NET MVC. Controllers present data to the views, via a scope. And Angular services are singletons objects or functions that carry out specific tasks common to web apps. A typical task for a service would be fetching data from a server.

At Thruzero I found a very good explanation of the Angular architecture:
Angular architecture

Getting started

In /app/js create a javascript file named app.js.
I will be adding all the javascript in there because this app is very trivial. Later I will break it up in several files (javascript files for controllers, for services etc.).

Let's first declare the module:

//app/js/app.js:
var addressbookModule = angular.module('addressbookModule',[])

The '[ ]' array thing is very important, because later we can inject other modules into this array.

Next we can add a controller to the addressbookModule. The first argument is the controller name,'WelcomeController' and the second argument is a function, in which we pass in a $scope.
The scope is the 'glue' between the controller and the view. We can give the scope properties in the controller which will be presented to the view.

//app/js/app.js:
var addressbookModule = angular.module('addressbookModule',[])

addressbookModule.controller('WelcomeController', function ($scope) {
    $scope.title = "Welcome to your AddressBook";
 });

Finally, this is the view (/app/index.html):





    AddressBook





{{title}}

This is the result:

2013-11-02 13_32_13-Mozilla Firefox

What we just did:

  • We wired up Angularjs in our application by adding angular.js to our html file
  • We created a module named AddressBookModule as an Angular module.
  • Now we can chain Angular functionality to this module (routing, services, controllers etc).
  • We added a Controller.

It took a while for me to grasp all this. If you're coming from a C# world the whole Javascript syntax is already confusing enough. All these 'function() { }' curly braces, hooks and semicolons confuse me. And if you forget to put a }); well then it just doesn't work.
You can have anonymous functions with 30 miles of arguments!

The solution is: practice, practice, practice. Make stupid mistakes and blog about it.

Next time we'll add some CRUD.

2 Replies to “Getting started with ASP.NET API with MongoLab and Angularjs part 4”

  • Thanks for posting this, there is a lot of good content here. I agree with you about this being a bit tough for a C# developer, I miss my classes and interfaces… : )

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.