Angular was introduced to create Single Page applications. This framework brings structure and consistency to web applications and provides excellent scalability and maintainability. 

Angular is an open-source, JavaScript framework wholly written in TypeScript. It uses HTML's syntax to express your application's components clearly. 

Angular is a TypeScript-based open-source front-end platform that makes it easy to build applications with in web/mobile/desktop. The major features of this framework such as declarative templates, dependency injection, end to end tooling, etc.

TypeScript is a programming language developed and maintained by Microsoft.

It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for the development of large applications and transcompiles to JavaScript.

TypeScript is a superset of JavaScript that offers excellent consistency.

It is highly recommended, as it provides some syntactic sugar and makes the code base more comfortable to understand and maintain. Ultimately, TypeScript code compiles down to JavaScript that can run efficiently in any environment. 

Web developers used VanillaJS and jQuery to develop dynamic websites but, as the logic of one's website grew, the code became more and more tedious to maintain.

For applications that use complex logic, developers had to put in extra effort to maintain separation of concerns for the app. Also, jQuery did not provide facilities for data handling across views.

For tackling the above problems, client-side frameworks like Angular came into the picture, which made life easier for the developers by handling separation of concerns and dividing code into smaller bits of information.

It allow one to develop advanced web applications like Single-Page-Application.

• Angular CLI
• Cross-Platform App Development
• Animation Support
• Code Splitting
• Code Generation
• Popular Code Editors and IDEs
• Templates
• Accessibility Applications
• Testing

Every Angular app consists of a file named angular.json. This file will contain all the configurations of the app. While building the app, the builder looks at this file to find the entry point of the application.

The main.ts file creates a browser environment for the application to run, and, along with this, it also calls a function called bootstrapModule, which bootstraps the application.

The AppModule is declared in the app.module.ts file. This module contains declarations of all the components.

Component is defined in app.component.ts file. This file interacts with the webpage and serves data to it.

Each component is declared with three properties:
Selector - used for accessing the component
Template/TemplateURL - contains HTML of the component
StylesURL - contains component-specific stylesheets

The HTML template of the root component is displayed inside the <app-root> tags.

AngularJS	Angular
Based on controllers concept.	This is a component based UI approach.
It is based on MVC architecture.	This is based on Service/Controller.
Difficulty in SEO friendly application development.	Ease to create SEO friendly applications.
It uses JavaScript to build the application.	Introduced the TypeScript to write the application.
Not a mobile friendly framework.	Developed considering mobile platform.

• Declarative templates
• End to end tooling
• Dependency injection
• Cross-Platform
• High Speed & Optimum Performance
• Less Code Framework
• Angular CLI (Command Line Interface)
• Efficient Two-Way Data Binding
• MVC Architecture
• Virtual Scrolling
• TypeScript

• Features that are provided out of the box - Angular provides a number of built-in features like,routing, state management, rxjs library and http servicesstraight out of the box. This means that one does not need tolook for the above stated features separately. They are allprovided with angular.
• Declarative UI - Angular uses HTML to render the UI of an application. HTML isa declarative language and is much easier to use than JavaScript.
• Long-term Google support - Google announced Long-term support for Angular. This means that Google plans to stick with Angular and further scale up its ecosystem.

• Component: These are the basic building blocks of angular application to control HTML views.
• Templates: This represent the views of an Angular application.
• Modules: It is set of angular basic building blocks like component, directives, services etc. An application is divided into logical pieces and each piece of code is called as "module" which perform a single task.
• Metadata: This can be used to add more data to an Angular class.
• Services: It is used to create components which can be shared across the entire application.

Data binding is a phenomenon that allows any internet user to manipulate Web page elements using a Web browser.

It uses dynamic HTML and does not require complex scripting or programming. We use data binding in web pages that contain interactive components such as forms, calculators, tutorials, and games.

Angular uses the two-way binding. Any changes made to the user interface are reflected in the corresponding model state.

This allows the framework to connect the DOM to the Model data via the controller.

Single-page applications are web applications that load once with new features just being mere additions to the user interface.

It does not load new HTML pages to display the new page's content, instead generated dynamically.

This is made possible through JavaScript's ability to manipulate the DOM elements on the existing page itself.

A SPA approach is faster, thus providing a seamless user experience. 

The main purpose of using Angular is to create fast, dynamic and scalable web applications. We can create these applications very easily with Angular using components and directives.

It provides a platform for easy development of web-based applications and empowers the front end developers in curating cross-platform applications.

Angular was started as a SPA (Single-Page-Application) framework, and now it supports dynamic content based on different users through dependency injection.

Components are the most basic UI building block of an Angular app which formed a tree of Angular components.

These components are subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

ngOnChanges( ): This method is called whenever one or more input properties of the component changes. The hook receives a SimpleChanges object containing the previous and current values of the property.

ngOnInit( ): This hook gets called once, after the ngOnChanges hook. It initializes the component and sets the input properties of the component.

