An introduction to AngularJS

In this post, I am going to provide a simple introduction to AngularJS. We are going to talk about its components, when to use it, and what makes it different.

First, it is important to explain some basic concepts.

What is scope?

Scope is the context where we define for example our variables and functions, and within it, we can access everything we have mentioned.

Here is an example to analyze exactly what happens in it.

Why can the function access “a” but the general scope cannot access “b”?

an introduction to angularjs

All this is due to a concept called “Closure”. “Closure” states that a function can access all the elements that are in the scope where it was defined.

Let’s think of it as layers: each existing layer adds a new depth level and you can access the information stored in the upper level, but not the one below.

What is Angular?

Angular is a structural framework for dynamic web applications, made in pure JavaScript.

What does it mean to be a structural framework?

The fact that Angular is a structural framework allows us to use HTML as a template language, and extend its syntax to express the components of the application in a cleaner and simpler way.

As an example, let’s see this case, where we obtain the value of an entry:

In JavaScript:

HTML:<input type=”text” id=”input-data”>

Code: document.getElementById(“input-data”).value

In Angular:

HTML : <input type = “text” ng-model = “inputData”>

Code : $scope.inputData; When should you use AngularJS?

While Angular has received a lot of attention, it’s still important to decide whether it makes sense to use it for your web application. As a result, it’s important to keep in mind the conditions of the application that we want to make.

It is convenient to use Angular when making an application that fits the following characteristics:

It is a large application

You need a good structureYou need robustness

It is complex

Structure:

It uses MVC, where the model communicates with the database, and so the variables defined in the controller are modified and the view is updated.

What is a controller?

This is one of the tools that Angular provides in the defined context (scope) to work later.

model-view-controller

When we define a controller, a new scope is created and can only access the variables we have chosen.

The driver is not used to:

Manipulate the DOM

Format the entries (forms are used for this purpose)

Filter an output (filters are used for this purpose)

Share code among components (services are used for this purpose)

Manage the life cycle of the components

What is a module?

A module is a container for controllers, services, filters, directives. It gives structure to your application, since it represents different parts of it.

A module can be used again and, in any order, since they can slow down the execution time. It is also excellent for unit tests because you have to refer to a single module.

What is the view?

It is what the user sees, it shows the functionality of our application.

What is a directive?

A directive transforms the DOM elements to add functionality. Angular has its own directives from the beginning.

What is a service?

It is a solution for communication to the database and the exchange of information among the different components of the application.

They are singleton, which means that instances are created only when necessary. When the URL changes in the browser, all the controllers associated with that URL disappear, but not a service, so the data remains.

Types of service

For this, I am going to refer to an excellent blog post (AngularJS: Factory vs Service vs Provider) that explains things in an easy way and talks about two of the three types. (I recommend reading the whole article)

Factory: It creates an object, adds properties to it and then returns that same object. When you pass this service to your controller, those properties in the object will now be available in that controller through your factory.

Service: An instance is created with the keyword ‘new’. With this, you will add properties to ‘this’ and the service will return ‘this’. When you pass the service to your controller, those properties that are in ‘this’ will now be available in that controller through your service.

Ok that’s it for now! I hope you learnt something from this post. Please share it, I will be writing more in the future, so stay tuned.[Source]-https://www.belatrixsf.com/blog/an-introduction-to-angularjs/

62 Hours AngularJs Training includes MongoDB, JavaScript, A62 angularJS Training, MongoDB, Node JS and live Project Development. Demo Mean Stack Training available.