Typescript is used to write even Angular. As a result, having some experience with Typescript is necessary before starting with Angular. Additionally, given Typescript is the language used to create Angular, it makes sense that we would use Typescript to create custom code. Here is the roadmap for the Angular Series.

What is Angularjs?

AngularJS was a JavaScript-based open-source front-end web framework for single-page apps. Google, along with a number of other people and corporations, largely maintained it. In an effort to speed up the development and testing of such apps, it supplied a framework for client-side MVC and MVVM architectures together with widely used web applications and progressive web application components.

Basic Building blocks of AngularJs

To create an AngularJS page or application, the following basic AngularJS components must be used:

• Module
• Controllers
• Directives
• Data Binding
• Directives
• Services
• Dependency injection

Module:

An Angular module is a basic part of an application. It acts as a container for a number of interconnected components, such as controllers, services, filters, directives, etc. You can think of a module as a group of components and services that your application's business domain employs to provide certain functionality.

A module is required for AngularJS in order to start the application. It functions as the app's home screen when launched. All components of a small program can be located in one module, sometimes known as the root module, even if larger apps may contain more than one module.

The AngularJS function is used to create a module. 

Controllers:

• An AngularJS controller acts as a bridge between a view and a module. It manages the data in the Angular application. Data and business logic are both present.
• The Object() [native code] method of a Javascript object is used to define controllers in AngularJS. These controllers are standard Javascript objects.
• Controllers are used to adding the initial state and any further actions to the $scope object. As the name implies, an Angular $scope is an object that holds the scope of a whole model, in this example, a controller.
• The ng-controller command in Angular creates a new controller object and a new child scope named "$scope" that can be used to connect a controller to the DOM.

Directives:

We use the new syntax, elements, and features in Angular that are not found in conventional HTML. These are referred to as directions. A directive may be an attribute, element name, comment, or CSS class. They merely make basic HTML more advanced.

With the ng-prefix, we have a variety of built-in Angular directives that provide our application with certain features. You also have the ability to design your own directives using AngularJS.

Some of the instructions already there are:

• ng-app: This ng-app directive serves as the foundation of an AngularJS application. This directive starts an AngularJS application when it is launched.
• ng-controller: The ng-controller directive specifies the controller object for an application. It provides a controller object that may be used to access the view's data.
• ng-model: The ng-model directive connects application data to HTML controls' values (such as input, text area, select, and checkbox). It also serves as a status indicator for application data and a type checker for application data.
• ng-init: The ng-init directive specifies the initial values for an application. For instance, if you wish to give your application a default value, this directive can be useful.

You can use this command by using:

• Element Name
• Attribute 
• Class
• Comment

Data Binding:

A technique for automatically syncing data between the model and the view is data binding in AngularJS. The view is promptly updated when data in the model changes, and vice versa when data in the view changes.

The two types of data binding are as follows.

• One-Way Data Binding
• Two-Way Data Binding

One-Way Data Binding

This form of data coupling is frequently observed in classical systems. A typical HTML templating system with one-way data binding is used by most applications. They simultaneously compile the appropriate code and the HTML template to create the view. There is a figure below.

As a result, any modifications to the model do not immediately appear in the view, and vice versa.

Two-Way Data Binding

AngularJS offers amazing performance and resolutions while also making life easier for developers.

The view is produced by first compiling the angularJS template on the browser, as seen in the figure below. After compilation, if the view is changed in any way, the model is likewise updated. Model changes are promptly reflected in the view, just like how changes in the model are.

Directives :

Advisory on Components Use of the element as a directive is available. To connect with the component's parent HTML elements, each component has an Output option.

Structural directives allow you to edit the document object model (DOM) by adding or relocating nodes using input, much like *ngFor and *ngIf.

An attribute directive aids in modifying the appearance or adding behavior to a specific element, similar to the ng-model directive which offers two-way data binding.

Services:

Services merely make service reuse easier. Other components will inevitably be added as the project expands, and those other components will also require access to data. As a result, only one singleton data service is created whenever you copy and paste code.

Dependency Injection :

Utilize dependency injection to inject the necessary dependencies for a given component or service during runtime, giving the framework and your application flexibility, extensibility, and testability.

We must explicitly instruct Angular to create an instance of Service and provide it to our AppComponent. Dependency Injection is the name given to it. As a result, we must instruct Angular to include the dependency for this component in its native code function Object().