angular js

Hi!

Welcome back to our session. Today, we will be looking at one of the open source structural frameworks in javascript. What is called? Angular Javascript.

ANGULARJAVASCRIPT

Angularjavascript.-(Angular js) as it is called, is a framework for building heavy lifting javascript- single-page-app(SPA)in Front end development.

SPA loads the entire content of a website on a single page. The single page is usually in the index.html file. It updates the section within the page itself.

Built-in 2009 by Developer by Miško Hevery.

One unique difference between angular-based websites and traditional websites is Angular expects the browser to build the page. The page include-Html, CSS&Javascript files. The browser shows the final page displayed on a web page.

Sound tedious for the browser right? Still, it produces results at a fast pace most times compared to the traditional application that uses Java, and PHP.

Another interesting feature of Angular JS is it allows the writing of cleaner code. That includes using loops, variables, and conditions within the template. You can track, display, and process changes from the user using data-binding.

THREE PILLARS OF ANGULAR JS

Two-way Data Binding:-Both sides of view are synchronized

Dependency Injection:-Dependencies are relations between different pieces of code. Rather than attaching dependencies to objects. Angular attaches injectors that link them to dependencies stored in a central location. The codes can be re-used, while the dependency mocked when writing unit test

Directives:-The most used part of Angular JS. They extend classic HTML. They also work as markers on a dumb element, telling angular JS the behavior to attach that element. In other words, directives make it possible for Html to create different content.

CONCEPT OF ANGULAR JS

The Key concepts developed with Angular JS

Modular

Testable

Maintainable

ANGULAR TYPES OF DATA BINDING

One-Way/Unidirectional
Two-Way
Event
Property

VERSIONS OF ANGULAR

Angular JS1 gives us modulars to separate our codes for testing and maintenance.

Angular 2 gives components better ways of separating structures, API, and reusable.

Angular 2 gives the option to choose more languages.Like ES5, ES6, or TypeScript to write the codes of Angular 2.

Angular 4

Angular 4.0 reduced the bundled file size by 60%. Code helps to speed up the application performance due to its reduction.

Proper disapproval phase to allow developers to adjust their code.

Animation features pulled out of angular/core and included in their package.

Angular 5

Compiler Improvements.

Optimize with HttpClient Feature

Internationalized Date & Currency

Angular 6

Like Angular 5, Angular 6 has an Angular Element that provides the ability to create an Angular component. Then publish that component as a web component that can be used on any HTML page.

Internationalization (i18n)

One of the major changes introduced to Angular 6 is the internationalization (i18n) feature with runtime rendering so that there is no rule to build one application per locale.

Angular 7

It is an open-source JavaScript framework for building web applications and apps in JavaScript, html, and Typescript which is a superset of JavaScript. Angular provides built-in features for animation, http service, and materials which in turn have features such as auto-complete, navigation, toolbar, and menus.

Angular 8

Web Workers

Web workers are essential for improving the parallelizability and the speed of application. Angular 8.0 adds support to CLI and provides one bundle for every web worker & they do it by writing code off the main thread

Angular Firebase

Angular 8 has support for firebase and now deploying an Angular app to Firebase is very easy. Using Angular CLI, Service Worker.

Angular 9

IVY as a Default Compiler

IVY checks bindings within the templates of any application and reports different kinds of issues it finds. This helps in detecting any bugs earlier in the development process. It then compiles the codebases with tools and techniques to debug its applications. It manages the style binding without being dependent on any timings. Angular 9 maintains most of the drawbacks without losing performance.

Component Harness

Angular 9 provides alternative ways to test components to make sure that the unit tests are audited and less frail.

Angular 10

Language Service

The resource-specific interface compiles many file types using the project interface that creates ScriptInfos where required. Auto-complete appears to have been removed from HTML entities, such as &, <, etc., to protect the basic functionality of Angular LS, which carries questionable value and operating costs.

New default browser configuration

Browser configuration for new projects has been updated over older and less-used browsers. This includes the side effect of disabling the automatic construction of the ES5 for new projects. One adds the required browsers to the browser list RC file. Enables ES5 to build and separate browser loading.

Angular 11

Updated Hot Module Replacement (HMR) Support

Hot Module Replacement is a mechanism that allows the modules to be replaced without a full browser refresh.

It offers support for HMR with required configuration and code changes that make it less than ideal fast to include in Angular.

Automatic Inlining of Fonts

Angular 11 features automatic font inlining that converts Google Fonts and Icons to inline in index.html.

Angular 12

Switch from i18n

i18n message IDs are the technique used in Angular to carry out several messaging plans whenever a new task is initiated. i18n is used for the interpretations and validation of codes.

In Angular12, a new standard message-id configuration implemented is efficient and doesn’t ease whitespace changes. This new messaging method is designed to reduce the expense of unrequired interpretation invalidation and retranslation.

Webpack 5.37 Support

Webpack 5.37 support is a great capability for Angular 12. It eases the programming for developers by putting much influence on bundle size, building execution, etc. This aids in improving the long-term caching and form execution with high effectiveness.

Angular 13

Complete Ivy

It no longer uses View Engine for rendering its components, and by leveraging the Ivy mechanism the compilation speed and platform efficiency for the projects has enhanced.

Improved Component A11y

It comes with pre-tested standards of a11y and all components of the framework such as ARIA, Touch targets, checkboxes, radio buttons, and contrasts made to cater to higher user accessibility.

Angular 14

Extended developer diagnostics (ng compilation)

This feature from Angular v14 delivers an extendable framework. that assists better insights into your templates and offers suggestions for potential boosts. It checks the syntax error in our component like in the contact us component you remove the reactive.

Standalone Components

With the release of Angular 14, standalone components will, at last, be a workable option. Angular modules are not required.

That’s it for today.

See you soon.