Est-ce qu’Angular 2+ est MVVM ?
Le 06 décembre 2016
J’ai lu cela à différents endroits maintenant : « Angular est MVVM » ou « Angular est MVC ». Huh, est-ce le cas ? Je ne le pense pas.
En fait, on ne peut pas répondre à la question par un simple oui ou non. Tout d’abord, angular 2+ n’est pas MVC ! Honnêtement, je ne sais pas, comment les gens arrivent à ce genre de choses, parfois.
Ceci est un lien affilié. Nous pouvons recevoir une commission pour les achats effectués par le biais de ce lien.
Au contraire, il suit une architecture orientée composants. Il n’est donc pas MVVM non plus. Cependant, angular met en œuvre un grand nombre des concepts de MVVM. Donc, si vous en avez besoin, vous pouvez dire qu’angular suit le principe MVVM. Pour voir les similitudes, nous allons examiner de plus près le principe dans le contexte des composants angulaires.
« Très bien… mais qu’est-ce que MVVM ? »
MVVM signifie Model, View, ViewModel. C’est un modèle de conception de logiciels et suposed pour augmenter la lisibilité et la maintenabilité du code source, en divisant le code dans les 3 sections mentionnées ci-dessus. Alors, comment cela se présente-t-il dans angular?
Modèle
Un modèle est un conteneur définissant la structure d’une entité, suivant le principe orienté objet. Il est défini par votre contenu. Ainsi, si vous voulez utiliser un Modèle pour un Utilisateur, cela pourrait ressembler à ceci.
undefined
class User { name:string; email:string; address:string;}
En angular, nous utilisons généralement des classes ou des interfaces Typescript pour définir le modèle. Cependant, les modèles sont juste de simples objets Javascript.
Notez que les modèles ne devraient pas contenir de logique. Toute votre logique devrait être définie dans le ViewModel.
View
La vue est la couche visuelle de l’application, y compris tous les éléments visuels affichés sur l’écran de l’utilisateur. Dans le cas d’Angular 2, la vue est définie dans un modèle. Ces templates sont écrits en HTML et CSS mais contiennent également des éléments spécifiques à Angular. Ces templates sont connectés au ViewModel par data-binding. Les templates font toujours partie d’un composant.
ViewModel
Le ViewModel est une partie abstraite de la vue, gérant les modèles et les propriétés à afficher à l’écran. Il contient toute la logique de la page. La vue et le ViewModel sont souvent connectés via une liaison de données. Cela signifie que les modifications apportées au ViewModel, par exemple sur une propriété, sont instantanément appliquées à la vue, modifiant par exemple le texte affiché à l’écran. Dans angular, le ViewModel est représenté par la partie Typescript d’un composant.
Nous avons donc découvert, qu’un composant angular est constitué de deux parties . Un modèle (View) et une classe (ViewModel). Voici un aperçu des composants angulaires.
Composants angulaires
Un composant de base en angulaire se compose de deux parties. La première partie est la définition du composant. Elle est entourée par @Component({}). A l’intérieur de cette définition, vous pouvez spécifier les propriétés de ce composant comme un sélecteur, qui nous permettra de placer notre composant via HTML.
Dans ce bloc, nous définissons également la vue. Vous pouvez le faire en ajoutant du html en ligne ou utiliser un fichier supplémentaire. Je préfère généralement la deuxième option pour une meilleure lisibilité et une séparation claire de ces deux éléments. Donc voici à quoi cette partie pourrait ressembler:
undefined
@Component({ selector:"nav-bar", templateUrl:"./component.html", styleUrls: })
La deuxième partie est la classe correspondante pour implémenter la logique. Cette classe est placée dans le même fichier juste en dessous de la définition. C’est fondamentalement une classe normale de type script, donc vous pouvez faire ce que vous voulez dedans.
undefined
export class NavBar{}
Pour montrer notre composant à l’écran, nous devons l’attacher à une vue html, qui est déjà affichée. Le point de départ est le fichier app.component.html. Donc en écrivant
undefined
<nav-bar></nav-bar>
notre composant est ajouté à la vue. En Angular, les composants ne peuvent pas être là par eux-mêmes, mais doivent toujours être ajoutés à un module. Pour ce faire, il suffit d’ajouter notre composant à la section des déclarations du module parent. Le module racine est à l’intérieur de l’app.module.ts
undefined
@NgModule({ declarations: })
Tout ce qui est défini dans le fichier html des composants sera placé à l’intérieur du selector-tag du composant et donc affiché à l’écran.
Ceci est un lien affilié. Nous pouvons recevoir une commission pour les achats effectués par le biais de ce lien.
Pour en savoir plus sur les composants, consultez mon guide approfondi sur les composants dans angular.