Bonnes Pratiques Web & Cloud

Have you ever worked on an application where you had to automatically generate the API documentation? For JavaScript we have tools like ESDoc which take the JSDoc annotations and automatically generate documentation for us. The end result usually looks something like this.

This is enough for most projects but Angular provides some extra semantics on top that can make our documentation even richer! For instance, it allows us to list all the different UI components just by grabbing all classes decorated with @Component. Well, compodoc already does this for us!

(...)

John Papa created a package of snippets for VSCode which improves our productivity by reducing the amount of boilerplate work that we need to perform when:

• Bootstrapping an Angular application.
• Declaring a new component.
• Declaring guards.
• Declaring directive.
• Declaring a route.
• Declaring a service.
• etc.

You can take advantage of the snippets by installing the VSCode extension available here.

View Model

The view model acts as an intermediary between the view and the model, and is responsible for handling the view logic. Typically, the view model interacts with the model by invoking methods in the model classes. The view model then provides data from the model in a form that the view can easily use. The view model retrieves data from the model and then makes the data available to the view, and may reformat the data in some way that makes it simpler for the view to handle. The view model also provides implementations of commands that a user of the application initiates in the view. For example, when a user clicks a button in the UI, that action can trigger a command in the view model.

Implementing MVVM in Angular

Angular supports the principles behind MVVM design pattern in the following approach.

• Model — The model is implemented as an Angular service (Factory or Service).

• View — The View is implemented using Angular ‘template’ (HTML with data bindings) that is rendered into the Angular view directive (ng-view / ui-view). The View is bound to the ViewModel so that when a property is changed in the ViewModel, it is instantly reflected in the View. Data bindings can work both ways in special cases like HTML forms, where a user can manipulate a property directly.

• ViewModel — The ViewModel is implemented as an Angular controller. The ‘ngController’ directive is used to specify a controller for a view. It can expose properties and methods to the view. It can also be attached to the DOM by declaring it in a route definition via the ‘$route’ service.

The above implementation suggestions are applicable to Angular 1.x framework.

« Le Modèle-Vue-VueModèle (en abrégé MVVM, de l’anglais Model View ViewModel) est une architecture et une méthode de conception utilisée dans le génie logiciel. MVVM est originaire de Microsoft et adapté pour le développement des applications basées sur les technologies Windows Presentation Foundation et Silverlight via l’outil MVVM Light par exemple. Cette méthode permet, tel le modèle MVC (Modèle-Vue-Contrôleur), de séparer la vue de la logique et de l’accès aux données en accentuant les principes de binding et d’événement. » (source)

Pour vulgariser, la différence entre MVVM et MVC tient du fait que le MVVM, lui, se repose sur le DataBading et l’évènementiel.  Ça tombe bien, c’est ce qu’AngularJS est !

La vue est couplée aux données via du DataBinding et invoque les méthodes du ViewModel.

Le ViewModel invoque les méthodes du modèle. Il contient la data spécifique à la gestion de l’écran et les méthodes de réponses aux interactions utilisateurs. Il contient également une référence vers un ou des modèles.

Le modèle contient la data et les méthodes de manipulation de cette dernière (calculs, appels de services, …).