AngularJS vs. Angular 2 Vs. Latest Angular Version

 Let's UnderStand the difference between  AngularJs and Angular Versions

Difference Between AngularJs and Angular Versions

AngularJS to Angular, Angular includes both version 2 and version 4, and so on... We compare Architecture, Language, Expression Syntax, Mobile Support, and Routing.

1. Architecture

AngularJS

The architecture of AngularJS is based on the model-view-controller (MVC) design. The model is the central component that expresses the application's behavior and manages its data, logic, and rules. The view generates an output based on the information in the model. The controller accepts input, converts it into commands, and sends the commands to the model and the view. 

Angular

Angular uses components and directives. Components are directives with a template.

Angular 2 

In Angular 2, controllers and $scope were replaced by components and directives. Components are directives with a template. They deal with a view of the application and logic on the page. There are two kinds of directives in Angular 2. These are structural directives that alter the layout of the DOM by removing and replacing its elements, and attributive directives that change the behavior or appearance of a DOM element.

In Angular 4, the structural derivatives ngIf and ngFor have been improved, and you can use if/else design syntax in your templates.   

 2. Language

AngularJS

AngularJS is written in JavaScript. 

Angular versions

Angular uses Microsoft’s TypeScript language, which is a superset of JavaScript. This has advantages like type declarations, and the benefits of ES6, like iterators and lambdas

Angular 4 is compatible with the most recent versions of TypeScript which have powerful type checking and object-oriented features. 

3. Expression Syntax

AngularJS

To bind an image/property or an event with AngularJS, you have to remember the right ng directive.

Angular versions

Angular focuses on “( )” for event binding and “[ ]” for property binding.

4. Mobile Support

AngularJS was not built with mobile support in mind, but Angular, Angular 2, 4, and so on.... feature mobile support.

5. Routing

AngularJS uses $routeprovider.when() to configure routing while Angular uses @RouteConfig{(…)}. 

6. Performance 

AngularJS was originally developed for designers, not developers. Although there were a few evolutionary improvements in its design, they were not enough to fulfill developer requirements. The later versions, Angular 2 and Angular 4, have been upgraded to provide an overall improvement in performance, especially in speed and dependency injection. 

• Speed

By providing features like 2-way binding, AngularJS reduced the development effort and time. However, by creating more processing on the client-side, page load was taking considerable time. Angular2 provides a better structure to more easily create and maintain big applications and a better change detection mechanism. 

• Dependency Injection

Angular implements unidirectional tree-based change detection and uses the Hierarchical Dependency Injection system. This significantly boosts the performance of the framework.

AngularJS (Angular 1) is totally different from the later versions. And the reason for this is that there is a complete rewrite of the Angular framework between Angular 1 and Angular 2.

Angular 2 was released in the year 2016 and it was rewritten from the ground up. So the basic reason for developing Angular 2 is to fix all the issues that Angular 1 had.

since then that initial release of Angular 2 we had a couple of other versions as well i.e. Angular 4, Angular 5…….and Angular 9...12.

Angular 3 was skipped due to internal reasons.

Since we have all these versions of Angular till now so does it mean Angular was reinvented 8 times since Angular one?

The answer to this is No.

This is not the case instead Angular team adheres to the versioning scheme where a new version of Angular is released every six months.

But that new version is not completely rewritten and it does not change everything.

The new version resolves the issue in the previous version and added new features without breaking the existing feature.

Indeed Angular 12 is the same as Angular 2. When we see syntax and philosophy then most of the things are the same.

In simple words, if you know Angular 2 then there is no difficulty in learning Angular 8 or 9, or 12.

Also, you found that there is no big change in syntax, and the syntax is almost the same as in previous versions.

Overall it is the same framework and some minor changes were added to this. So, among the different Angular versions, we have small incremental changes that are backward compatible.

Conclusion:

In the comparison of the Angular versions, we have learned about their breaking changes, performance & the changes in the core structure, and various other deprecations and upgrades. Angular 13 release was within a few months after the release of Angular 12. However, looks like we can expect the next stable version by end of the year.

Angular v11	Angular v12
Typescript 4.0	Typescript 4.2
Webpack 5 Support	Webpack 5.37 Support
Migration to ESLint	Migrating from legacy i18n message IDs
Deprecation of IE 9, 10, and IE mobile.	Deprecating support for IE11.
Updates on Operation Blog.	Improved component tests harness.
Updated Language Service Preview.	HTTP improvements.
strict checks with a flag.	Default strict mode
Roadmap to provide early feedback	Roadmap to inform about the priorities of the Angular team
Updated Language Service Preview	Migration to default IVY-based language service
New Default Browser Configuration	Updated Language Service Preview
Improved Ngcc compiler	Improved logging and reporting

