What to learn in Angular?

Angular has a lot of built-in stuff. This largely broadens the scope of things it can do without having to use too many additional libraries but at the same time, it brings a lot to be learned to get working with them.

This post is just a high-level overview of what all Angular offers in general and their short descriptions in very layman's terms.

Angular CLI

This is not something that is taught typically but hardly anyone uses Angular without using its CLI so it was worth mentioning. So, Angular CLI is just a tool to develop and manage Angular applications through commands. This is important because Angular projects have a lot of files in them and the folder structure can really be overwhelming if tried to be managed manually.

Components

Components are sort of the fundamental building blocks for an Angular application. As the name suggests, these are the individual pieces or sections that together form the UI.

Templates

Templates are the HTML part of the component.

• Interpolation- Incorporating dynamic values in the HTML

• Attribute, Class, and Style Bindings- Changing HTML elements attributes, classes, and styles dynamically.

• Property Binding - Changing HTML elements properties dynamically

• Event Binding - Triggering some logic on the occurrence of a user event

• Two-way Binding - Simultaneous listening to events and updating values. This is sort of a combination of Property Binding and Event Binding

• Template Variables- Using one part of a template at another place in the template.

Components LifeCycle

The different stages that a component can go through and the different functions that Angular exposes to leverage these stages.

Pipes

They are used for transforming the data while displaying. For example- to change the case of a text or to format a number as a percent, etc.

Directives

They enable additional behavior in the app. Mainly, there are two types of directives- Attribute Directives and Structural Directives. One can also make a custom directive as per one's need.

Services

Services work as a piece of code dedicated to handling logic that does not play a direct role in the displaying of data i.e. they usually don't contain view-related logic, unlike the components. Service can also be used for communication between different components.

Routing & Navigation

Navigating around different views based on interpreting the different URLs.

• Absolute and Relative Routing
• Programmatic navigation
• Route Parameters, Query Parameters, and fragments
• Passing data to a route
• Child routes
• Redirection and Wildcard routes
• Route Guards

Angular Forms

Forms are designed using HTML but Angular does provide some powerful directives which make working with forms and their validations much easier. Two approaches can be used for designing Forms- Template driven approach and Reactive Approach.

• Template Driven and Reactive approach
• Form State and Validation
• Useful directives in forms like ngModel, etc.
• Two-way binding in forms

Observables

They play a major role in the asynchronous part of the app such as HTTP requests, etc. They can be subscribed to for getting data which usually comes with a time delay or at uncertain intervals of time.

• Subscription
• Completion & Errors
• Possibility of memory leak and avoiding them
• Subjects

HTTP Request and Response

Though it's not Angular specific, it's an integral part of any client-side scripting language or framework. Angular uses an HTTP client module for the purpose of sending requests and receiving responses.

• Setting Headers
• RxJS operators
• Error handling
• Interceptors
• Response body type

Authentication

Though it's not Angular specific, it's an integral part of any client-side scripting language or framework. Angular uses an HTTP client module for the purpose of sending requests and receiving responses.

• Sending Signup and Login requests
• Handling errors
• Verifying Logged in status
• Getting and storing tokens
• Attaching tokens with an outgoing HTTP request

Multiple Modules and Lazy Loading

The Angular app can be divided into several modules to make things clean and organized. Furthermore, the performance can be significantly enhanced using the lazy loading of those multiple modules. This is particularly very useful in big and complex projects.

Unit Testing

Angular CLI automatically downloads the Jasmine Test framework. The spec files are dedicated files to write the test cases.

Deployment

After the development is complete, building the project for production and deploying it to a server is a great learning experience in itself. It involves a lot of things which doesn't usually come in the way at the time of development such as Optimization, Ahead-Of-Time Compilation, Proper routing after deployment, etc.

Angular Universal

In the post-What is a Single Page Application? I did mention that one of the big limitations SPAs were facing was the SEO. The concept of Server-Side Rendering aims to solve that issue and Angular Universal is sort of an extension of Angular to just do that.