Architecture¶
Folder structure¶
The application is located in the src/app folder and is structured as follows:
app
├── core
│ ├── guards
│ └── services
├── domains
│ ├── home
│ ├── settings
│ ├── tabs
│ └── tasks
├── shared
│ ├── directives
│ └── shared.module.ts
├── store
├── widgets
│ ├── directives
│ └── transloco
├── app.component.html
├── app.component.scss
├── app.component.ts
└── routes.ts
core¶
The core folder contains services and guards that are used throughout the application.
domains¶
The domains folder contains the different domain NgModules, which are used to organize the code related to a certain feature of the application.
shared¶
The shared folder contains the shared NgModules, which is used to share a set of commonly used components, directives, and pipes across the application.
store¶
The store folder contains the elf store, which is a state management library for Angular applications.
widgets¶
The widgets folder contains multiple widget NgModules, that are used to share individual components, directives, and pipes across the application.
Runtime optimization¶
OnPush change detection¶
Change detection is the process of determining if the application state has changed, and if any DOM needs to be updated.
This starter template uses the OnPush change detection strategy to improve performance.
Angular standalone APIs¶
This starter template uses the new standalone APIs which are available since Angular 14.
They provide a simplified way to build Angular components by reducing the need for NgModules.
See Getting started with standalone components for more information.
Ionic components¶
Please make sure to import Ionic components from @ionic/angular/standalone instead of @ionic/angular.
Example: