Angular

-
Angular Features

1) Component-Based Architecture
Angular uses a component-based architecture, which allows to build encapsulated, reusable user interface elements. 
Each component encapsulates its own HTML, CSS, and TypeScript, making it easier to manage and test individual pieces of an application.

2) Data Binding
Angular supports two-way data binding, which synchronizes data between the model and the view. 
This ensures that any changes in the view are automatically reflected in the model and vice versa.

3) Dependency Injection
Angular has a built-in dependency injection system that makes it easier to manage and inject dependencies into components and services. 
This promotes modularity and easier testing.

4) Directives
Angular extends HTML with additional attributes called directives. 
Directives offer functionality to change the behavior or appearance of DOM elements.

5) Routing
Angular includes a router that allows developers to define and manage application states and navigation paths, making it easier to build single-page applications with complex routing.

6) Angular CLI
The Angular CLI (Command Line Interface) provides a set of tools for creating, building, testing, and deploying Angular applications. 
It enables rapid application setup and simplifies ongoing development tasks.

What is the life cycle of Angular?
A component has a lifecycle managed by Angular. Angular creates it, renders it, creates and renders its children, checks it when its data-bound properties change, and destroys it before removing it from the DOM.

Angular components have a lifecycle managed by the framework.
Throughout lifecycle, can hook into various moments using lifecycle hook methods.
The key lifecycle methods in Angular:

Initialization:
ngOnChanges(changes: SimpleChanges):
Called when any input property of the component changes. It receives a SimpleChanges object containing the previous and current values of the changed properties.
ngOnInit():
Called once, after the first ngOnChanges(), when the component is initialized and its input properties are set. This is a good place for initial setup or data fetching.

Change Detection:
ngDoCheck():
Called during every change detection cycle to detect and act upon changes that Angular can't or won't detect on its own.
Use this sparingly, as it can impact performance.

View Manipulation:
ngAfterContentInit():
Called once, after Angular projects external content into the component's view.
ngAfterContentChecked():
Called after every check of the component's content.
ngAfterViewInit():
Called once, after Angular initializes the component's view and child views.
ngAfterViewChecked():
Called after every check of the component's view and child views.

Destruction:
ngOnDestroy(): Called just before Angular destroys the component. This is a good place to clean up resources like subscriptions.

What is state management in angular?
The most popular Angular's State Management libraries are NGRX and NGXS.
Simple state management in Angular with only Services and RxJS.

Forms in Angular
Applications use forms to enable users to log in, to update a profile, to enter sensitive information, and to perform many other data-entry tasks.
Angular provides two different approaches to handling user input through forms: reactive and template-driven. 
Both capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.
1) Template Driven Forms
2) Reactive forms
Reactive forms provide a model-driven approach to handling form inputs whose values change over time.
Reactive forms use an explicit and immutable approach to managing the state of a form at a given point in time.

Angular Material
Angular Material is a UI component library that implements Material Design in Angular.
It provides a collection of reusable components that adhere to Google's Material Design specifications, aiming to offer a consistent user interface across different devices and platforms.
Angular Material includes a variety of UI components such as buttons, cards, dialogs, grids, and form controls. 
These components are designed to be customizable and easy to integrate into Angular applications. 
Additional features of Angular Material include support for responsive design, theming, and accessibility.


Version History

Angular 18 May 22, 2024
- Experimental zoneless change detection support and server-side rendering improvements.

Angular 17 November 8, 2023
- Application builder, a new syntax for control flow, and a re-worked learning and documentation website.
Angular 16 3 May 2023
- Partial hydration for Angular Universal's Server-side rendering, experimental Jest support, and Esbuild-based build system for development servers.

Angular 15 November 18, 2022
- Standalone APIs, directive composition API.

Angular 14 2 June 2022
- Typed forms, standalone components, and new primitives in the Angular CDK (component dev kit).

Angular 13 4 November 2021
- Removed deprecated View Engine renderer.

Angular 12 12 May 2021
- Deprecated support for Internet Explorer 11.

Angular 11 11 November 2020
- Experimental Webpack 5 support

Angular 10 24 June 2020
- New Date Range Picker (Material UI library).

Angular 9 6 February 2020
- Improved build times, enabling AOT on by default

Angular 8 28 May 2019
- Differential loading for all application code, Dynamic imports for lazy routes, Web workers, TypeScript 3.4 support, and Angular Ivy as an opt-in preview.

Angular 7 18 October 2018
- Updates regarding Application Performance, Angular Material & CDK, Virtual Scrolling, Improved Accessibility of Selects. Support for Content Projection using web standard for custom elements, and dependency updates regarding Typescript 3.1, RxJS 6.3 and Node.js 10.

Angular 6 4 May 2018
- Experimental custom element support

Angular 5 1 November 2017
- Support for progressive web apps, a build optimizer and improvements related to Material Design.

Angular 4.3 18 July 2017
- HttpClient for making HTTP requests, conditionally disabling animations, new router life cycle events for Guards and Resolvers.
- Minor release, meaning that it contains no breaking changes and that it is a drop-in replacement for 
Angular 4.x.x.

Angular 4 23 March 2017
- Added ng update command
- Backward compatible with Angular 2.

Angular 2 14 September 2016
- Initial release


Difference between AOT and JIT?

AOT (Ahead-of-Time Compilation):
Compiles at build time:
AOT compiles application code during the build process, before it's deployed to the browser.
Generates optimized JavaScript:
AOT produces smaller and more efficient JavaScript code, which leads to faster loading times and better performance.
Catches errors earlier:
AOT performs template type checking during the build process, which helps catch errors early on, reducing runtime errors.
Improved security:
AOT can help improve security by eliminating the need to send Angular compiler to the client side.
Default for production:
AOT is the default compilation mode for Angular applications in production environments.

JIT (Just-in-Time Compilation):
Compiles at runtime: 
JIT compiles application code in the browser, as it's needed.
Faster development: 
JIT compilation allows for faster development iterations as changes are immediately reflected without a full rebuild.
Larger bundle size: 
JIT produces larger JavaScript bundles compared to AOT, leading to slightly slower initial load times.
Debugging capabilities: 
JIT allows to debug Angular application directly in the browser, using source maps.
Used for development: 
JIT is typically used during development due to its faster feedback loop.

Key differences:
Compilation time:
AOT compiles at build time, while JIT compiles at runtime.
Performance:
AOT generally offers better performance due to smaller bundle sizes and optimized code.
Error detection:
AOT catches errors earlier, during the build process, while JIT catches errors at runtime.
Development experience:
JIT offers a faster development experience due to its instant feedback loop.

Choosing between AOT and JIT:
Production environments:
Use AOT for production environments to benefit from its performance and security advantages.
Development environments:
Use JIT for development environments to benefit from its faster feedback loop and debugging capabilities.

Note: With the introduction of Ivy in Angular 9, the performance difference between AOT and JIT has been significantly reduced. 
However, AOT still offers advantages like smaller bundle sizes and early error detection.



Comments

Post a Comment

Popular posts from this blog

PL/SQL

-
PL/SQL PL/SQL stands for Procedural Language extensions to the Structured Query Language (SQL). PL/SQL can execute a number of queries in one block using single command. One can create a PL/SQL unit such as procedures, functions, packages, triggers, and types, which are stored in the database for reuse by applications. The PL/SQL engine resides in the Oracle engine. The Oracle engine can process not only single SQL statement but also block of many statements. Structure of PL/SQL Block: DECLARE     declaration statements; BEGIN     executable statements EXCEPTIONS     exception handling statements END; / Example : SET SERVEROUTPUT ON; SQL> DECLARE        var varchar2(40) := 'I love GeeksForGeeks' ;      BEGIN        dbms_output.put_line(var);      END;      / PL/SQL Functions PL/SQL functions are reusable blocks of code that can be used to perform specific tasks. They are...
Read more

JAVA8 Features

-
Java8 Features 1) Lambda Expressions : Concise functional code using ->. Lambda Expression basically expresses an instance of the functional interface, Lambda Expression provides a clear and concise way to represent a method of the functional interface using an expression. 2) Functional Interfaces : Single-method interfaces. An interface that contains only one abstract method is known as a functional interface. There is no restriction, that can have n number of default and static methods inside a functional interface. A functional interface is an interface that contains only one abstract method.  @FunctionalInterface annotation is used to ensure that the functional interface can’t have more than one abstract method. Runnable, ActionListener, and Comparable are some of the examples of functional interfaces.   Runnable –> This interface only contains the run() method.   Comparable –> This interface only contains the compareTo() method.   ActionListener –> ...
Read more

Build Automation

-
ANT: Ant was the first build tool released in 2000. Ant was developed on procedural programming idea. Ant was improved with an ability to accept plug-ins and dependency management over the network, with the help on Apache-IVY. Drawbacks: 1) XML is used as a format to write the build scripts. 2) Being hierarchical is not good for procedural programming, and 3) XML is relatively unmanageable.   MAVEN: Maven was introduced in 2004. Maven relied on the conventions and was able to download the dependencies over the network. Benefits : Life cycle of Maven, while following the same life cycle for multiple projects continuously. Problems: 1) Maven does not handle the conflicts between versions of the same library. 2) Complex customised build scripts are difficult to write in Maven, as compared to writing the build scripts in ANT. GRADLE : Gradle came into picture in 2012 Features  Declarative builds and build-by-convention 1) Gradle is available with separate Domain Specific Language ...
Read more