01 — Angular Fundamentals

What is Angular?

Angular is a TypeScript-based platform and framework built by Google for building single-page applications (SPAs). Unlike React (library), Angular is a full framework — it includes routing, forms, HTTP client, DI, and more out of the box.

---

Angular CLI

# Install globally
npm install -g @angular/cli

# Create new project (standalone by default in Angular 17+)
ng new my-app --style=scss --routing --ssr=false

# Serve with live reload
ng serve                    # http://localhost:4200
ng serve --port 3000        # Custom port
ng serve --open             # Auto-open browser

# Generate code
ng generate component features/dashboard    # or: ng g c features/dashboard
ng generate service core/auth               # ng g s core/auth
ng generate pipe shared/truncate            # ng g p shared/truncate
ng generate directive shared/highlight      # ng g d shared/highlight
ng generate guard core/auth                 # ng g guard core/auth
ng generate interceptor core/auth           # ng g interceptor core/auth
ng generate module features/admin           # ng g m features/admin (NgModule-based)

# Build
ng build                    # Production build → dist/
ng build --configuration=staging

# Test
ng test                     # Unit tests (Karma/Jest)
ng e2e                      # E2E tests

# Lint
ng lint                     # ESLint

# Update Angular
ng update @angular/core @angular/cli

---

Project Structure (Standalone — Angular 17+)

my-app/
├── src/
│   ├── app/
│   │   ├── core/                    # Singleton services, guards, interceptors
│   │   │   ├── auth.service.ts
│   │   │   ├── auth.guard.ts
│   │   │   └── auth.interceptor.ts
│   │   ├── shared/                  # Reusable components, pipes, directives
│   │   │   ├── components/
│   │   │   ├── directives/
│   │   │   └── pipes/
│   │   ├── features/                # Feature folders (lazy-loaded routes)
│   │   │   ├── dashboard/
│   │   │   │   ├── dashboard.component.ts
│   │   │   │   ├── dashboard.component.html
│   │   │   │   ├── dashboard.component.scss
│   │   │   │   └── dashboard.routes.ts
│   │   │   └── admin/
│   │   ├── models/                  # Interfaces and types
│   │   │   └── user.model.ts
│   │   ├── app.component.ts         # Root component
│   │   ├── app.component.html
│   │   ├── app.config.ts            # Application config (providers)
│   │   └── app.routes.ts            # Root routes
│   ├── assets/                      # Static files
│   ├── environments/                # Environment configs
│   │   ├── environment.ts
│   │   └── environment.prod.ts
│   ├── styles.scss                  # Global styles
│   ├── index.html
│   └── main.ts                      # Bootstrap entry
├── angular.json                     # CLI configuration
├── tsconfig.json
├── tsconfig.app.json
└── package.json

---

Bootstrapping (Standalone — Angular 17+)

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';

import { routes } from './app.routes';
import { authInterceptor } from './core/auth.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(withInterceptors([authInterceptor])),
  ],
};

app.routes.ts

import { Routes } from '@angular/router';

export const routes: Routes = [
  { path: '',        redirectTo: 'dashboard', pathMatch: 'full' },
  {
    path: 'dashboard',
    loadComponent: () => import('./features/dashboard/dashboard.component')
      .then(m => m.DashboardComponent),
  },
  {
    path: 'admin',
    loadChildren: () => import('./features/admin/admin.routes')
      .then(m => m.ADMIN_ROUTES),
  },
  { path: '**',      redirectTo: 'dashboard' },
];

---

Standalone Components vs NgModules

Angular 17+ defaults to standalone components — no NgModule required.

Standalone (Modern — Recommended)

@Component({
  selector: 'app-dashboard',
  standalone: true,                          // No module needed
  imports: [CommonModule, RouterLink],       // Import what you need
  templateUrl: './dashboard.component.html',
})
export class DashboardComponent {}

NgModule (Legacy — Still Supported)

@NgModule({
  declarations: [DashboardComponent],   // Components belong to modules
  imports: [CommonModule, RouterModule],
  exports: [DashboardComponent],
})
export class DashboardModule {}

When to Use What

---

angular.json — Key Settings

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "styles": ["src/styles.scss"],
            "scripts": [],
            "assets": [
              { "glob": "**/*", "input": "public" }
            ]
          },
          "configurations": {
            "production": {
              "budgets": [
                { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" }
              ],
              "outputHashing": "all"
            },
            "staging": {
              "fileReplacements": [
                { "replace": "src/environments/environment.ts", "with": "src/environments/environment.staging.ts" }
              ]
            }
          }
        }
      }
    }
  }
}

---

Environment Configuration

// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.myapp.com',
};

// Usage in a service
import { environment } from '../../environments/environment';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private baseUrl = environment.apiUrl;
}

---

Key Takeaways

• Angular 17+ uses standalone components by default — no NgModules needed for new projects
• Use ng generate to scaffold components, services, guards, etc. consistently
• Structure your app into core/ (singletons), shared/ (reusable), and features/ (routes)
• app.config.ts replaces the old AppModule for configuring providers
• angular.json controls build, serve, test, and environment settings
• Always lazy-load feature routes with loadComponent or loadChildren