# L'approche MVC

## MVC (Model-View-Controller)

Angular repose principalement sur une approche MVC où :

* **Le "controller" et le "model"** sont représentés par l'instance de la classe TypeScript du composant.
* **La "view"** est le DOM (ou autre) généré à partir du template.
* La "view" est générée à partir des instructions du "template".
* La "view" déclenche des actions sur le "controller" via des "outputs" (ou [event binding](/angular/composants/event-binding.md)).
* Le "controller" met à jour l'état du "model".
* Grâce à son mécanisme de "Change Detection", Angular détecte les changements et met à jour la "view" si nécessaire.

![Angular MVC](/files/-LArFfYuZAd9AXZ_AN8Q)

## Violations du MVC Angular

Malheureusement, il arrive souvent *(et dans de nombreux exemples* [*https://angular.io/guide/user-input#get-user-input-from-a-template-reference-variable*](https://angular.io/guide/user-input#get-user-input-from-a-template-reference-variable)*)* que l'on cède à une approche impérative traditionnelle où le "controller" se permet d'accéder explicitement à la "view" pour lire ou modifier son contenu.

{% hint style="danger" %}
Evitez d'accéder directement à votre "view" depuis le "controller" via des "template local variables" ou le décorateur `@ViewChild` !

Avec cette approche impérative, on ne respecte plus le cycle MVC, on crée alors une dépendance entre le "controller" et la "view" que nous avions éviter jusqu'à présent et le "model" n'est plus la "single source of truth".
{% endhint %}

Cela est bien sûr inévitable dans des cas très particuliers, localisés et bas niveau *(e.g. : implémentation d'un wrapper Angular pour une librairie JavaScript)*.

![Angular MVC violations](/files/-LArFlGSj7A9Aywy3R72)

## MVVM (Model-View-ViewModel)

L'approche MVVM est possible dans certains cas étant donné qu'il ne s'agit de rien d'autre qu'une approche MVC dont le Controller est implicite mais il vaut mieux l'éviter pour garder le contrôle de l'état de votre modèle.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guide-angular.wishtack.io/angular/composants/lapproche-mvc.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.