ngDoCheck( ): It gets called after ngOnChanges and ngOnInit and is used to detect and act on changes that cannot be detected by Angular. We can implement our change detection algorithm in this hook. 

ngAfterContentInit( ): It gets called after the first ngDoCheck hook. This hook responds after the content gets projected inside the component.

ngAfterContentChecked( ): It gets called after ngAfterContentInit and every subsequent ngDoCheck. It responds after the projected content is checked.

ngAfterViewInit( ): It responds after a component's view, or a child component's view is initialized.

ngAfterViewChecked( ): It gets called after ngAfterViewInit, and it responds after the component's view, or the child component's view is checked.

ngOnDestroy( ): It gets called just before Angular destroys the component. This hook can be used to clean up the code and detach event handlers.

The first and perhaps, the biggest difference is that Angular expressions allow us to write JavaScript in HTML which is not the case when it comes to JavaScript expressions.

Next, Angular expressions are evaluated against a local scope object whereas JavaScript expressions against global window object.

The difference which makes Angular expressions quite beneficial is the use of pipes. Angular uses pipes(called filters in AngularJS), which can be used to format data before displaying it. In contrast, JavaScript does not have the concept of pipes.

Component	Directive
Components are typically used to create UI widgets.	Directive is used to add behavior to an existing DOM element.
To register a component we use @Component meta-data annotation.	To register directives we use @Directive meta-data annotation.
Only one component can be present per DOM element.	Many directives can be used per DOM element.
@View decorator or templateurl/template are mandatory.	Directive doesn't use View.
Component is used to break up the application into smaller components.	Directive is use to design re-usable components.

In Angular, templates contain Angular-specific elements and attributes.

These are written with HTML and combined with information coming from the model and controller, which are further rendered to provide the user's dynamic view.

Dependency injection is an application design pattern that is implemented by Angular and forms the core concepts of Angular. 

Let us understand in a detailed manner. Dependencies in Angular are services which have a functionality.

Various components and directives in an application can need these functionalities of the service.

Angular provides a smooth mechanism by which these dependencies are injected into components and directives.

Modules are logical boundaries in your application and the application is divided into separate modules to separate the functionality of your application.

Lets take an example of app.module.ts root module declared with @NgModule.

Metadata is used to decorate a class so that it can configure the expected behavior of the class.

The metadata is represented by decorators.

In Angular, annotations are the "only" metadata set of the class using the Reflect Metadata library.

They are used to create an "annotation" array. On the other hand, decorators are the design patterns used for separating decoration or modification of a class without actually altering the original source code.

In Angular, AOT stands for Ahead-Of-Time compiler.

It is used to convert your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code.

By compiling the application during the build process provides a faster rendering in the browser.

Decorators are a design pattern or functions that define how Angular features work. They are used to make prior modifications to a class, service, or filter.

• Class Decorators
• Property Decorators
• Method Decorators
• Parameter Decorators

Model contains the structure of an entity. In simple terms it contains data of an object.

View is the visual layer of the application. It displays the data contained inside the Model. In angular terms, this will be the HTML template of a component.

ViewModel is an abstract layer of the application. A viewmodel handles the logic of the application. It manages the data of a model and displays it in the view.
View and ViewModel are connected with data-binding (two-way data-binding in this case). Any change in the view, the viewmodel takes a note and changes the appropriate data inside the model.

MVVM architecture consists of three parts:

1. Model
2. View
3. ViewModel

Angular CLI(Command Line Interface) is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules.

Better security: AOT provides better security because it compiles HTML templates and components into JavaScript files before they are served to the client. Because there are no templates to read and no risky client-side HTML or JavaScript evaluation, so the chances for injection attacks are very rare.

The Angular framework's download size is smaller: AOT facilitates you not to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so leaving it off reduces the application payload dramatically

Fewer asynchronous requests: The compiler is used to inline external HTML templates and CSS style sheets within the application JavaScript so, it eliminates separate AJAX requests for those source files.

The rendering is faster: When we use the AOT compiler, the browser gets a pre-compiled version of the application to download. Here, the browser loads executable code to render the application immediately, without waiting to compile the app first.

Detect template errors earlier: While using the AOT compiler, developers can easily detect and report template binding errors during the build step before users can see them.

Singleton objects in Angular that get instantiated only once during the lifetime of an application are called services. An Angular service contains methods that maintain the data throughout the life of an application.

The functions offered by an Angular service can be invoked from any Angular component, such as a controller or directive.

The primary intent of an Angular service is to organize as well as share business logic, models, or data and functions with various components of an Angular application.

In Angular, JIT stands for Just-in-Time compiler.

The JIT compiler provides a dynamic translation or run-time compilation, which provides a way of executing computer code that involves compilation during the execution of a program at run time rather than before execution.

• Dynamic applications do not always perform well
• Complex SPAs can be inconvenient and laggy to use due to their size
• Learning Angular requires a decent effort and time

