This project was developed as part of the Web Programming course at the International Business-Information Academy (IPI Academy) Tuzla. It demonstrates core Angular concepts including components, routing, directives, and data binding through practical, interactive examples.
This Angular application serves as a comprehensive learning resource covering:
- Single Page Application (SPA) architecture with client-side routing
- Component-based development with standalone components
- Angular Directives: Structural (
*ngIf,*ngFor,*ngSwitch), Attribute (ngClass,ngStyle), and Custom directives - Data Binding: Interpolation, Property Binding, Event Binding, and Two-Way Binding
- Modern Angular features using Angular 21 with TypeScript
The project includes interactive demo pages where you can experiment with each concept in real-time, making it an excellent hands-on learning tool for Angular beginners.
- 🏠 Home Page - Welcome page with project introduction
- ℹ️ About Page - Information about the project
- 🔧 Directives Demo - Interactive examples of all Angular directives
- 🔗 Data Binding Demo - Live demonstrations of all data binding types
- 🎨 Responsive Design - Clean, modern UI with custom styling
- 📱 Navigation - Smooth SPA navigation without page reloads
This project was generated using Angular CLI version 21.0.0.
To start a local development server, run:
ng serveOnce the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
ng generate component component-nameFor a complete list of available schematics (such as components, directives, or pipes), run:
ng generate --helpTo build the project run:
ng buildThis will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.
To execute unit tests with the Karma test runner, use the following command:
ng testFor end-to-end (e2e) testing, run:
ng e2eAngular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.
For detailed documentation in Bosnian/Croatian/Serbian language, see DOKUMENTACIJA.md.
- DOKUMENTACIJA.md - Comprehensive step-by-step guide in Bosnian/Croatian/Serbian
- Angular Documentation - Official Angular documentation
- TypeScript Documentation - Official TypeScript documentation
Course: Web Programming 2024/2025
Institution: International Business-Information Academy (IPI Academy) Tuzla
Laboratory Exercises: 2 & 3
Topics: Angular Components, Routing, Directives & Data Binding
Thank you for exploring Angular Exercises!
If you have questions, suggestions, or collaboration ideas regarding this educational project, feel free to open an issue or reach out directly.
This project is intended for educational purposes as part of university coursework. Contributions and feedback are welcome!