Azure Blob storage trigger for Azure Functions - Messag from Azure Blob Storage to Azure-Service-Bus using azure blob trigger funtion

Azure Function

Azure Functions is a serverless computing service and is hosted on the Microsoft Azure public cloud. It is designed to accelerate and simplify application development. 

Azure Functions are the individual functions created in a Function App. Every Function can be invoked using the configured trigger.

 Blob Storage working scenario.

The Blob storage trigger starts a function when a new or updated blob is detected. The blob contents are provided as input to the function.

When Azure Function runs, it needs to know how to connect to the blob container. In local.settings.json from the Storage Account copy the connection string from Access keys and add the connection string in local.settings.json 

 Blob Trigger function having parameter myBlob which gives the details of the uploaded blob,

These details will send to Service Bus Queue for further process.

  

Azure Function Will be Triggered once the file is uploaded to Azure Storage Account

Prerequisites

• Microsoft Azure Account.
• Visual Studio with the Azure Development workload enabled. you can also create Azure Function directly in the portal, but the visual studio is preferred when you want easy source control integration.

Code Snippet for Azure Blob Trigger Function

Function Name: Triggerwhenfileuploads
Return Type: JSON
Blob Container Name: Your-container-Name
Service bus Queue Name: Your-Queue-Name
 

BlobTrigger

name - holds the name of the file found in the blob container.

myBlob - holds the content of the file.

containerName - actual container name created in blob storage.

connection - blob storage connection string.

Service Bus

Service-Bus-demo: Service bus Queue Name

Connection - Service bus connection string.

Class File For Message     

OutPut

The connection string from the storage account to local.setting.json

This config file will not be going to deploy to Azure, so will need to specify the information in the portal as well.

 

Azure BLOB Storage

 The Azure Storage platform offers various services that cater to different scenarios:

·        Azure Blobs: Azure Blob Storage offers massively scalable object stores for storing text and binary data. It also includes support for big data analytics through Data Lake Storage Gen2.

·        Azure Queues: Microsoft offers Azure Queue Storage as a service for storing large numbers of messages. They can enable reliable messaging between applications and components.

·        Azure Tables: Azure Table storage is an excellent choice if we want to store structured NoSQL data in the cloud. It can store key and attribute values without defining a schema. 

·        Azure Disks: Azure Disks offer managed block-level storage volumes. We can easily attach them to Azure Virtual Machines.

·        Azure Files: Microsoft offers Azure File Storage as a fully managed cloud file share. We can access them from both cloud and on-premises services.

 

A Deeper Look at Azure BLOB Storage

Now let’s take a deeper look at the Azure BLOB storage. Microsoft offers Azure Blob storage for storing large object blobs in the cloud. This is optimized for storing large amounts of text or binary data.

Blob storage is ideal for many scenarios like:

·        Serving images or documents directly through the browser.

·        Storing files for access from multiple locations and services.

·        Streaming video and audio files.

·        Storing data for backup and restore operations, disaster recovery, and archiving, etc.

·        Storage for data analysis by both on-premises and Azure-hosted services.

We can access objects stored in BLOB storage from anywhere in the world via HTTP or HTTPS. Users or client applications can access files stored in BLOB storage via URLs,

the Azure Storage REST API, Azure PowerShell, Azure CLI, or Azure Storage client libraries (SDKs) that are available in various languages. In this example, we’ll see how to access Azure BLOB storage using Angular.

 

Structure of an Azure BLOB Storage

Blob storage has three types of resources:

·        Storage Accounts: A storage account provides a unique namespace in Azure for our data. Every object that we store in Azure Storage has an address that includes the unique account name. The combination of the account name and the Azure Storage BLOB endpoint forms the base address for the objects in the storage account.

·        Containers: Just like how a directory organizes files in a file system, containers organize a set of blobs. A storage account can include any number of containers, and a container can store an unlimited number of blobs.

·        Blobs: BLOB can store text and binary data. Blob storage offers three types of blobs – Block blobs, Append blobs, and Page blobs. We can specify the blob type while creating the blob. It is not possible to change its type afterward and we can only update a blob file using the operations appropriate for that particular blob type, for instance, we can only write a block or list of blocks to a block blob, append blocks to an append blob, and write pages to a page blob.

 

We can represent the structure of BLOB storage this way:

 

Types of blobs

Key concepts

Blob storage is designed for:

• Serving images or documents directly to a browser.
• Storing files for distributed access.
• Streaming video and audio.
• Writing to log files.
• Storing data for backup and restore, disaster recovery, and archiving.
• Storing data for analysis by an on-premises or Azure-hosted service.