In the last couple of years, we have seen that Single Page Applications (SPAs) and UI frameworks have taken over the JavaScript world by storm. Today we have multiple frameworks and libraries options ranging from React to Angular and many more.

 So, let’s discuss how to get started with Angular, how to install it and take a quick overview of the structure of the default bootstrap project.

Angular:

Commonly referred to as “Angular 2+” or “Angular v2 and above” is a Typescript-based open-source web application framework used to develop Single Page Applications (SPAs).

Angular CLI:

Angular CLI (Command Line Interface) was introduced with Angular. As the name specifies, it is a command-line tool for creating angular applications. It is recommended to use angular CLI for creating angular applications as you don’t need to spend time installing and configuring all the required dependencies and wiring everything together. It also provides other features like building and running application etc.

Angular CLI can be installed using the following command in a command prompt:

npm install -g @angular/cli

You must have a Node Package Manager (NPM) installed to install angular CLI. If you don’t have NPM installed, it can be downloaded from the Node website for free (https://nodejs.org/en/download/).

Angular Project Setup:

To set up the angular project we will use Angular Command Line Interface (CLI). Open the command prompt and go to the location where you want to create the project. Run the following command:

ng new hello-world

Now navigate to the directory (cd hello-world), you will see that CLI has created a bootstrap project with multiple files and folders. Run the project using the following command:

ng serve

The angular project use port 4200 by default. You can see the default project by opening the following link in your browser:

http://localhost:4200/

IDE for Angular:

You can use any IDE which you like and comfortable working with. Visual Studio Code is also a very good option; it is free and gives tons of built-in options and plugins to work with Angular.

Angular Bootstrap Project Overview:

In the angular bootstrap project created by CLI, you will see multiples files and folders. Let’s take a quick overview of what these files and folders do.

• e2e (End to end): This folder contains testing files for the high-level test of a feature.
• node_modules: This folder contains all the modules and plugins required for your project. Any plugin you will install later using npm will also go in this folder.
• src: This folder contains the main logic of your website. It is subdivided into folders like ‘app’ folder where all the components will be created, assets folder for your images, fonts, etc. Environment folder contains files for production and development by default. Your styles file is also placed in this folder.

Outside these folders on the root, you have your angular.json file for configuration and package.json file which contains information regarding all the installed packages.

TypeScript:

As already mentioned, Angular uses typescript, so what is typescript! Typescript is a superset of JavaScript with more features than vanilla JavaScript, it is strongly typed and provides features like Classes and Interfaces, etc. Typescript cannot run directly in the browser, it is first compiled by Angular CLI into JavaScript and then it runs in the browser.

How Angular application gets loaded:

By now you must have checked the bootstrapped angular app created using Angular CLI in your browser. Now you must be wondering how the app gets loaded. Let’s solve this mystery and see how the magic happens.

If you open the src folder, you will see Index.html file, open it in the editor and you will see following tags:

<app-root></app-root>

These tags represent the base component of our application. Logic written in this base component will be populated in these tags. Now the question is that how will this happen?

If you open the main.ts file you will see the following line:

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

Using this line we are letting angular know that which module you have to load when you start. This AppModule is located in app folder under src folder. Now if you open app.module.ts file you will see that we are importing AppComponent file at the top and passing it to the bootstrap array. This bootstrap array contains all the components which angular should know when it starts.

Now open app.component.ts file. Here you will see app-root selector and AppComponent class declaration which I am sure you are now familiar with.

Components:

These are the building blocks of angular application. Angular application is composed of multiple components.

When you generate a component it will give you following files:

• Component styles file (component_name.component.css)
• Component template file (component_name.component.html)
• Component typescript file (component_name. component.ts)
• Component unit test typescript file (component_name. component.spec.ts)

Component style file contains all styles specific to component, template file contains the HTML template, Typescript file contains the business logic and Unit test file contains the Unit tests.

Component TypeScript File Deep Drive:

Typically a component typescript file looks like this:

import {Component} from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
//logic goes here
}

Component typescript file is basically a typescript class file where all your business logic resides. We can divide it into three sections. First the Imports section where you import all the modules or packages required. Secondly the component metadata section declared using @Component where we define the component configuration logic like what will be the selector, its template path and styles path. Third is the business logic section, this is the class which contains all our logic.

Angular Modules:

You must have noticed an app.module.ts file in the app directory and must be wondering what this file do. Angular uses components to build web pages and modules to bundle these components into packages. Angular modules are defined by @NgModule decorator, like @Component decorator, typescript does not know about @NgModule decorator either. So we will import it from the @angular/core package as we imported @Component.

Angular module typically looks like this:

@NgModule({
   declarations: [AppComponent],
   imports: [BrowserModule ],
  providers: [],
   bootstrap: [AppComponent]
})

Declarations array contains the component class names and imports array contains names of other modules. Other modules can either be Angular’s built in modules or modules created by user. Modules is an advance topic so we will discuss it later in detail.