{"id":17274489,"url":"https://github.com/idugalic/digital-restaurant-angular","last_synced_at":"2025-04-14T08:54:13.379Z","repository":{"id":39576198,"uuid":"138931589","full_name":"idugalic/digital-restaurant-angular","owner":"idugalic","description":"Frontend. Atomic design. Modular. Monorepo. Nx Workspace. Angular.","archived":false,"fork":false,"pushed_at":"2023-01-07T02:23:17.000Z","size":4917,"stargazers_count":19,"open_issues_count":32,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T22:23:35.326Z","etag":null,"topics":["angular6","modular","monorepo","rest-client","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/idugalic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-27T20:49:35.000Z","updated_at":"2024-09-06T06:02:10.000Z","dependencies_parsed_at":"2023-02-06T10:46:41.433Z","dependency_job_id":null,"html_url":"https://github.com/idugalic/digital-restaurant-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idugalic%2Fdigital-restaurant-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idugalic%2Fdigital-restaurant-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idugalic%2Fdigital-restaurant-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idugalic%2Fdigital-restaurant-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/idugalic","download_url":"https://codeload.github.com/idugalic/digital-restaurant-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852109,"owners_count":21171839,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["angular6","modular","monorepo","rest-client","typescript"],"created_at":"2024-10-15T08:54:02.313Z","updated_at":"2025-04-14T08:54:13.349Z","avatar_url":"https://github.com/idugalic.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [projects](http://idugalic.github.io/projects)/d-restaurant-fe-angular\n\nThis project is created for educational purposes only. There is no restaurant ;)\n\nIt was generated with [Angular CLI](https://github.com/angular/angular-cli) using [Nrwl Nx](https://nrwl.io/nx).\n\nIt is a front-end part of a 'Restaurant Food To Go' solution. It consumes REST API provided by [https://github.com/idugalic/digital-restaurant/drestaurant-apps/drestaurant-monolith](https://github.com/idugalic/digital-restaurant/tree/master/drestaurant-apps/drestaurant-monolith)\n\nCustomers use the website to place food orders at local restaurants. Application/s coordinates a network of couriers who deliver the orders.\n\n\n## Nrwl Extensions for Angular (Nx)\n\nNx is an open source toolkit for enterprise Angular applications.\n\nNx is designed to help you create and build enterprise grade Angular applications. It provides an opinionated approach to application project structure and patterns.\n\n## Architecture overview\n\nAngular apps are modular, and Angular has its own modularity system called NgModules. An NgModule is a container for a cohesive block of code dedicated to an application domain, a workflow, or a closely related set of capabilities. It can contain components, service providers, and other code files whose scope is defined by the containing NgModule. It can import functionality that is exported from other NgModules, and export selected functionality for use by other NgModules.\n\nNgModule metadata does the following:\n\n - Declares which components, directives, and pipes belong to the module.\n - Makes some of those components, directives, and pipes public (export) so that other module's component templates can use them.\n - Imports other modules with the components, directives, and pipes that components in the current module need.\n - Provides services that the other application components can use.\n\nThere are [five general categories of Angular modules](https://angular.io/guide/module-types):\n\n - Domain feature modules\n - Routed feature modules\n - Routing modules\n - Service feature modules\n - Widget feature modules\n\nWhile the categorization describe the use of each type and their typical characteristics, in real world apps, you may see hybrids.\n\nThis application is using:\n\n - Routed (Domain) feature modules\n - Widget (UI) feature modules\n - Shared (Service \u0026 Data) feature module\n\n### Routed (Domain) feature modules\nRouted feature modules are domain feature modules whose top components are the targets of router navigation routes. \n\nRouted feature modules don’t export anything because their components never appear in the template of an external component.\n\n - [Restaurant module](libs/drestaurant-restaurant/src/lib/drestaurant-restaurant.module.ts) \n    - Managing restaurant menus and other information including location and opening hours\n    - A restaurant view of an order  (managing the preparation of orders at a restaurant)\n - [Order module](libs/drestaurant-order/src/lib/drestaurant-order.module.ts)\n    - Order taking and fulfillment management\n - [Customer module](libs/drestaurant-customer/src/lib/drestaurant-customer.module.ts) \n    - Managing information about customers/consumers\n    - A customer view of an order (managing the orders-customer invariants: credit and order limits)\n - [Courier module](libs/drestaurant-courier/src/lib/drestaurant-courier.module.ts)\n    - Managing courier information\n    - A courier view of an order (managing the delivery of orders)\n\n#### Pub-Sub communication model\nThe communication between routed (feature) components is event driven, and based on publish-subscribe model. For example a [customer-create.component](libs/drestaurant-customer/src/lib/customer-create/customer-create.component.ts) will trigger an event on successfull creation of a customer (or event will be sent over the 'web socket' from the backend), and [customer-list.component](libs/drestaurant-customer/src/lib/customer-list/customer-list.component.ts) is subscribed to it, so it can re-fetch and refresh a list of customers.\n\n### Widget (UI) feature modules\nA widget module makes components, directives, and pipes available to external modules. Many third-party UI component libraries are widget modules.\n\nA widget module should consist entirely of declarations, most of them exported.\n\nA widget module should rarely have providers.\n\nMany, if not most UI Components, can be abstracted into a style guide or UI library for the project. Using a shared style guide for an organization or project improves reusability, increases the consistency between the different views that form a web application and encourages the communication between the different teams. It can also ensure that a unified brand is used across different products. To get ideas of component design and style guide maintainability I recommend Brad Frost’s book Atomic Design.\n\n#### Parent-Child communication model\nUI Components behave like pure functions taking in the data via @Input and emitting data via @Output. This allows the majority of our UI to not know the underlying implementation detail of where the data came from. For example a [side-menu-item.component](libs/drestaurant-ui/src/lib/side-menu-item/side-menu-item.component.ts) takes in a @Input of an item to display. This allows the side-menu-item.component component to have the only responsibility of rendering the item when the data is passed to it.\n\nThere are downsides to this though. As the feature grows in complexity we may have a deeply nested UI  component structure. Since UI component events only bubble up one level at a time we will have to manually pass up to each parent component. Introducing other sub routed (feature) components (customer-list.component, customer-detail.component, customer-create.component) can help elevate this.\n\n - [UI module](libs/drestaurant-ui/src/lib/drestaurant-ui.module.ts)\n\n\n#### Theming our custom widget (UI) components\nOur application supports use of potentially unlimited number of [different themes](apps/drestaurant-monolith/src/styles/_theme.scss). This is useful in itself but these themes will only style components provided by the Angular Material library itself.\n\nTo extend this functionality for our case, we put our general layout and styling to the [side-menu-item.component.scss](libs/drestaurant-ui/src/lib/side-menu-item/side-menu-item.component.scss), but we also create a new file [_side-menu-item.component.theme.scss](libs/drestaurant-ui/src/lib/side-menu-item/_side-menu-item.component.theme.scss) where we are using style rules which have something to do with the color. In our mixin, we retrieved all the necessary theme variables needed for the styling of our custom component.\n\nTo use our custom component theme, we have to include it in the application [styles.scss](apps/drestaurant-monolith/src/styles/styles.scss) file.\n\n### Shared (Service \u0026 Data) feature module\nShared module make 'services', data' and 'util' classes available to Widget(UI) and Routed(Domain) modules.\n\n - [Shared module](libs/drestaurant-shared/src/lib/drestaurant-shared.module.ts)\n\n\n## Development server\n\nRun `ng serve drestaurant-monolith` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Build\n\nRun `ng build drestaurant-monolith` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.\n\n## Running unit tests\n\nRun `ng test drestaurant-monolith` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\nYou can run tests for each specific library:\n - `ng test drestaurant-order`\n - `ng test drestaurant-restaurant`\n - `ng test drestaurant-customer`\n - `ng test drestaurant-courier`\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).\nBefore running the tests make sure you are serving the app via `ng serve`.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidugalic%2Fdigital-restaurant-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidugalic%2Fdigital-restaurant-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidugalic%2Fdigital-restaurant-angular/lists"}