Understanding Angular : Introduction, Architecture, Features, Benefits & Installation

Things to know before getting started with Angular. A simple guide for a Beginner. A better way to learn Angular. Enjoy :)

Introduction & Prerequisites

What is Angular? When was it released?

Angular is an open source JavaScript Framework written in TypeScript, focusing primarily on building SPAs (Single Page Applications) & creating highly scalable native desktop, mobile, and web applications.

Angular was released by a team of developers at Google back in 2016. It is currently maintained by the Angular Team at Google and some community corporations.

AngularJS was the first release or the first version of Angular. It was completely rewritten and released as ‘Angular 2’ in September 2016. The versions that we have now are the descendants of Angular 2.

Google has announced the end of life for the AngularJS (Angular 1) project and the support has officially ended as of January 2022. Refer: https://blog.angular.io/discontinued-long-term-support-for-angularjs-cc066b82e65a

What are the prerequisites for learning Angular?

• Good understanding for HTML, CSS and JavaScript.
• Basic understanding on JavaScript Functions, Events and Error Handling would be an added advantage. Although you can learn these things along with Angular, this should not be a hurdle.
• Basic Understanding of the MVC (Model-View-Controller) model.
• Basic Understanding of Document Object Model (DOM).

(Before moving to Angular make sure you know these things. Unaware about these concepts might lead to more complexities as it gets a bit complex as we explore.)

Why Angular?

Being an open-sourced framework, Angular can be learned easily by anyone given that he/she has the basic knowledge of HTML, CSS and JavaScript.

Angular has a component based structure making it highly scalable & reusable thereby simplifying application development.

As mentioned earlier, Angular primarily focuses on building Single Page Applications, it leads to efficient website transitions.

Well not simply this, but many JavaScript libraries like RxJs, Redux can be integrated with Angular.

…but but… Angular is too complex… 😿

(You would find many ‘Scholars’ debating about how React / Other JavaScript Libraries, Frameworks are better than Angular, fighting over their complexities. I would advice not to fall prey to these intellects. Just ignore! After all it is all about your personal choice and primarily what tech stack is a best fit for your project.)

Anyways😆, let’s move on…

Features of Angular

What is TypeScript?

If you are familiar with JavaScript, TypeScript is a gift! As the official definition for TypeScript goes: “TypeScript is JavaScript with syntax for types”, it adds extra integration in our editor.

The code is converted to JavaScript by the angular commands.

It is nothing but JavaScript with some additional syntax. As I said there’s nothing to worry about! Understanding Angular might take some time, but it gets easy as we progress.

TypeScript catches errors in the editor itself

What is Data Binding?

We can easily move data from JavaScript to the UI using Angular and respond to user interactions/events without manually writing any code. The UI element binds with the JavaScript as defined and is updated automatically on changes been made on either sides.

This is a very easy* and useful feature of Angular. You would be using this throughout!

(no, that asterisk is not a mistake 😜)

Simple example for Data Binding

Cross Platform, Speed & Performance

With Angular, you get all the benefits of hand-written code with the productivity of a framework while having our templates converted into code that is well optimized for today’s JavaScript virtual machines.

We can define the components to load when required, which helps the app load faster and render the view as users request.

We get intelligent code completion, instant errors, and other feedback in popular editors and IDEs. Visual Studio is considered to be the best option, yet again the choice is yours!

Testing

Angular Unit testing is a process of testing small units and isolated code within the Angular application. Angular uses the Jasmine Test Framework for performing the testing of the Angular applications.

Even though this is a very important aspect for any application, I would suggest you can learn this once you are completely thorough with the Angular CLI and Fundamentals.

For now let’s keep it aside..

Architecture

Angular Architecture (from Angular v2 Archive)

Once you fully get to know the architecture, about how it works and the data flow, you are half way done. Concepts and methods should not be very difficult to understand thereafter.

…and exactly at this step many people loose interest in Angular. Skipping this step is something I would not recommend. Instead of jumping directly to fancy stuff, try dedicating initial days understanding the architecture very well.

According to the diagram, we identify eight main building blocks:

1. Modules
2. Components
3. Templates
4. Meta Data
5. Data Binding
6. Directives
7. Services
8. Dependency Injection

Learn these building blocks, and you’re on your way!

I would be posting a separate story, explaining each of these blocks. I will post the link once it is ready. Stay tuned!

Installing Angular

Angular Documentation provides the steps to install Angular onto our machines. Refer: https://angular.io/

For those who get bored reading lengthy documentations, here are the steps for installing:

Step 1: (skip to Step 2, if installed already)

Angular cli requires NodeJs installed for running/installing onto our machines. Make sure you install it before we begin. You can download and install NodeJs from this link: https://nodejs.org/en/

Step 2:

Once the NodeJs installation is done on your machine, hit this command through your command prompt:

npm install -g @angular/cli

This should install the angular globally. Make sure -g is not missing.

Creating an Angular Project

Firstly, navigate to the folder where you want to create the project. Open this folder location in command prompt.

Hit the following command to create a new angular project:

ng new ProjectName

Now cli would prompt some questions which should be easy to pick upon 😄

Once the command has finished processing, a new folder will get created having all default files with required structure.

Hit the following command to run the project.

ng serve

and hit this URL in the browser: http://localhost:4200/.

Or else hit the following command and cli would automatically open the project for the lazy you:

ng serve --open

From now, never say “run”. Say SERVE!!!