What is AngularJS? An introduction to AngularJS.

What is AngularJS?

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 id="”input-data”" type="”text”" /> Code: document.getElementById(“input-data”).value

In Angular:-

HTML : <input type="“text”" /> 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 structure
• You 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.

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

AngularJS Features:-

Angular has the following key features which makes it one of the powerful frameworks in the market.

1. MVC – The framework is built on the famous concept of MVC (Model-View-Controller). This is a design pattern used in all modern day web applications. This pattern is based on splitting the business logic layer, the data layer, and presentation layer into separate sections. The division into different sections is done so that each one could be managed more easily.

2. Data Model Binding – You don't need to write special code to bind data to the HTML controls. This can be done by Angular by just adding a few snippets of code.

3. Writing less code – When carrying out DOM manipulation a lot of JavaScript was required to be written to design any application. But with Angular, you will be amazed with the lesser amount of code you need to write for DOM manipulation.

4. Unit Testing ready – The designers at Google not only developed Angular but also developed a testing framework called "Karma" which helps in designing unit tests for AngularJS applications.

AngularJS Architecture:-

Angular.js follows the MVC architecture, the diagram of the MVC framework as shown below. 

                                          Angularjs Architecture Diagram

• The Controller represents the layer that has the business logic. User events trigger the functions which are stored inside your controller. The user events are part of the controller.

• Views are used to represent the presentation layer which is provided to the end users

• Models are used to represent your data. The data in your model can be as simple as just having primitive declarations. For example, if you are maintaining a student application, your data model could just have a student id and a name. Or it can also be complex by having a structured data model. If you are maintaining a car ownership application, you can have structures to define the vehicle itself in terms of its engine capacity, seating capacity, etc.
AngularJS Advantages:-
• Since it's an open source framework, you can expect the number of errors or issues to be minimal.

• Two-way binding – Angular.js keeps the data and presentation layer in sync. Now you don't need to write additional JavaScript code to keep the data in your HTML code and your data later in sync. Angular.js will automatically do this for you. You just need to specify which control is bound to which part of your model.

• Routing – Angular can take care of routing which means moving from one view to another. This is the key fundamental of single page applications; wherein you can move to different functionalities in your web application based on user interaction but still stay on the same page.

• Angular supports testing, both Unit Testing, and Integration Testing.

• It extends HTML by providing its own elements called directives. At a high level, directives are markers on a DOM element (such as an attribute, element name, and comment or CSS class) that tell AngularJS's HTML compiler to attach a specified behavior to that DOM element. These directives help in extending the functionality of existing HTML elements to give more power to your web application.
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.