Introduction

As a beginner, it's easy to feel overwhelmed when diving into a new framework like Angular, but fear not, we're here to guide you! In this post, we'll break down a step-by-step roadmap that I wish I had when I started my Angular programming journey. Keep reading to discover essential tips, tricks, and guides that will set you apart in the world of Angular development.

Prerequisites: Before we dive into Angular, it's essential to ensure you have a solid foundation in JavaScript. If you're not familiar with JavaScript basics, take some time to acquaint yourself with the fundamentals.

Understanding Angular: Angular, as a robust web application framework, supports full-stack development. Its architecture is centred around TypeScript and the concept of components, which are fundamental to creating reactive single-page applications (SPAs). Understanding these components and how they interact is key to mastering Angular.

By following these steps, you'll build a strong foundation in both TypeScript and Angular, setting the stage for a successful journey into the dynamic world of web development.

Before starting, I gathered all the useful documentation links that I found and recommend checking them out.

Learn TypeScript basics

Angular is constructed with TypeScript, a strongly typed, object-oriented, and compiled programming language that extends JavaScript. To navigate the world of Angular effectively, it's crucial to grasp the basics of TypeScript. This statically typed superset of JavaScript not only enhances code reliability and maintainability but is also the backbone of Angular development.

• Structural Typing

• Type Interface

• Union Types

• Built-in Types

• Type Guards

• Generics

• Decorators

• Utility Types

TypeScript playground for practice

Learn Angular CLI

The Angular CLI, a command-line interface tool, streamlines the initiation, development, scaffolding, and maintenance of Angular applications directly from a command shell. To install the latest Angular CLI, execute the following command:

npm install -g @angular/cli

Create a new project:

ng new my-app

One of the common commands if you need help:

ng --help
ng generate --help
ng build --help

Quick guide for generating components in Angular:

Also, you can add flags at the ends of the command to add features, here are some examples:

I recommend learning Angular file structure: How the components are organized like in modules, and their components, services, etc.

Lifecycle Hooks

A component's lifecycle in Angular begins when the component class is instantiated and the view, along with its child views, is rendered. This lifecycle includes change detection, where Angular monitors changes in data-bound properties, updating both the view and the component instance. The lifecycle concludes when Angular destroys the component instance, removing its template from the DOM. Similar to components, directives follow a lifecycle involving creation, updates, and destruction during execution.

To interact with these lifecycles, your application can utilize lifecycle hook methods, which allow you to handle key events such as initialization, change detection, response to updates, and cleanup before deletion. The essential Angular lifecycle hooks are:

See more about the Angular's lifecycle hooks here

Templates

A component, comprising a TypeScript class, an HTML template, and a CSS style sheet, governs a designated area of the screen known as a view. The TypeScript class orchestrates the interaction between the HTML template and the resulting DOM structure, while the style sheet dictates the component's appearance.

In an Angular application, distinct components are employed to define and manage various facets of the application, there are a few things that you need to know before continuing:

• Interpolation: Involves embedding expressions into marked-up text using double curly braces {{ }} as delimiters. Angular then substitutes currentCustomer with the string value of the corresponding component property.

• Property binding: Enables the assignment of values to properties of HTML elements or directives. By enclosing the element's property in square brackets [], Angular interprets the right-hand side of the assignment as a dynamic expression.

• Template statements: Are employed in HTML to respond to user events, facilitating actions like displaying dynamic content or submitting forms. By enclosing the event in (), Angular evaluates the right-hand side of the assignment as one or more template statements linked together with semicolons (;).

• Binding(data, props, attrs, events): In Angular templates, bindings establish a dynamic link between the view and the model, ensuring synchronization.

  • Property Binding: Sets values for properties of HTML elements or directives.

  • Attribute Binding: Directly sets values for attributes of HTML elements.

  • Event Binding: Listens for and responds to user actions, like keystrokes, mouse movements, clicks, and touches.

  • Two-Way Data Binding: Combines property and event binding, facilitating data sharing between components.

• Reference variables: Enable the utilization of data from one section of a template in another. These variables can reference a DOM element within a template, component, or directive. To declare a template reference variable, employ the hash symbol, #, in the template.

• @Input() @Output(): facilitate communication between a child and its parent component in Angular. With @Input(), a parent component can update data in the child component, while @Output() allows the child to send data to the parent component.

Some examples:

