Know MVC? It's Easy to Transition to AngularJS

It true that Angular has a huge learning curve.  So does every full-fledged development framework.

If the Enterprise is to adopt Angular, can it leverage existing skills?

Fortunately, the answer is YES!  If your firm has MVC architectural skills, and if you follow the patterns with some rigor, you can get productivity and results in no time .. if you keep the discipline!

Let's take a look at side by side code in .NET C# and AngularJS ... for the common patterns in an MVC project.  We won't justify each at this point.  We'll just show how easy the transition can be.

---

Name spacing

Name spaced modules in Angular allow us to ensure we inject the right code, and allow for easy mocking in tests.

C# 

AngularJS

If your code base is going to get large, you MUST namespace. Namespacing also allows us to do some very slick mocking. Just do it. Stop arguing!

---

Views, Partial Views

Angular and Razor bindings are very similar.  Angular has the advantage that event binding is part of the language.

.NET Razor

AngularJS

This should be a simple transition for the MVC HTML designer. Expressions in Angular, the moustache syntax, can get complex. Just don't do it and yoru code will be better.

---

Controllers

Controllers in Angular have to define their routing behavior. ui.routing states are used here.

.NET MVC

AngularJS

Ok, this doesn't translate very smoothly. MVC routes are defined by convention, with the pattern matching set in the config section. But, we like to keep our controllers very lean and simple, so the transition is simple.

---

UI Components

In ASP.NET forms, they are controls; in MVC, HTMLHelpers.  In Angular, they are directives.

.NET MVC

  And to use it, we have a clumsy syntax ....

AngularJS

  A far simpler, natural extension to HTML is the result ...
You have to admit that the natural looking "DOM" element >custom-text-box is far better than the scribbles in Razor!

---

Models

Most of your logic should be in models.  You should use models.  Don't make up excuses for not using them.  They contain your logic, local properties, etc.  Test 100% of the code and you will have high quality systems.  If you can write C# models, you can write and use Angular models ... so no excuses!!!

.NET MVC

AngularJS

OMG! Know C-sharp? You know Angular!

---

Services

Persist your models through Services.  These again look very similar.  Angular is async, so we have to wait for the action to complete (especially if it is an HTTP action).  Again -- almost identical.

.NET MVC

AngularJS

Almost identical again! Remember that JavaScript is asynchronous, so you'll have to get the devs to learn about promises. No big deal.

---

Dependency Injection (DI)

DI allows us to test each module independently.  If you designed .NET MVC code properly, you used it.  Angular expects it.

.NET MVC

AngularJS

In Angular, you inject by adding the dependency in the module definition. Like in MVC, this makes our service HIGHLY testable!

---

Code Documentation

IDEs can give you intellisense and nice little books that describe your code.  At the very least, you should tell future developers what the objects are they you consume and produce.  Angular uses jsdocs.

.NET MVC

AngularJS

I love code that is documented in this way. Describe types and make it understood to those who modify it later.

---

Summary

We'll go into each part of the pattern in future posts.  the bottom line -- if your Enterprise has MVC design skills, those architects can easily transition and build reliable, testable Angular apps .. and produce results at the same pace as an MVC project.