Angular 11: Part 1 Getting Started with Stackblitz

 Angular is a Single Page Application (SPA) framework from Google.  A Single Page Application (SPA) is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. Angular follows a component based development. A Component in Angular consists of UI as well as it's associated code which can be accessed by a tag. 

Most popular example of a Single Page Application is the modern gmail. Once the gmail is fully loaded  none of the pages makes a round trip to the server. Instead on clicking an option like say Send Mail a component of Send Mail gets loaded into the view port of gmail. It makes an Ajax call in the background the fetches the data. The gmail application acts more like a desktop application. 

Framework vs/ Library

There are various other technologies used for creating Single Page Applications. The most popular options are ReactJS and VueJS. The basic difference between Angular and other other technologies like React and VueJS is Angular is a full fledged framework whereas React and Vue are libraries.

TypeScript
The language used for creating Angular application is TypeScript. TypeScript is a superset of latest JavaScript (EgmaScript).  As of now the lastest version of EcmaScript (ES) is ES2020 or ES11. ES2015 or ES6 was a ground breaking version of ES which introduced classes along a number of other featues. TypeScript introduced strongly typing to otherwise loosely typed JavaScript (ES). This enabled better coding support like intellisense, better debugging support, etc. 

Behind the scene Angular converts TypeScript to ES5 (JavaScript) which is the only language supported by browsers.

Stackblitz

Stackblitz  is an free, online, Progressive Web App (PWA) editor which can be used for creating applications in with technologies like Angular, React, Vue3, etc. 

 

 Angular Folder structure

 The files of the application is present inside src folder. It contains an html page index.html. Single Page Application (SPA) will have only one html page. As mentioned become Angular is a component based application.

 Components are grouped into Modules. A single application as the one created with Stackblitz above contains only one module. A complex application can have multiple components. In main.ts file we can specify the Module to be bootstrapped.  

 

 The project created with Stackblitz comes with an app component present inside app folder. A component comprises of three file. A TypeScript file with .ts extension, an html file and a css file.  In the case of AppComponents these files will be app.component.ts, app.component.html and app.component.css. 

 app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

import statement is TypeScript/ES6 is used for importing Modules exported by other modules.

Angular makes uses of TypeScript/ES6 decorators for specialized functionalities. Here @NgModule() decorator is used for creating a Module.