Angular Template

A clean, reusable Angular template with routing and navigation.

Features

• Angular 19 with standalone components
• Routing with multiple pages (Home, About, Projects, Contact)
• Material Design components for UI
• SCSS styling support
• Responsive navigation with top navigation bar

Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn

Installation

1. Clone this repository
2. Install dependencies:

   npm install

Development

Run the development server:

npm start

The application will open at http://localhost:4200/.

Building

Build the project for production:

npm run build

Project Structure

src/
├── app/
│   ├── home/              # Home page component
│   ├── about/             # About page component
│   ├── contact/           # Contact page component
│   ├── projects/          # Projects page component
│   ├── navigation/        # Top navigation component
│   ├── page-not-found/    # 404 page component
│   ├── app.component.*    # Root component
│   ├── app.config.ts      # App configuration
│   └── app.routes.ts      # Routing configuration
├── assets/                # Static assets
├── styles.scss           # Global styles
├── main.ts               # Application bootstrap
└── index.html            # Main HTML file

Customization

1. Navigation: Update the brand name in src/app/navigation/navigation.component.html
2. Routes: Modify routes in src/app/app.routes.ts
3. Components: Customize each page component in their respective folders
4. Styles: Update global styles in src/styles.scss or component-specific styles

Available Scripts

• npm start - Start development server
• npm run build - Build for production
• npm test - Run tests
• npm run watch - Build with file watching

License

This project is open source and available under the MIT License.