Skip to content

Latest commit

 

History

History
109 lines (79 loc) · 3.81 KB

Angular.md

File metadata and controls

109 lines (79 loc) · 3.81 KB

🌐 Angular Project Setup Guide

This README walks you through setting up an Angular application (standalone or module-based), including CLI usage and file structure. Separate .ts, .html, and .css files are used for each component.

Install Angular CLI

Install globally (make sure node & npm are installed):

npm install -g @angular/cli
ng version

Create a New Angular Project

Standalone (default for Angular 17+)

ng new my-angular-app
cd my-angular-app

NgModule‑based (legacy/project need)

ng new my-angular-app --no-standalone
cd my-angular-app

This creates app.module.ts as the main module file

Angular Project File Structure Overview

Workspace/layout generated by CLI: includes angular.json, package.json, tsconfig.json, .gitignore, etc. Angular

Key src/ subfolders:

  • src/app/: your app’s logic (components, services, routes)
  • index.html, main.ts, styles.css, polyfills.ts
  • assets/, environments/, etc. 
    component-name/
├── component-name.component.ts
├── component-name.component.html
├── component-name.component.css
└── component-name.component.spec.ts

    Each generated component will have:

    • .ts (TypeScript logic)
    • .html (template)
    • .css (styling)
    • .spec.ts (tests)

    All in separate files for clean structure.

    🔥 Types of Angular Applications

    Type Description
    Standalone Modular, self-contained. No NgModule needed. Default in Angular 17+.
    NgModule-based Traditional. Uses root and feature modules for grouping app functionality.

    ⚡ Essential CLI Commands

    Run these commands within your project directory (cd my-angular-app).

    1. Generate a Component

    Creates component with .ts, .html, .css, .spec.ts:

    📦 Folder Best Practices

    • components/ — Reusable UI components (each in its own folder)
    • services/ — Business logic and shared data
    • models/ — TypeScript interfaces and types
    • core/ — Singleton services, guards, interceptors, etc.
    • shared/ — Modules and components shared across the app
    • pages/ — Page-level or feature views

    📝 Commands Reference Table

    Purpose Command Notes
    New App ng new my-app Separate .html, .ts, .css files
    New Standalone Component ng g c hero --standalone Default (Angular 17+)
    New Module-based Component ng g c hero --module app For NgModule/app module approach
    New Service ng g s hero Service in src/app

    ⚖️ Standalone vs NgModule Comparison

    Feature Standalone NgModule-based
    Registration No NgModule required Use declarations in NgModule
    Imports Import per-component Group via NgModule imports
    Use Case Modern, modular apps Large apps, shared features
    CLI Support Default (Angular 17+) Still fully supported

    📚 References

    •