// Render the title propertu
<p>{{ title }}</p>
// Render the image with the url property
<img alt="item" src="{{ itemImageUrl }}">
// Call deleteHero function when click button
<button type="button" (click)="deleteHero()">Delete hero</button>
// Call the function onSubmit with form parameteres
<form #heroForm (ngSubmit)="onSubmit(heroForm)"> ... </form>
// Disabled o enabled button by condition isUnchanged
<button type="button" [disabled]="isUnchanged">Disabled Button</button>
// Shareing data between child and parent component
<app-item-detail [childItem]="parentItem"></app-item-detail>
// Two way data binding between child and parent component
<app-sizer [(size)]="fontSizePx"></app-sizer>

Take it easy to understand all of the concepts, I know the first impression could be difficult. This documentation maybe could be useful

Routing

Angular's routing empowers users to construct a single-page application featuring multiple views and seamless navigation between them. This enables users to switch between views without sacrificing the application state and properties.

Here is a short example of how can configure routes:

const routes: Routes = [
    { path: 'home', component: HomeComponent },
    { path: 'detail/:id', component: ... },
    { path: 'about', component: ... },
    { path: 'items', // lazy load a module
    loadChildren: () => import('./items/
    items.module').then(m => m.ItemsModule)}
]);

We need to put the router-outlet element in the HTML to say Angular where we want to render our routes:

<router-outlet></router-outlet>

We use the control navidation to link our routes inside of our app like this:

<a routerLink="/home">
<a [routerLink]="[ '/detail', user.id]”>

Learn the basics of RxJS

RxJS is a reactive library used to implement reactive programming to deal with async implementation, callbacks, and event-based programs.

• Observer Pattern: The observer pattern is a software design approach where a subject object keeps a list of dependents (observers) and automatically informs them of any state changes by calling one of their methods. In Angular, this pattern is employed through Observables, where objects subscribe to them using the subscribe method and respond when the observable undergoes any relevant action.

• Observable lifecycle: An observable, functioning as a wrapper for a data stream, enables message passing within your application. However, it becomes meaningful only when an observer subscribes to it. The observer, consuming data emitted by the observable, continues to receive values until either the observable completes or the observer unsubscribes. This asynchronous process allows for diverse operations like updating the user interface or handling JSON responses.

  The observable life cycle consists of four stages: creation, subscription, execution, and destruction.

• RxJS vs Promises: Eager vs. Lazy, Asynchronous Nature, Data Delivery.

Learn how to use RxJS operators

RxJS is primarily valued for its operators, which, while built on the foundation of Observables, play a pivotal role. These operators serve as crucial components, enabling the seamless composition of intricate asynchronous code in a declarative fashion.

There are two kinds of operators:

Pipeable Operators, like filter(…) and mergeMap(…), can be applied to Observables using the syntax observableInstance.pipe(operator()). These operators do not alter the existing Observable instance; instead, they create a new Observable. Subscribing to the new Observable also subscribes to the original one.

Piping involves chaining these operators together, enhancing readability. The .pipe() method of Observables achieves this concisely:

codeobs.pipe(op1(), op2(), op3(), op4());

Creation Operators are standalone functions used to create new Observables with predefined behaviors or by combining other Observables. For example, the interval function takes a number as an input argument and produces an Observable:

const observable = interval(1000);

These operators are distinct from pipeable operators and will be explored in more detail in a later section.

Are there more?

Yes, this is only the basics, with this you are ready to create your first Angular application, create some components, link to a routes and render some information, but this is just the beginning, Angular has a lot more, here are a few more concepts that you need to know to take all the Angular advantages:

• Forms

• Pipes

• Directives

• Guards

• Interceptors

• Resolvers

• HttpClient

• Testing

• Signals

• Deferrable Views

Conclusion

Maybe from the outside Angular looks like another framework, but in my opinion, it's not it. Angular it's a platform more than a framework, it's a platform that offers you all the necessary things to build great quality applications, most of the time you don't need to install third-party libraries to do some things, Angular has many features like SRR, PWA, great forms, good security etc.

Many themes have remained to talk about in this article, maybe I can write another article with more foundation, let me know in the comments.

Information that may interest you

• https://rubenperegrina.com/series/angular

• https://angular.io/docs

• https://angular.dev/overview

• https://angular.dev/tutorials/learn-angular

• https://angular.dev/tutorials/first-app

• https://roadmap.sh/angular