Skip to content
Stefan Saring edited this page May 3, 2024 · 19 revisions

Angular Styleguide

There are different ways how an Angular application can be developed which is dependent on the individual conditions of the project and the developer team.

Still this styleguide is like a manual which shows how Angular applications can be implemented. The goal is to provide a guideline for ZEISS Digital Innovation Angular projects and give developers the know-how to implement Angular applications and to understand existing code.

For ZDI Angular projects we came to the conclusion that using Redux as state management system is beneficial in many ways. However, using Redux is highly influencing of how components are built and how the project layout is done. For this reason a big part of this styleguide will provide guidance of how to structure and implement Angular applications with Redux.

Motivation for this styleguide

Both Angular and Redux have very good documentation and tutorials. The goal of this styleguide is to offer an extension for these resources to answer essential questions which are not part of the official documentation:

  • How can I structure my application most meaningfully if I use Angular and Redux together with NgRx as the integration library?
    • Where should I store which files?
    • How can I structure my domains?
  • How can I use the type system of TypeScript together with Redux to eliminate mistakes already at compile time?
  • Which Best Practices are recommended by the members of the web initiative from gathered project experiences?

The following subjects are NOT goals of this styleguide:

  • This styleguide is not an Angular tutorial
  • This styleguide is not a Redux tutorial

Contents

Project Structure

Linting & Formatting

Styling

NgRx

Testing

IDE Integration

Best Practices

Example Application

Security & Performance

Clone this wiki locally