Introduction to Angular
Dashboard
Topic 1/10
Home › Angular › Introduction to Angular

🅰️ Introduction to Angular

What is Angular, CLI installation, project structure, and your first component.

What is Angular?

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It is developed and maintained by Google. Angular provides a robust, component-based architecture for building scalable web applications.

Note: Angular (v2+) refers to the modern TypeScript-based framework, whereas AngularJS (v1.x) was the legacy JavaScript framework.

Angular vs AngularJS vs React vs Vue

Choosing the right framework depends on app scale, team expertise, and architecture requirements.

Feature Angular (2+) AngularJS (1.x) React Vue
Language TypeScript JavaScript JavaScript / TS JavaScript / TS
Architecture Component-Based MVC Component-Based Component-Based
Type Full Framework Framework Library Progressive Framework
Data Binding Two-way & One-way Two-way One-way Two-way & One-way
Maintained By Google Google Meta Open Source Community

Installing the Angular CLI

The Angular CLI is the official command-line tool used to create, build, serve, and test Angular applications.

terminal Bash 
npm install -g @angular/cli

# Verify CLI version
ng version
Tip: Make sure you have Node.js (LTS version) installed before installing Angular CLI.

Creating Your First Angular App

Generate a new workspace and application using `ng new` command.

terminal Bash 
ng new my-angular-app
cd my-angular-app
ng serve --open
Output
Initial compilation successful. Angular Live Development Server is listening on http://localhost:4200/

Angular Project Structure Breakdown

An Angular workspace consists of configuration files and the `src` folder containing components and assets.

Folder / File Purpose
src/app/ Contains application components, modules, services, and routing.
src/assets/ Stores static assets like images, fonts, and icons.
angular.json CLI configuration for build, serve, and test targets.
package.json Dependencies, devDependencies, and npm scripts.
tsconfig.json TypeScript compiler configuration settings.

Angular NgModule vs Standalone Components

Historically, Angular applications used NgModules (`@NgModule`) to group related features. Angular 14+ introduced Standalone Components, simplifying application structure by eliminating unnecessary module files.

app.component.ts TypeScript 
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: '<h1>Welcome to {{ title }}!</h1>'
})
export class AppComponent {
  title = 'Angular Standalone';
}