Introduction to Angular

Basics Information regarding Angular

What is Angular?

• Angular is a JS Framework which allows us to create a reactive Single Page Applications (SPAs).
• It is a framework that we use to build client application in HTML, CSS, and JavaScript/ TypeScript (it simply compiles to JS).
• TypeScript is more common in the Angular community because angular itself has been written in TS.

Why Do You Need a Framework?

• Frameworks are needed in general to boost the efficiency and performance by providing a consistent structure so that developers don’t have to keep building the same code over and over again.
• Frameworks are time savers
• They provide extra features that can be added to application/software

Why do we need Angular?

First question arises what was the need of Angular, can’t we do our work with jQuery/JS.

• We certainly can build web application using JS/jQuery but as our application start getting complex then it very hard to maintain vanilla JS code.
• Sure we can use JS patterns for this but it is very hard to understand for beginners to JS.
• Also lot of application built using vanilla JS/ jQuery are hard to test.

Benefits of using Angular?

• Clean structure (Gives our application clean structure which is easy to understand and maintain)
• Re-usable code (It also brings lot of utility code which we can use re-use many places especially when dealing with the user navigation or browser history.)
• Easily testable (We can easily write automated tests to test various parts of the application.)

Note:- In short we can say we don’t certainly need angular to build client application but it makes our life easier.

Features of Angular

• Document Object Model: Angular uses regular DOM. Consider that ten updates are made on the same HTML page. Instead of updating the ones that were already updated, Angular will update the entire tree structure of HTML tags.
• DOM simply represents the structure of the XML and HTML in the tree structure.
• DOM is the programming interface of API, most commonly it is used with JS.
• With the help of DOM we can easily read, access and update the contents of the document.
• It works internally in the memory.
• TypeScript: It defines a set of types of JS, which helps user write JS code that is easier to understand. All the TS code complies with JS and can run smoothly on any platform. TS is not compulsory for Angular application. However, it is highly recommended as it offers better syntactic structure.
• Data Binding: It is a process that enables users to manipulate web page elements through web browser.
• Testing: Angular uses Jasmine testing framework. The Jasmine framework provides multiple functionalities to write different kind of test cases.

Architecture

• You write Angular applications by composing HTML templates with Angularized markup, writing component classes to manage those templates, adding application logic in services, and boxing components and services in modules.
• Then you launch the app by bootstrapping the root module. Angular takes over, presenting your application content in a browser and responding to user interactions according to the instructions you’ve provided.

Webpack

• Webpack is simply a static module bundler which only understands JS and JSON files.
• It is a build automation tool which gets all our scripts and stylesheets and put them into a bundle & then minify that bundle for optimization.
• Whenever some changes are done in source code then webpack actually uses Hot Module Replacement (HMR) for the changes at that same moment.
• Webpack automatically injects all these scripts into index.html during runtime.

Angular Version History

• For the first time when Angular was created it was written with JS that’s the reason it is known as AngularJS.
• But as it was not made keeping future applications in mind and due to its complexity, Angular team decided to make Angular again from TS known as Angular 2.
• Angular 2 is lot cleaner and lot easier to work with but after some minor updates till 2.3, there we got Angular 4 so suddenly that everyone was in shock that where is Angular 3 or they missed something.
• The reason behind Angular 4 is few different libraries like core, compiler, http and route but here route library was having version of 3.3.0 and other were having 2.3.0. So just to make sure everything is on the same page they launched Angular 4.
• Now first generation of angular is known as AngularJS and version 2+ is known as Angular.

With all this, let’s end this blog as this is it of Introduction to Angular. If you will find any issue regarding concept or code, you can message me on my Twitter or LinkedIn. The next blog of this series will get published on 03 March 2023.

Some words about me

I’m Mohit.❤️ You can also call me Chessman. I’m a Machine learning Developer, Working toward Full Stack Developer and a competitive programmer. Most of my time is spent staring at a computer screen. During the day, I am usually programming, working to derive insight from large datasets. My skills include Data Analysis, Data Visualization, Machine learning, and Deep Learning. I have developed a strong acumen for problem-solving, and I enjoy occasional challenges.

My Portfolio and Github.