but how?
Zlatko Duric (@zladuric)
...decisions that are hard to change.
- Martin Fowler
We have an empty app. How do we add a page, a list of things (posts, people, tweets, videos...)
How do we do that with this "feature module"?
Easy: create a feature module!
ng generate module a-module --routing
CREATE src/app/a-module/a-module-routing.module.ts (250 bytes)
CREATE src/app/a-module/a-module.module.spec.ts (284 bytes)
CREATE src/app/a-module/a-module.module.ts (284 bytes)
We need to create another feature, a list of things, but aligned to right!
Easy! Copy-paste!
@NgModule({
imports: [
CommonModule,
BRoutingModule,
],
declarations: [ BComponent, BListComponent ],
exports: [ BListComponent ],
})
export class BModule { }
we want it lazy loaded!
Will this work with lazy loading?
// A Module router
...
{ path: '', component: AComponent },
...
// B Module router
{ path: '', component: BComponent },
// Working version A Module
...
imports: [
CommonModule,
ARoutingModule,
BModule,
],
...
// Broken version
...
imports: [
CommonModule,
BModule,
ARoutingModule,
],
...
Can we guarantee the order?
Feature module | Guidelines |
---|---|
Domain | Provide app-specific "business" components |
Routed | Pages in the app |
Routing | Provide routing for ^, they're always in pairs |
Service | provide "utility services": http, messaging, dialogs |
Widget | generic fidgets that you can put in any other webapp. |
Domain module:
- usually a presentation component and it's supporting directives, pipes, component
- exports it's main "feature" component, e.g. TweetComponent
- does not "work" alone, imported by other modules
Routed domain module:
- no exports
- no providers
- lazy loaded
- goes together with:
Routing module:
- only ever defines routes for it's page,
- top-level path: '', but can have more paths and children
Services module:
- provide global services, e.g messaging and error handling
- provide all interceptors
Widget modules
- not a module, but modules
- import only what you need
- tree-shaker sends his love
Module | What it does |
---|---|
CoreModule | Without this, the app can't even. - Shell: header, footer, nav, 404, grid - Comms: Infrastructure for Backend: HttpClient, interceptors etc. - Auth: it's sometimes a feature, but still core - Messaging: popups, dialogs, toasts |
Shared Modules | All the UI widgets: date pickers, data table customization etc. NOT a module. |
Pages | Routed domain modules: timeline, settings page etc |
Page Features | Domain moduleBusiness widgets, e.g. TweetCmp |
Property | What it does |
---|---|
declarations | Feature component, all the little helpers |
imports | dependencies |
providers | (almost) nothing! |
exports | Just the public API |
Property | What it does |
---|---|
declarations | Container component, "presentation" components |
imports | Router module, deps, Feature module |
providers | nothing! |
exports | nothing! |
Property | What it does |
---|---|
declarations | Nothing |
imports | dependencies |
providers | utility services |
exports | nothing! |
Ideas?