Why Would a Back-End Programmer Love Angular?

I still remember when I started working on my first Angular project, which also included Web Api 2.0 for .NET framework. At the very beginning, of course as a strictly .NET programmer, I was skeptical about it, but I changed my mind really quickly. Below you will find out why.

At the end of this post you will find a simple example of an application built using Angular framework.

What is Angular?

In short, Angular is the framework which allows you to create scalable and very efficient web applications. Angular is based on JavaScript and HTML.

How is Angular built?

And here’s where we get closer to answering the question which is the title of this article. Version 1.0 of Angular, also known as AngularJS (created for Single Page Applications but also multipage applications), is very similar to MVC (Model-View-Controller). MVC supports best practices in architecture and writing clean business code and is well-known throughout the IT industry as the ancestor of the architectonic patterns.

Similarly to MVC, the architectonic version of Angular which I mentioned above consists of controllers, models and views. Of course, just as with MVC, we can build web applications in a more complex way, which is also advisable, for example by delegation app logic to the routes, managers and other files – but this is not necessary for understanding similarities to the MVC pattern, which is the aim of this post, after all.

Controllers

The JavaScript controller in Angular, developed within the module, which corresponds to MVC’s controller. The module includes controllers, services and other app files, and is not often declared within the package of functionalities. Personally, when I had to create a functionalities package concerning one domain model, let’s say a package of functionalities concerning displaying data, editing it, a couple of views and communication with APIs, then I would have declared one module.

Better and easier management of the abovementioned modules can be achieved with so-called bundling, which is a mechanism available in JavaScript for managing modules, packages, resources and import/export.

Models

In AngularJS MVC models have their equivalents, which are also responsible for delivering application logic. In some cases I would say that if Angular is applied for multipage applications purposes, the role of an equivalent of the MVC’s model is played by services, so-called recipes, but for some programmers it can be controversial. Recipes have various types and classes, but in my entire career I’ve never used any of them directly, like so-called value recipes or factory recipes. Instead I use more common service recipes, which can replace the two previously mentioned recipes; most importantly they follow the Constructor Injection design pattern, instead of Singleton. (I hope to write a blog post or series of posts concerning design patterns).

Views

Similarly to the MVC pattern or any other pattern concerning web applications, we use views responsible for delivering the user interface within our application. In the case of MVC, we mostly use model-type views, which leads to the use of the Razor engine. For those who have not worked with it, the Razor engine, which can be found in ASP.NET MVC from version 3.0, allows users to introduce native objects of a particular language, its syntax and particular model objects into HTML syntax. In the case of Angular, views are mostly created with pure HTML syntax, and the equivalent of the Razor engine’s logic are directives in Angular. Directives are a kind of instructions and procedures – they are “injected” directly into HTML elements.

The most important directives used in Angular are ng-model (passing objects and its values) and ng-repeat (possibility of iterating objects within arrays or lists). One could build plenty of user interfaces using only these two directives.

Below I have given an example of an application based on Angular (not using the service). You can import the code snippets below into particular code templates available within Web template options in Visual Studio. In the 2017 version, the following may be found:

• For Module -> AngularJs Module
• For controller -> AngularJs Controller or AngularJs Controller using $scope
• For View -> standard HTML Page file template

Module:

angular.module(‘angularModule’, []);

Controller:

angular.module(‘angularModule’).controller(“angularController”, function ($scope) {

   $scope.angularTestObject = “test”;

});

View:
<!DOCTYPE html>

<html>

<body>

   <div ng-app=”angularModule” ng-controller=”angularController”>

       <p>angularTestObject’s value equals:</p>{{ angularTestObject }}

   </div>

</body>

</html>