Why should you learn ANGULAR ?

Angular is a framework and not a “library”

Unlike other interesting alternatives such as React, Angular is not a “library” but a framework with a “batteries included” approach (Angular is self-sufficient, comes out of the box ready to use, with all that is necessary). Angular therefore natively provides everything necessary to produce an entire application with a standard configuration:

• Complete build and optimization configuration.
• Animation module.
• Module of “routing”.
• Forms Module.
• Debug.
• Unit tests and e2e.
• …

It is therefore not necessary to hesitate and debate the choice of routing modules, forms etc. With Angular, most applications have the same project structure and the same “stack” of tools. Angular applications are therefore homogeneous (of the same nature, distributed uniformly) and you will therefore more rarely come across “special cases”. In most cases, you will avoid dependency compatibility issues by letting the Angular team handle it for you.

TypeScript

Angular benefits from the rigour and flexibility of the TypeScript language.

Short presentation of TypeScript

TypeScript is a free and open-source language developed and maintained by Microsoft since October 2012. TypeScript is an ECMAScript overlay allowing the optional addition of static typing. There is currently no real TypeScript runtime. A compiler must be used to transfer the TypeScript code into valid ECMAScript code which can then be run on the JavaScript runtime of our choice: Browser, NodeJS etc. TypeScript is a perfect compromise between the flexibility of a dynamically typed language and the rigor of a statically typed language without falling into the associated syntax heaviness and this thanks to interesting concepts such as “duck typing” or type inference. TypeScript is not a standard and no support is provided on the browsers, especially since unlike the ECMAScript, TypeScript is typed statically and will therefore always require a transpilation.

Fire AtScript

Initially, Angular was supposed to use the AtScript language as a TypeScript overlay but in March 2015, Microsoft announced support for AtScript features in the next version of TypeScript (1.5). AtScript was then abandoned before its birth.

The idea of AtScript was to introduce the annotations (hence the language name) that were finally introduced in TypeScript 1.5 under the name “decorators” as in other languages (Python for example).

Single-Page App(SPA) & Progressive Web App(PWA) with ANGULAR

Angular natively provides the necessary to produce Progressive Web Apps. One can therefore quickly produce webs applications giving the illusion of a native application while remaining resilient to connection problems. The idea is to see the web as interrelated applications rather than websites containing pages.

Abstraction

Angular provides abstraction layers at all levels. For example, this avoids directly manipulating the DOM.

Mobile

By default, Angular relies on the PlatformBrowser layer to communicate with the DOM. Other alternatives of this layer exist to use Angular in other contexts:

• PlatformNativeScript : Using Native Script to bridge between Angular code and native Android or IOS code. https://docs.nativescript.org/angular/start/introduction
• PlatformServer : To generate Server side Rendering (HTML). https://universal.angular.io/
• Ionic which allows to produce native applications containing “web views” Angular https://ionicframework.com/docs/
• Terminal https://medium.com/angular-in-depth/angular-platforms-in-depth-part-3-rendering-angular-applications-in-terminal-117e4da9c0cc

Séparation of concerns

Angular allows to better separate the responsibilities with a MVC (Model/ View/ Controller) approach and the injection of dependencies.

Very rich ecosystem and large community

Exploitation of Angular’s 5 years of existence and community feedback to correct design errors, facilitate development and improve performance and stability.

Testability as a priority

Angular provides all the tools necessary to facilitate the implementation of unit and e2e tests.

• Turnkey configuration of test tools, reporting, coverage etc…
• Http ans Routing mocks modules.
• Protractor : Selenium overlay adapted to facilitate end-to-end Angular testing with native parallelization integration and tools such as BrowserStack and SauceLabs. However, you can integrate your favorite end-to-end testing tools such as( cypress.js, etc…) or unit tests such as (jest…).

Architecture and maintainability

Angular was very flexible. Without good practices, applications lose stability and maintainability very quickly. Angular requires a more structured component-based approach and a clearer way of exchanging data between components. Angular encourages a generic implementation (“framework agnostic”) that makes it easier to reuse Angular code in other contexts.

Performance

Angular is a very declarative framework. This may seem tedious at first, but this approach allows Angular to better understand how the application works before it is run, thus optimizing the construction of the application, for example by automatically eliminating the unnecessary code. As Angular updates, you will get more and more powerful applications without changing your code or rigorously by eliminating deprecated uses.

Angular Release Schedule & Long-Term Support

The Angular team is committed to publishing a new major release every 6 months (corresponding to the two major world conferences in May [NgConf], and November [Angular Connect]).

• Angular 2 : September 2016
• Angular 4 : March 2017
• Angular 5 : November 2017
• Angular 6 : May 3, 2018 (Angular CLI, Angular Material, Flex Layout etc…sync versions as well)
• Angular 7 : October 18, 2018
• Angular 8 : May 28, 2019
• Angular 9 : 06 Feb 2020
• Angular 10 : June 24, 2020
• Angular 11 : 10 November 2020.
• Angular 12 : 12 May 2021

NB: A new version is nothing more than the previous version with some new features. Each version is therefore maintained for 18 months and remains compatible with the features of the previous version that become deprecated.

https://angular.io/guide/releases

Upgrade guide

https://update.angular.io/

About AngularJS

AngularJS is version 1.x Do not confuse AngularJS and Angular. Although the version number 2.x seems to indicate continuity with Angular version 1.x, it is a complete overhaul of the Framework.

The latest version of AngularJS, AngularJS 1.7, was released in May 2018 and has been back in Long-Term Support (LTS) since July 1, 2018 until June 30, 2021.

Info

According to Glassdoor, the average salary of Angular developers is $90,196. It may vary from country to country, but what is certain, is that learning Angular nowadays can guarantee you a decent financial life. We are already in 2022, and I think it will be a good motivation to acquire new knowledge and skills.

So why you should learn Angular? Why Angular specifically? and how to start it?

Please keep reading to get the answers to the previous questions.

Big Companies use Angular

Angular is a powerful Frontend framework. It is until now supported by Google, that’s why many big tech companies are using and migrating to Angular. It affords a high level of stability, extensibility, and flexibility.

As examples of companies operating Angular we can find :

• Google itself (many google products like Google Voice, Firebase and other …)
• Microsoft (Microsoft Office Home, Xbox)
• Forbes

There are also many other companies using AngularJs (version 1 of Angular ), we can enumerate:

• MasterCard
• U.S Bank
• Colgate
• Paypal Community
• Overleaf

To find more, you can visit Madewithangular.

We will discover, then in the next paragraph, why many people and enterprises prefer Angular over other web Frameworks.

What makes Angular a better choice?

In this section, we will focus on the significant advantages of Angular. Firstly, and as described in the previous paragraph, the large community and the support from Google are the most robust assets of Angular’s fame. We will cover furthermore other reasons to choose Angular.

Let us take a look now at those big advantages :

– Typescript:

Typescript is a new trendy programming language based on javascript. It will, therefore, use its types (primitives and interfaces) and add some new magic value through improved navigation, refactoring, and auto-completion services.

– Code Consistency and Easy Testing

To avoid millions of code lines, Angular introduced the concept of Components. It’s a set of 4 files generated by CLI and ensures several benefits like the reusability of the components across the project. It provides also the good Readability of the code. Finally, it facilitates the maintenance of the project.

Learning Angular VS Learning other frontend Frameworks

When talking about frontend Frameworks, we will, of course, take React and VueJS as examples. They are considered as big competitors for Angular.

• Job opportunities : always Angular and React are leading every research in the big jobs websites
• Large projects support : Angular is awlays number one.

New hot Features

• IVY Rendering : it decreases the build time and size of the project.
• Improvements in Tests : we can expect faster and performant test now
• Web workers : it helps to perform complex calculations and tasks

Best Resources to learn Angular

– angular.io

– dev.to

– freecodecamp.org

Choosing the best resource to follow

This point isn’t related only to Angular. In a world full of hundreds of millions of tech resources, finding the best trustworthy guide to learn and practice a new Framework such as angular is the key element in the learning phase. We also emphasize the importance of following a single manual. In the meanwhile, we can confirm that the official documentation of Angular is more than enough for a beginner to acquire the basics of Angular.

We can also use hongkiat classification for the best Angular resources.

Never start learning Angular Before …

Yes, We do not recommend learning Angular before having some minimal knowledge in HTML, CSS, and JavaScript. Angular is a powerful Frontend Framework that uses some programming skills and languages. So, it is so important to acquire some basic understanding of those technologies. We truthfully appreciate the simple tutorials of w3school and we suggest you take a look and give it a try if you are a beginner with those primordial skills.

Never distract yourself with multiple frameworks

If you have already chosen to learn Angular, You need to stick to your choice. Through our experience, We think that mastering only one frontend framework and being able to solve its complex problems in a shorter time is better than having superficial knowledge of multiple frameworks. We are mastery fans, and Mastery requires time, effort, and focus.

Practice, Practice, Practice …

There’s no doubt! Practice is the key to learning anything. We provide above the official Angular documentation and why we advise people to follow it: because it contains many live examples made with Stackblitz.

Either You follow a written guide or a viral one, Try to repeat the steps one by one, and never ignore even a simple tip or advice. Practice is the magical key to mastering Angular. Do not limit yourself to just reading or watching tutorials. Try it by yourself and don’t be afraid of having errors and mistakes.

Learn the basic concepts first

We noticed that many people nowadays try to follow the trendy tech frameworks. In fact, they do not understand the basic concepts, nor the architecture of the framework, and they try to immediately start developing and using it even without a deep knowledge of what happened behind the scene. Learning the concepts and acquiring them deeply is actually a keystone in being a good Angular developer. We will cover, next, in this article the main basics of Angular.

Let’s Discover the basic concepts of Angular

We cannot discover and learn Angular’s basic concepts without defining the framework itself. We will use Wikipedia’s definition.

Angular (commonly referred to as “Angular 2+” or “Angular CLI“) is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Wikipedia

Angular Architecture

Angular, in contrast with AngularJs, uses MVVM Architecture. MVVM stands for Model–View–ViewModel. This pattern consists of 3 main layers :

• Model : It represents the data layer or the real state content.
• View : It represents simply what the users see in the screen and interact with.
• ViewModel : It is the presentation logic of the Architecture. It supports the state of the view.

This pattern or architecture ensures a lot of advantages to Angular:

1. Collaborative work: the separation of concerns can help us in boosting collaborative work, each one can work on its specific part of the application ( the UI part is separate from the related code).
2. Code reuse: as a separation pattern, the duplication of the code is genuinely avoided. We can take the example of the model Layer as it is the most one that can be duplicated.
3. Ease of Testability : We can easily Test our MVVM application as we are detaching the application logic from the UI.

Discover the basic concepts of Angular

We are following the same order as provided in the Angular official documentation. The main concepts of Angular are :

• Components
• Templates
• Directives
• Dependency Injection

Components :

An angular component is the main building block in Angular’s application, it is composed of 4 files :

• HTML file .
• Typescript file.
• .spec.ts File for testing.
• CSS or SCSS file.

we will be beginning with how to generate the Angular component.

“ng generate component component-name” is the command responsible for creating an angular component. You can also use “ng g c component-name” g stands for generating and c stands for the component.

After typing this command, Angular will create the 4 files that we introduced before.

Typescript file

We will begin with the most important file which will handle the logic side of the application. Those are the main important keywords in the typescript component file :

• @Component : a decorator specifies that this class is an Angular Component. It provides the configuration metadata.
• selector : it’s the tag of the component. We can call this component in another one using this selector.
• templateUrl : it’s how Angular knows the linked template file. By default, the attribute will have the name of the HTML generated file. We can also add some HTML code without mentioning the file name.
• styleUrls : it’s the styling configuration part, we can specify the (CSS or SCSS) file name or wanted style itself.
• Export : it’s a keyword that marks that we can use this component.

Angular gave us some other advanced attributes like Encapsulation, change detection, animations, and others … But at this level, we will focus only on the basics parts of an Angular typescript component file.

Html file

The Html file in an Angular component is its template layout. It represents the interface part of that component. It’s too evident that the HTML file will contain Html code, but how do we do the connection between HTML and Typescript parts?

First, as we mentioned in the previous part, the TS file will contain an attribute to know the HTML file, But you’re probably asking about how to pass data from HTML to Typescript and vice versa. We call that passage between the two files Data Binding, We will get back to this concept with more details and examples in the next few articles. But for now, we need to continue explaining some features of the component’s HTML file. Mainly this file contains only HTML tags, but we can call other components via their selector tags.

We can also encounter the router outlet tag which is a Directive that helps to identify where in the template part we can insert a matched component. We will talk about it also with detail.

The styling file

The styling file in an Angular component is either an SCSS or CSS file, and it depends on the way we configure the styling of the project. We can define a set of grouped styles in that styling file ( Classes or IDs).

The spec file (.spec.ts file)

It’s the file generated automatically by Angular to run unit tests for the Project’s source files. We can skip generating those files from the project’s creation by applying the — skip-tests option. You may apply it for the component creation or just by adding "skipTests":true to your angular.json file.

We finished Introducing the different Angular component parts. As I mentioned before we will discover more in detail this paramount concept of Angular, We will move now to Another big Angular Chunk which is Templates. Let’s discover together.

Templates

We talked in the Html file section about Angular templates. We can redefine Templates in Angular as the different views that the user can see using HTML code with more prebuilt functionalities.

Everyone who masters HTML well can easily get into Angular templates. the only thing to learn is how to pass data between HTML and typescript and here the term “DATA BINDING” marks his presence.

We will hear a lot about Interpolation, Property binding, Event Binding, Inputs and Outputs, and others.

We will encounter later in our tutorials a lot of templating tricks, so keep following us.

Directive

Directives are Typescript classes that add some specific behaviors to our Angular project. We can distinguish Directives from the @Directive decorator.

Directives since Angular 2 are as follows :

• Components: Yes Components are built-in angular directives with templates.
• Attribute directives: Directives that change how the interface looks to the user. We can enumerate some famous attribute directives like ngClass, ngStyle, ngModel …
• Structural directives: Directives that structure the Dom, it can modify some HTML elements, deletes others, and so on …

Directives are so critical parts of any Angular project.

Dependency Injection

Dependency Injection in angular is the fact that we import some external resources into a class rather than creating them.

It has a lot of advantages especially when talking about modularity and maintainability.

The known example of an injectable resource is Angular Services. We can use the Dependency Injection in Angular with the help of the @Injectable() decorator. In that way, Angular can use the service in its Dependency Injection System, We can also specify the level of visibility of the service by using the metadata ‘providedIn’ : The default Value for providedIn metadata is root: it means that the service is visible throughout the application.

Conclusion

This long blog post covers the best way to start learning Angular. It focused mainly on two big parts :

• Theoretical Preparational Part: based on some advice, some resources to follow, and some preparatory tips
• Practical Part: consists of learning the basic concepts with code examples.