How an Angular App Is Built
Before you write any Greenhouse code, it helps to know where each kind of code will live. Angular gives every job a named home. Once you know the homes, reading an unfamiliar Angular project becomes a matter of opening the right file.
The rule
Components draw the screen; services do the shared work; the router picks components.
Components are the building blocks you can see. Each one is a TypeScript class plus a template (its HTML) and optional styles. Components nest, so the whole app is a tree: the root component contains a plant list, which contains plant cards, which contain a water button.
Services are plain classes for work that is not about one piece of screen: fetching plants from a server, remembering the signed-in user, calculating when a plant is due for water. Angular hands a service to any component that asks, through dependency injection.
@Injectable({ providedIn: 'root' })
export class PlantService {
private http = inject(HttpClient);
getPlants() {
return this.http.get<Plant[]>('/api/plants');
}
}The router watches the URL and decides which component fills the page: /plants shows the list, /plants/7 shows one plant.
Two helpers work inside templates:
- Directives add behaviour to elements, like highlighting a card on hover.
- Pipes reshape a value for display, like turning a date into
3 Mar.
Finally, Angular compiles templates into fast JavaScript ahead of time, and bootstrapApplication starts the root component inside index.html.
The shortcut
Ask one question of any piece of work: "Can I see it?" If yes, it is a component (or a directive or pipe helping a template). If no, and several components need it, it is a service. If it is about which page is showing, it is the router.
The reminder banner
You can see it, so it is a component:
WaterReminder.
The trap is stuffing server calls and calculations into components. It works at first, but the moment a second component needs the same logic you end up copying it. Keep components thin and let services carry shared logic.
Drills
Answer fast — trust the rule.
Where should the code that fetches plants from the server live?
What are the two parts every component combines?
A visitor goes from /plants to /settings. Which part decides what appears?
Why is an Angular app described as a tree?
Remember
- Components draw the screen, services hold shared work, the router chooses components by URL.
- Shortcut: "Can I see it?" Yes is a component; no and shared is a service.
- Trap: fat components that do their own fetching and calculating.