Skip to content

🚀 Angular educational project with interactive demos | Components • Routing • Directives • Data Binding | IPI Academy Tuzla

License

Notifications You must be signed in to change notification settings

demirhalilbasic/angular-exercises

Repository files navigation

Angular Vježbe (Angular Exercises)

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.

📚 Project Overview

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.

🎯 Key Features

  • 🏠 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.

Development server

To start a local development server, run:

ng serve

Once 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.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the project run:

ng build

This 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.

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

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.


📖 Documentation


🎓 Academic Context

Course: Web Programming 2024/2025
Institution: International Business-Information Academy (IPI Academy) Tuzla
Laboratory Exercises: 2 & 3
Topics: Angular Components, Routing, Directives & Data Binding


✉️ Contact

linkedin youtube


💬 Feedback

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!

About

🚀 Angular educational project with interactive demos | Components • Routing • Directives • Data Binding | IPI Academy Tuzla

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published