What is AngularJS

General description about AngularJS, the Javascript framework, as well as the main components it has and the concepts that we must know before getting hands on the code.

AngularJS is Javascript. It is an open source project, made in Javascript that contains a set of useful libraries for the development of web applications and proposes a series of design patterns to carry them out. In a few words, it is what is known as a development framework, in this case on the Javascript language with client-side programming.

You can find the AngularJS project on its own website: . Being an open source project, anyone with a bit of curiosity can take a closer look and see how it has been written, they even allow collaborations from developers who want to contribute things.

Note: This article is a transcript of Alberto Basalo’s presentation at .com / EscuelaIT that was broadcast openly by webinar. At the bottom of the text you will find a video of this talk. We have already published the previous block of this presentation in the article .

HTML improvements

This Javascript is intended for programmers to improve the HTML they make. That they can produce an HTML that, in a declarative way, generates applications that are easy to understand even for someone who does not have deep knowledge of computers. The goal is to produce a highly semantic HTML, that is, when you read it you clearly understand what it does or what each thing is for.

Logically, AngularJS comes loaded with all the tools that the creators offer so that developers are able to create that rich HTML. The keyword that allows such declarative HTML in AngularJS is “directive”, which is nothing more than Javascript code that improves the HTML. You can use the one that comes with AngularJS and the one made by third-party developers, since many people are contributing small projects -independent of the framework itself- to enrich the panorama of available directives. Up to this point you will be a “directive consumer”, and finally as you gain experience you will be able to become a “directive producer”, enriching yourself with the tools to improve your own HTML.

Promotes suitable design patterns for web applications

Angular promotes and uses software design patterns. Specifically, it implements what is called MVC, although in a very widespread variant in the world of Javascript that we will discuss in more detail later. Basically, these patterns mark the separation of the code from the programs depending on their responsibility. This allows the application logic to be distributed by layers, which is very suitable for business applications and for SPA (Single Page Application) applications.

Note: SPAs, or “Single Page Applications”, are websites where users perceive an experience similar to that of desktop applications. In this type of sites the page is not reloaded, there is no navigation from one page to another totally different, but rather the “views” are exchanged. Technically we could say that, when interacting with the site, the browser does not reload all the content, but only views within the same page.

AngularJS from a bird’s eye view

Now we are going to take a brief tour to name and describe with a few small notes those elements and concepts that you are going to find within AngularJS.

First we have to talk about the great pattern that is used in Angular, the familiar Model, View, Controller.

• Views: It will be the HTML and everything that represents data or information.
• Controllers: They will be in charge of the logic of the application and especially of the calls “Factories” and “Services” to move data against servers or local memory in HTML5.
• View model: In Angular, the “Model” is something more than what is usually understood when they talk about traditional MVC, that is, the views are something more than the data model. As an example, in business applications where you have to manage the accounting of a company, the model would be the accounting movements. But in a specific screen of your application, you may have to see other things, in addition to the accounting movement, such as the name of the users, the permissions they have, if they can see the data, edit it, etc. All this information, which is useful for the programmer but which is not part of the business model, is what we call the “Scope”, which is the model in Angular.

Note: For this reason why in AngularJS you have slightly different models, some authors say that the pattern used by the framework is the MVVM Model-View-View-Model. In short, the view model is the data plus any additional data you need to display it properly.

In addition to the main pattern, described so far, we have the modules:

Modules: The way that AngularJS is going to propose so that we as developers are more and more organized, that we have no excuses for not making good code, to avoid spaghetti code, gigantic files with thousands of lines of code, etc. We can split things up, avoid the hell of global variables in Javascript, etc. With the modules we can make well-made applications, of which a programmer can feel proud and, above all, that facilitate their development and maintenance.

Two “worlds” in AngularJS

Now we have to examine AngularJS from another perspective, which makes it easier for us to understand some common concepts and practices in development. To do this we divide the framework landscape into two areas.

• Part of the HTML: It is the declarative part, with the views, as well as the directives and filters that AngularJS provides us, as well as those that we do ourselves or third-party developers.
• Pure Javascript part: What will be the controllers, factories and services.

It is important to note here, although this point will be stressed again, that the DOM should never, ever be accessed from the Javascript part. It is a mortal sin since that part must be programmed in an agnostic way, without taking into account the way in which the data is going to be presented.

In the middle we will have the so-called Scope, which as we said represents the model in Angular. In short, it is nothing more than a Javascript object which you can extend by creating properties that can be data or functions. It helps us to communicate from the HTML part to the Javascript part and vice versa. It is where the “magic” occurs in Angular and although this is not entirely true, as an explanation for a better understanding, we can say that AngularJS is going to subscribe to the changes that occur in the scope to update the view. . And vice versa, it will subscribe to the changes that occur in the view and with that it will update the scope.

In the next article we will start with code, so the impatient will already have their wishes come true.

You can watch the video of this part of the presentation on What is AngularJS.