Mean Stack Tutorial

Introduction to Mean Stack

• Mean Stack: MongoDB, Express, Angular, and Node.js
• Backend & Frontend setup
• CRUD operations implementation (Create, Read, Update, Delete)
• Requires Node.js (version 20+), Visual Studio Code, and MongoDB Atlas
• Full code available on GitHub

Technologies in Mean Stack

1. MongoDB: Database layer
2. Node.js & Express: Application layer
3. Angular: Presentation layer

Project Overview

• Develop an application to record and display employee information
• Use basic CRUD operations
• Backend (MongoDB, Node.js, Express)
• Frontend (Angular)
• Directory structure setup

Initial Setup

• Create directories for project, server, and source code
• Initialize package.json using npm init
• Install dependencies: cors, dotenv, express, mongodb, typescript
• Create config and environment files
• Set up basic server structure:
  • database.ts
  • employee.ts
  • employee-routes.ts
  • server.ts

Backend Development

Configuration Files

• tsconfig.json:
  • Monitor source directory
  • Output in dist
  • Use CommonJS and ES2016

Employee Interface (employee.ts)

• Define employee properties: name, position, level, _id
• Import MongoDB

Database Connection (database.ts)

• Import MongoDB and employee interface
• Export collections
• Connect to database with validation:
  • Schema validation using JSON Schema
  • Create 'employees' collection if not exists

Environment Variables (.env)

• Define Atlas URI
• Get connection string from MongoDB Atlas UI

Server Configuration (server.ts)

• Load environment variables, Express, and CORS
• Connect to MongoDB using connectToDatabase
• Start Express server on port 5200

Creating RESTful API (employee-routes.ts)

• Import Express and MongoDB
• Implement GET, POST, PUT, DELETE endpoints
• Define routes for employee endpoints
• Use TS Node to start server: npx ts-node src/server.ts

Frontend Development with Angular

Angular CLI Setup

• Install Angular CLI
• Scaffold application using ng new command
• Serve Angular app using ng serve -o
• Install Angular Material using ng add @angular/material

Employee Interface (employee.ts)

• Define employee structure similar to backend

Employee Service (employee.service.ts)

• Separate business logic from presentation logic
• Use HTTP client for API interactions
• Define methods for CRUD operations

App Configuration (app.config.ts)

• Add HTTP client for Angular app
• Import necessary modules and providers

Employee List Component

• Generate component for displaying employee list
• Use Angular Material for table and buttons
• Define methods to fetch, delete employees

Route Configuration (app.routes.ts)

• Set up routing for Angular app
• Import components and define paths

Create and Edit Employee Components

Employee Form Component (employee-form.component.ts)

• Reusable form for creating/editing employees
• Define validation rules
• Emit events for form submission

Add Employee Component (add-employee.component.ts)

• Use employee form to add new employees
• Handle form submission and navigate back to list

Edit Employee Component (edit-employee.component.ts)

• Use employee form for editing existing employees
• Fetch employee data by ID
• Update employee and handle form submission

Testing Application

• Add, edit, delete employee records through UI
• Verify CRUD operations work as expected

Additional Resources

• Developer Center
• Community Forums