Modularisation

Each Angular components has to be part of a module*.

The scale goes from one module for the entire project to «SCAM» (single component Angular modules).

Modules are essential for code splitting as they can be lazy-loaded.

* we'll ignore the new standalone components for today

Angular Module Categories

• Domain: organised around a feature
• Routed: destination of a route
• Routing: routing configuration for other modules
• Service: utility services
• Widget: collection of reusable parts (3rd party libs)
• Shared: commonly used parts across the app

How do you divide your application into different Angular modules?

• Do you know/use «SCAM»?
• How do you enforce the structure?
• How do you handle shared logic/functionality?
• Are you using lazy-loading? why?

Structure

Besides components, Angular has directives and the concept of (singleton) services that can be injected.

But you can also import functions from JS modules.

More complex applications might need a state managment library.

How is your code structured?

• Do you differentiate types of components? (smart vs. dumb, atomic design)
• Where is the state kept?
• How does the data flow look like?
• Where is the domain? Are you using domain objects?

Directives

Directives were the way of AngularJS but have since gone out of fashion.

Are directives underrated?

• Do you use them?
• Are they bad?
• Is their decline justified?
• Are there forgotten powers in directives?

Testing

Angular comes with a TesteBed to setup the unit under test and interact with the template.

Alternatively you can just test the component class without DOM.

E2E tests usually complement the setup to varying degrees.

How do you test your Angular application?

• Do you use the TestBed?
• Do you use other testing libraries?
• Is the template part of unit tests or e2e tests?
• Mocking or injecting services? Are there integration tests?