Angular is a framework which has been on the IT market for some time now. New versions have continued to appear, as it is commonly used in projects. But programmers new to Angular mostly think of it only as a Front-End framework, which is not quite the case in reality.

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>

 

Author:
.NET Developer

.NET Developer, he has been working in the profession for 2 years. His areas of specialization are .NET, Web Services and both Back-End and Front-End solutions for web applications. Offstage he is passionate about British English language, books and travelling. Author of the blog: http://nomesscode.pl/

Comment

CONTACT US!

Would you like to learn more about the possibilities of cooperation? Do you have a question? Write to us!

    I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for commercial purposes.
    I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for marketing purposes.
    I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for recruitment purposes.
    I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for future recruitment purposes.
    I have been informed by JCommerce Sp. z o.o., 3 Ks. Piotra Sciegiennego St. 40-114 Katowice – the personal data controller – that: - The provision of the aforementioned personal data is voluntary but essential for commercial purposes if I have chosen a request for proposal, or recruitment purposes, if I have chosen the remaining options;
    - I have the right to access the content of my data, including to receive copies of it and correct it, delete it and limit the processing of it, as well as the right to transfer it, the right to object to the processing of it, and the right to withdraw my consent at any time. However, the withdrawal of my consent shall not affect the lawfulness of processing carried out on the basis of the consent in question prior to its withdrawal;
    - A statement of withdrawal of my consent to the processing of personal data should be submitted to the headquarters of JCommerce Sp. z o.o. or sent to the following e-mail address: zgody@jcommerce.pl. The withdrawal of consent to the processing of personal data shall result in the inability to fulfil the aforementioned processing purposes;
    - The personal data provided shall be shared by JCommerce Sp. z o.o. with the company’s authorised employees and individuals collaborating with JC under civil-law contracts, who are involved in the implementation of the purpose of the processing;
    - The data provided shall be processed on the basis of the relevant provisions of Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of natural persons with regard to the processing of personal data and on the free movement of such data, and repealing Directive 95/46/EC (General Data Protection Regulation), ‘GDPR’;
    - Should you have any questions regarding the protection of your personal data, please contact us by e-mail: odo@jcommerce.pl;
    - The personal data provided shall be processed for the purpose for which it was supplied, or until I express my objection in this regard. In the event of filing an objection, JCommerce Sp. z o.o. shall no longer process my personal data for the aforementioned purposes, unless it can demonstrate that there are valid and legally justified grounds overriding my interests, rights and freedoms or my data is necessary to establish, pursue or defend a claim, if any;
    - I have the right to file a complaint to the supervisory authority if I consider that the processing of the aforementioned personal data violates the provisions of the General Data Protection Regulation of 27 April 2016.
    I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for commercial purposes.
    I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for marketing purposes.
    I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for recruitment purposes.
    I hereby agree that JCommerce Sp. z o.o. shall process my personal data (hereinafter ‘personal data’), such as my name, surname, e-mail address, telephone number and company name, for future recruitment purposes.
    I have been informed by JCommerce Sp. z o.o., 3 Ks. Piotra Sciegiennego St. 40-114 Katowice – the personal data controller – that: - The provision of the aforementioned personal data is voluntary but essential for commercial purposes if I have chosen a request for proposal, or recruitment purposes, if I have chosen the remaining options;
    - I have the right to access the content of my data, including to receive copies of it and correct it, delete it and limit the processing of it, as well as the right to transfer it, the right to object to the processing of it, and the right to withdraw my consent at any time. However, the withdrawal of my consent shall not affect the lawfulness of processing carried out on the basis of the consent in question prior to its withdrawal;
    - A statement of withdrawal of my consent to the processing of personal data should be submitted to the headquarters of JCommerce Sp. z o.o. or sent to the following e-mail address: zgody@jcommerce.pl. The withdrawal of consent to the processing of personal data shall result in the inability to fulfil the aforementioned processing purposes;
    - The personal data provided shall be shared by JCommerce Sp. z o.o. with the company’s authorised employees and individuals collaborating with JC under civil-law contracts, who are involved in the implementation of the purpose of the processing;
    - The data provided shall be processed on the basis of the relevant provisions of Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016 on the protection of natural persons with regard to the processing of personal data and on the free movement of such data, and repealing Directive 95/46/EC (General Data Protection Regulation), ‘GDPR’;
    - Should you have any questions regarding the protection of your personal data, please contact us by e-mail: odo@jcommerce.pl;
    - The personal data provided shall be processed for the purpose for which it was supplied, or until I express my objection in this regard. In the event of filing an objection, JCommerce Sp. z o.o. shall no longer process my personal data for the aforementioned purposes, unless it can demonstrate that there are valid and legally justified grounds overriding my interests, rights and freedoms or my data is necessary to establish, pursue or defend a claim, if any;
    - I have the right to file a complaint to the supervisory authority if I consider that the processing of the aforementioned personal data violates the provisions of the General Data Protection Regulation of 27 April 2016.