Angular provides the $scope objects into a hierarchy that is typically used by views. This is called the scope hierarchy in Angular.

It has a root scope that can further contain one or several scopes called child scopes.

String interpolation in Angular refers to a special type of syntax that makes use of template expressions in order to display the component data.

These template expressions are enclosed within double curly braces i.e. {{ }}.

Pipes are simple functions designed to accept an input value, process, and return as an output, a transformed value in a more technical understanding. Angular supports several built-in pipes.

You can also create your own pipes.

1. Pipes are defined using the pipe “|” symbol. 
2. Pipes can be chained with other pipes.
3. Pipes can be provided with arguments by using the colon (:) sign

The AsyncPipe subscribes to an observable or promise and returns the latest value it has emitted. When a new value is emitted, the pipe marks the component to be checked for changes.

Lazy loading is one of the most powerful and useful concepts of Angular Routing.

It makes the web pages easy to download by downloading them in chunks instead of downloading everything in a big bundle.

Lazy loading facilitates asynchronously loading the feature module for routing whenever required using the property loadChildren.

Authentication means confirming user identities through credentials, while authorization refers to gathering access to the system.

In another word we can say that, Authentication check the user's identity and Authorization check users are authorized for this system or not.

Ex:
The user login credentials are passed to an authenticate API, which is present on the server. Post server-side validation of the credentials, a JWT is returned. The JWT has information or attributes regarding the current user. The user is then identified with the given JWT. This is called authentication.

Post logging-in successfully, different users have a different level of access. While some may access everything, access for others might be restricted to only some resources. The level of access is authorization.

Angular Router is a mechanism that facilitates users to navigate from one view to the next as users perform application tasks.

It follows the concept model of browser's application navigation.

Using below command, you can genereate class.

1. jQuery doesn’t offer deep linking routing though Angular supports it
2. Angular provides support for RESTful API while jQuery doesn’t
3. There is no form validation in jQuery whereas it is present in Angular
4. Angular has two-way data binding, jQuery does not

These pipes are pipes that use pure functions. As a result of this, a pure pipe doesn't use any internal state, and the output remains the same as long as the parameters passed stay the same.

Angular calls the pipe only when it detects a change in the parameters being passed.

• While JavaScript expressions support conditionals, exceptions, and loops, Angular expressions don’t
• Angular expressions support filters while JavaScript expressions do not
• It is possible to write Angular expressions inside the HTML tags. JavaScript expressions, contrarily, can’t be written inside the HTML tags

We use Angular ngFor directive in the template to display each item in the list.

NgModules are containers that reserve a block of code to an application domain or a workflow.

@NgModule takes a metadata object that generally describes the way to compile the template of a component and to generate an injector at runtime.

The Angular Router, representing a particular component view for a given URL, is not part of Angular Core.

It is available in a library named @angular/router, and we have to import the required router components. This process is called router imports.

It does so while following modern web design principles, including browser portability and graceful degradation.

It is a UI component library. Angular Material helps in creating attractive, consistent, and fully functional web pages as well as web applications.

Filters are used to format an expression and present it to the user. They can be used in view templates, controllers, or services.

• date - Format a date to a specified format.
• filter - Select a subset of items from an array.
• Json - Format an object to a JSON string.
• lowercase - Format a string to lowercase.
• limitTo -  Limits an array/string, into a specified number of elements/characters.

The process of monitoring the watchlist in order to track changes in the value of the watch variable is termed the digest cycle in Angular. The previous and present versions of the scope model values are compared in each digest cycle.

AngularJS controllers control the data of AngularJS applications. They are regular JavaScript Objects.

The ng-controller directive defines the application controller.

• NavigationStart
• RouteConfigLoadStart
• RouteConfigLoadEnd
• RoutesRecognized
• GuardsCheckStart
• ChildActivationStart
• ActivationStart
• GuardsCheckEnd
• ResolveStart
• ResolveEnd
• ActivationEnd
• ChildActivationEnd

Most front-end applications use either XMLHttpRequest interface or the fetch() API to communicate with backend services over HTTP protocol.

For the same purpose, Angular provides a simplified client HTTP API known as HttpClient.

This is based on top of XMLHttpRequest interface. This HttpClient is available in the @angular/common/http package

• It provides typed request and response objects.
• HttpClient contains testability features.
• HttpClient also supports streamlined error handling.
• It supports Observalbe APIs.
• It can intercept requests and responses.

Error is when the request fails on the server or fails to reach the server due to network issues.

In this condition, HttpClient returns an error object instead of a successful response.

To resolve this issue, we must handle the component by passing the error object as a second callback to the subscribe() method.

A pure pipe is only called when Angular detects a change in the value or the parameters passed to a pipe.
For example, any changes to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).

An impure pipe is called for every change detection cycle no matter whether the value or parameters changes.
For example, An impure pipe is called often, as often as every keystroke or mouse-move.