{"id":24760615,"url":"https://github.com/oleojake/basic-scenes-architecture-angular","last_synced_at":"2026-04-29T22:01:58.324Z","repository":{"id":273843655,"uuid":"916005528","full_name":"oleojake/basic-scenes-architecture-angular","owner":"oleojake","description":"This repository demonstrates an architecture for structuring an Angular project based on Scenes.","archived":false,"fork":false,"pushed_at":"2025-01-23T09:38:12.000Z","size":141,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-23T11:45:33.431Z","etag":null,"topics":["angular","architecture-components","boilertemplate","material-angular-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oleojake.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-13T09:22:17.000Z","updated_at":"2025-01-23T09:39:08.000Z","dependencies_parsed_at":"2025-01-23T10:33:04.658Z","dependency_job_id":null,"html_url":"https://github.com/oleojake/basic-scenes-architecture-angular","commit_stats":null,"previous_names":["oleojake/basic-scenes-architecture-angular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/oleojake/basic-scenes-architecture-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleojake%2Fbasic-scenes-architecture-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleojake%2Fbasic-scenes-architecture-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleojake%2Fbasic-scenes-architecture-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleojake%2Fbasic-scenes-architecture-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oleojake","download_url":"https://codeload.github.com/oleojake/basic-scenes-architecture-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oleojake%2Fbasic-scenes-architecture-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32445555,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T20:22:27.477Z","status":"ssl_error","status_checked_at":"2026-04-29T20:22:26.507Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","architecture-components","boilertemplate","material-angular-components"],"created_at":"2025-01-28T18:18:34.160Z","updated_at":"2026-04-29T22:01:58.297Z","avatar_url":"https://github.com/oleojake.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Scenes Architecture for a Simple Project\n\nThis repository demonstrates an architecture for structuring an Angular project based on **Scenes**. The goal is to group Angular's core functionalities in a way that simplifies project setup and promotes clean, modular development.\n\n## Core Concept: Scenes\n\nThe main feature of this architecture is the **Scenes**, which are loaded dynamically through Angular's router. Each Scene embeds its logic and displays its content within the corresponding layout, acting as a child. This setup ensures clear separation of layout and functionality, making the application easier to maintain.\n\n### Folder Structure\n\n```bash\napp/\n├── layout/\n├── model/\n├── scenes/\n│   └── components/\n└── services/\n```\n\n### Scaling to More Complex Projects: Using PODS Architecture\n\nFor larger, more complex projects, you can extend this structure by adopting a **PODS architecture**.\n\n**What is PODS Architecture?**\n\n- A POD (Presentation Object Directory) is a modular way of organizing a project. It groups all files related to a specific feature or functionality (e.g., components, services, models, etc.) in a single folder. This makes the code more cohesive and easier to scale.\n\n**Adding an Abstraction Layer (Containers):**\n\n- You can add a **container layer** between Scenes and components to manage logic and data loading.\n- Scenes would focus solely on orchestrating layout and presentation.\n- Containers would handle the data fetching and business logic.\n- Components inside each container would then be responsible for presenting the data.\n\nFor more details on implementing PODS, check out this example in a [React architecture](#https://github.com/oleojake/basic-pod-architecture-react-boiler-template).\n\n---\n\n## Quick Start: Angular Basics\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.7.\n\n### Development Server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.\n\n### Code Scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use:\n\n- `ng generate directive`\n- `ng generate pipe`\n- `ng generate service`\n- `ng generate class`\n- `ng generate guard`\n- `ng generate interface`\n- `ng generate enum`\n- `ng generate module`\n\n### Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n### Running Unit Tests\n\nRun `ng test` to execute unit tests via [Karma](https://karma-runner.github.io).\n\n### Running End-to-End Tests\n\nRun `ng e2e` to execute end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.\n\n### Further Help\n\nFor more help with the Angular CLI, use `ng help` or refer to the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli).\n\n---\n\n## Additional Notes\n\n- This structure works well for small to medium-sized projects but can be adapted for larger applications by introducing reusable shared components and services in a `shared` or `core` folder.\n- Use a `shared` folder to centralize reusable UI components (e.g., buttons, loaders) and services.\n- If the app grows, consider lazy loading modules for better performance.\n\nFeel free to adapt this architecture based on the specific needs of your project!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foleojake%2Fbasic-scenes-architecture-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foleojake%2Fbasic-scenes-architecture-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foleojake%2Fbasic-scenes-architecture-angular/lists"}