Getting Started

Getting Started#

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Let’s go through the essential steps to get started with Angular development.

👉 New to App-Generator? Sign IN with GitHub or Generate Web Apps in no time (free service).

Prerequisites#

Before you begin, ensure you have:

  1. Node.js and npm: Angular requires Node.js version 16.14.0 or later.

  • Check your version: node -v and npm -v

  • Download from [nodejs.org](https://nodejs.org/) if needed

Step 1: Install Angular CLI#

The Angular CLI is a command-line interface tool for creating, developing, scaffolding, and maintaining Angular applications.

npm install -g @angular/cli

Verify installation:

ng version

Step 2: Create a New Angular Project#

ng new my-first-app

During the setup process, the CLI will ask you:

  • If you want to add Angular routing (recommended for most applications)

  • Which CSS preprocessor you want to use (CSS, SCSS, SASS, LESS, etc.)

Step 3: Navigate to Your Project Directory#

cd my-first-app

Step 4: Serve the Application#

ng serve

This builds and serves your app, rebuilding on file changes. Open your browser to http://localhost:4200/ to see the application.

Step 5: Understanding the Project Structure#

  • src/app: This is where most of your code will go

    • app.component.ts: The main component

    • app.module.ts: The root module that defines how the application parts fit together

  • src/assets: For images and other assets

  • src/environments: For environment-specific configuration

  • angular.json: Angular CLI configuration

  • package.json: npm dependencies and scripts

Step 6: Create a New Component#

ng generate component hello-world

Or the shorthand:

ng g c hello-world

Step 7: Understanding Angular Concepts#

Components#

Components are the fundamental building blocks of Angular applications.

// hello-world.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-hello-world', templateUrl: './hello-world.component.html', styleUrls: ['./hello-world.component.css'] }) export class HelloWorldComponent { message = 'Hello, Angular!'; }

Templates#

Templates define the component’s UI with HTML and Angular-specific syntax.

<!-- hello-world.component.html --> <div> <h1>{{ message }}</h1> <button (click)="message = 'Hello, World!'">Change Message</button> </div>

Services#

Services are used for data sharing and business logic.

ng generate service data 
// data.service.ts import { Injectable } from '@angular/core'; @Injectable({  providedIn: 'root' }) export class DataService {  getItems() {  return ['Item 1', 'Item 2', 'Item 3'];  } }

Modules#

Modules help organize your application into cohesive blocks of functionality.

// app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { HelloWorldComponent } from './hello-world/hello-world.component'; @NgModule({ declarations: [  AppComponent,  HelloWorldComponent ], imports: [  BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Step 8: Building for Production#

When you’re ready to deploy:

ng build --prod

This creates a dist/ folder with all the files needed to deploy your application.

Next Steps#

  • Explore Angular’s official documentation

  • Add routing to navigate between components

  • Connect to APIs using HttpClient

  • Implement forms (template-driven and reactive)

  • Set up testing with Karma and Jasmine

Common Commands#

  • ng new - Create a new project

  • ng serve - Develop locally

  • ng generate (or ng g) - Generate components, services, etc.

  • ng test - Run tests

  • ng build - Build for production

  • ng update - Update Angular version