Angular basics

All you need to know about Angular

What is Angular

Angular is what we call a "Single Page (Web) Application" (SPA).

Classical (static) web applications work like follows:

1. You make an HTTP query to a server from a client (i.e. from a web browser) ;
2. The server sends back HTML code (and css and other resources) ;
3. The client renders the page using the code it got from the server.

Classical (dynamic) web applications work like follows:

1. You make an HTTP query to a server from a client (i.e. from a web browser) ;
2. The server generates an HTML document using data (usually found in a database) and sends to result back ;
3. The client renders the page using the code it got from the server.

Single Page Applications work like follows:

1. You make an HTTP query to a server from a client (i.e. from a web browser) ;
2. The server sends back an HTML document with js code and other resources ;
3. The client renders the page using the document and runs the js code ;
4. The js code uses AJAX (async HTTP queries) to fetch data from the server and display it dynamically on the page ;
5. When the user wants to change page, the js code fetches the new page async. and replaces a part of the page with the new one.

The last point is the reason why it is called a Single Page Application (the page is loaded only once from the browser's perspective).

Imagine you have an application with a header (i.e. logo and menu options) which is present on every page. In a classical web application, every time the user would change page, you would have to include the header in the page and return it with the page. In a SPA, you only need to send the header once and when the user changes page, you can just replace the main section of the webpage.

Angular is a SPA framework developed by Google inc.

Two massively different versions have seen daylight : AngularJS and Angular 2+. AngularJS was the first version of Angular and it was completely written in JavaScript. The whole architecture has been rethought for Angular 2 and subsequent versions are improvements upon this architecture. Angular 2+ is written in TypeScript (thus later transpiled to JavaScript).

Setting up Angular

To develop an Angular project, you will need the Node.js package manager (npm) and the Angular CLI (command line interface).

Installing npm

1. curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
2. sudo apt-get install -y nodejs

Installing the Angular CLI

npm install -g @angular/cli

Angular Components

Angular is a component based framework. Every interface element is first defined as a separate component, then included in an other component. Obviously, there is a root component from which the page is defined as a tree.

You can generate a component using the Angular CLI: ng g c [name of the component] or ng generate component [name of the component].

You may get an error message saying it could not determine in which module to create the component. If that happens, use the : ng g c [name of the component] --module app command instead.

Once you have created a component (i.e. ng g c demo), you will get a new folder (i.e. demo) with three files in it:

1. The view (i.e. demo.component.html) ;
2. The code behind (i.e. demo.component.ts) ;
3. The stylesheet (i.e. demo.component.css or other extensions depending if you are using .scss, .less or whatnot) ;
4. The tests specifications (i.e. demo.component.spec.ts) -> unit tests will be detailed in further publications.

// To be continued