A comprehensive notes management application built with Angular 19.2.19. This project demonstrates Angular fundamentals including standalone components, routing with guards, services, form validation, and TypeScript interfaces.
- Standalone components architecture
- Angular Router with route guards (
AuthGuard) - Service-based state management (authentication, notes, toast notifications)
- Template-driven and reactive form patterns
- Custom form validators
- TypeScript interfaces and type safety
- Component communication via services
- CRUD operations (Create, Read, Update, Delete)
- Modal confirmation dialogs
- Toast notification system
- SCSS styling with responsive design
- Framework: Angular 19.2.19 (standalone components)
- Styling: SCSS
- Testing: Karma & Jasmine
- Build Tool: Angular CLI 19.2.19
- Language: TypeScript 5.7.2
src/app/app.component.ts: root component with router outletsrc/app/app.routes.ts: application routing configurationsrc/app/components/: feature components (authentication, notes, modals, toast)src/app/services/: business logic (authentication, notes, toast management)src/app/guards/: route protection (auth.guard.ts)src/app/validators/: custom validation rulessrc/app/interfaces/: TypeScript contracts (user, note, toast)src/styles.scss: shared application stylessrc/main.ts: application bootstrap
login: user login with authenticationregister: new user registrationnotes-page: container component for notes featuresnotes-form: create/edit note formnotes-list: display all user notesconfirmation-modal: reusable confirmation dialogtoast: notification display component
authentication.service.ts: login, register, token managementnote.service.ts: CRUD operations for notestoast.service.ts: notification lifecycle management
- Node.js 18+
- npm 9+
npm installnpm startOpen: http://localhost:4200/
The application will automatically reload when you modify source files.
npm run buildProduction build artifacts are stored in the dist/ directory.
npm start- start Angular dev servernpm run build- production buildnpm run watch- development build in watch modenpm test- unit tests with Karma
- Root component:
src/app/app.component.ts - Routing config:
src/app/app.routes.ts - Auth guard:
src/app/guards/auth.guard.ts - Authentication service:
src/app/services/authentication.service.ts - Notes service:
src/app/services/note.service.ts - Notes page:
src/app/components/notes-page/notes-page.component.ts - Note validators:
src/app/validators/note.validators.ts
/login- User login page/register- User registration page/notes- Notes management page (protected by AuthGuard)/- Redirects to login
- User navigates to
/loginor/register - Login: credentials validated → token stored → redirect to
/notes - Register: new user created → redirect to
/login - Protected route:
AuthGuardchecks authentication → grant/deny access - Token validation: used on subsequent API calls
- Read:
notes-pageloads all user notes vianote.service - Create:
notes-formin create mode → POST new note → refresh list - Update: click Edit → populate form → submit → PUT to update → refresh list
- Delete: click Delete → confirmation modal → DELETE → refresh list
- List:
notes-listdisplays all notes with Edit/Delete actions
- Cannot login: Check authentication credentials and service configuration
- Router shows blank page: Verify
AuthGuardimplementation and token storage - Notes not loading: Confirm
note.serviceis properly injected innotes-page - Form validation not working: Check
note.validators.tsand template binding - Dependency issues: Re-run
npm install
- Add search and filter functionality to notes list
- Add sorting options (date, title, modified)
- Implement local storage or backend persistence
- Add rich text editor for note content
- Add categories/tags for note organization
- Add note sharing functionality
- Implement optimistic UI updates
