ANGULAR: Getting Started with Angular

Angular is a framework that allows browsers to host the full web application without returning to the server for every view change. It provides capabilities for client-side routing and splits the application into reusable, self-contained components.

Angular is built primarily using two building blocks:

• Components — define the user interface for a page or a section of a page. Each component has HTML (Templates), CSS, and TypeScript code.
• Services — written in TypeScript only, and contain all the logic for a component.

Angular Module

An Angular Module is a container of components, directives, and services. Every Angular application has at least one root module (AppModule) that bootstraps the application.

+--------------------------------+
|         Angular Module         |
|                                |
|  Components    Directives      |
|  Services      Pipes           |
|  Imports       Exports         |
+--------------------------------+

Modules help organize the application into cohesive blocks of functionality.

JavaScript vs TypeScript

Angular is built with TypeScript, a superset of JavaScript that adds static typing and other features that make large-scale applications easier to maintain.

Key TypeScript additions over plain JavaScript:

Static Typing

let myString: string = 'Hi';
let age: number = 100;
let birthDate: Date;

Type errors are caught at compile time rather than at runtime, making bugs easier to find.

Interfaces

Interfaces define the shape of an object, acting as a contract for the data structure.

interface ICat {
  name: string;
  age?: number; // optional property marked with ?
}

let fluffy: ICat;

fluffy = {
  name: 'Fluffy',
  age: 7
};

fluffy = {
  name: 'Fluffy'
  // age is optional, so this is valid
};

Classes

class Cat {
  name: string;
  color: string;

  constructor(name: string) {
    this.name = name;
  }
}

Public and Private Accessibility

By default, all class members are public. To restrict access, use the private keyword:

class Cat {
  private name: string; // accessible only within the class
}

A common shorthand initializes class members directly in the constructor signature:

// Concise constructor shorthand
class Cat {
  constructor(private name: string, private color: string) {}
}

// Equivalent to the verbose form:
class CatVerbose {
  private name: string;
  private color: string;

  constructor(name: string, color: string) {
    this.name = name;
    this.color = color;
  }
}

Setting Up the Development Environment

Getting Angular running locally requires three things: a code editor, Node.js, and the Angular CLI.

Step 1 — Install VS Code

Download and install Visual Studio Code, the most widely used editor for Angular development.

Step 2 — Install Node.js with NVM

NVM (Node Version Manager) lets you install and switch between Node.js versions cleanly.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

Once NVM is installed, install Node.js:

nvm install 18.10.0
nvm use 18.10.0

# Or install the latest LTS version
nvm install --lts

Step 3 — Install Angular CLI

The Angular CLI is the command-line tool used to create projects, generate components, run servers, and build applications.

npm install -g @angular/cli@16.0.0

Creating Your First Angular Project

With the CLI installed, scaffold a new project:

ng new my-app

The CLI will ask for configuration options (routing, stylesheet format). After the project is created:

cd my-app
npm install   # install dependencies
npm start     # start the development server

The application will be available at http://localhost:4200.

Angular Project Structure
--------------------------
my-app/
  src/
    app/
      app.component.ts       (root component)
      app.component.html     (root template)
      app.component.css      (root styles)
      app.module.ts          (root module)
    main.ts                  (entry point)
  angular.json               (CLI config)
  package.json               (dependencies)

Summary

Angular provides a complete, opinionated framework for building single-page applications. Its use of TypeScript ensures type safety and better tooling, while the component-and-service architecture keeps code organized and maintainable.

Understanding TypeScript and the Angular CLI are the two foundations you need before diving deeper into components, services, and routing.