Modèle Breeze/Angular

par Mads Kristensen

Le modèle Breeze/Angular MVC a été écrit par Ward Bell

Télécharger le modèle MVC Breeze/Angular

AngularJS est une bibliothèque open source de Google pour la création d’applications monopage (SPAs). Il offre la liaison de données, l’injection de dépendances et la gestion de l’écran. Combinez-le avec BreezeJS, une autre bibliothèque open source pour la modélisation et la gestion des données, et vous disposez des ingrédients essentiels pour une application cliente HTML/JavaScript de qualité.

Le modèle SPA Breeze/Angular est une variante du modèle SPA KnockoutJS inclus dans la mise à jour ASP.NET et Web Tools 2012.2. Si vous disposez de Visual Studio, vous aurez un exemple de SPA opérationnel en moins de 60 secondes.

Extérieurement, l’application ressemble beaucoup au modèle SPA KnockoutJS. Mais c’est très différent sous le capot. Le modèle KnockoutJS utilise Knockout pour la liaison de données et AJAX brut pour l’accès aux données. Le modèle Breeze/Angular utilise Angular pour la liaison de données et Breeze pour l’accès aux données. Ces bibliothèques activent des fonctionnalités supplémentaires, notamment la navigation et l’historique des pages.

La page À propos de l’application affiche un journal d’événements en cours d’exécution pendant la session utilisateur actuelle, notamment :

• Pagination. Notez la création du contrôleur Todo.
• Requêtes distantes et requêtes de cache local.
• Enregistrement des entités nouvelles et modifiées.
• Modifications validées sur le client, afin que l’utilisateur puisse corriger les erreurs avant de valider les modifications apportées à la base de données.

Il y a d’autres éléments à explorer dans ce modèle, notamment :

• Chargement dynamique des modèles d’affichage HTML.
• Liaison de données personnalisée via Angular « directives ».
• Modularité et injection de dépendances.
• Filtres de requête, tris, pagination, projections et inclusion d’entités associées.
• Partage de données sur plusieurs écrans.
• Enregistrement de plusieurs modifications en tant que transaction unique.
• Les règles de validation ont été propagées automatiquement du serveur vers le client JavaScript.

Commençons.

Créer un projet de modèle Breeze/Angular

Téléchargez et installez le modèle en cliquant sur le bouton Télécharger ci-dessus. Le modèle est empaqueté sous la forme d’un fichier d’extension Visual Studio (VSIX). Vous devrez peut-être redémarrer Visual Studio.

Dans le volet Modèles , sélectionnez Modèles installés et développez le nœud Visual C# . Sous Visual C#, sélectionnez Web. Dans la liste des modèles de projet, sélectionnez ASP.NET application web MVC 4. Nommez le projet, puis cliquez sur OK.

Dans l’Assistant Nouveau projet, sélectionnez Breeze Angular SPA.

Appuyez sur Ctrl-F5 pour générer et exécuter l’application sans débogage, ou appuyez sur F5 pour exécuter avec le débogage.

Lorsque l’application s’exécute pour la première fois, elle affiche un écran de connexion. Cliquez sur le lien « S’inscrire » et une nouvelle page s’affiche, où vous pouvez entrer un nom d’utilisateur et un mot de passe. (Les pages de connexion et d’inscription sont créées à l’aide de ASP.NET MVC.) Lorsque vous envoyez le formulaire d’inscription, le serveur génère un TodoList avec deux éléments pour votre compte. Ensuite, il vous les présente sur une note jaune.

Maintenant, vous êtes au pays de SPA. Tout ce que vous voyez et découvrez lors de la manipulation de Todos est rendu et géré sur le client à l’aide de Knockout et Breeze. Explorez l’application en tant qu’utilisateur ... mais avec l’œil d’un développeur. Utilisez les outils de développement de votre navigateur pour capturer le trafic réseau. (Dans Internet Explorer : appuyez sur F12, sélectionnez l’onglet Réseau, puis cliquez sur Démarrer la capture.) Essayez maintenant ce qui suit :

• Ajoutez un nouvel élément Todo.
• Cliquez sur l’étiquette et modifiez le titre de l’élément Todo
• Cochez une case pour marquer l’élément terminé. Notez que la zone de texte étant désactivée, le titre n’est plus modifiable.
• Cliquez sur le « x » à droite de l’étiquette. L’élément disparaît et est supprimé de la base de données.
• Choisissez un autre élément et effacez son titre. Vous obtiendrez une erreur de validation indiquant que le titre est requis. Après une brève pause, le titre précédent est restauré.
• Tapez un titre ridiculement long. Vous obtiendrez une autre erreur de validation indiquant que le titre est trop long.
• Cliquez sur le bouton « Ajouter une liste de todo ». Une nouvelle liste apparaît à gauche de la liste précédente.
• Jouez avec le titre TodoList, en déclenchant ses validations requises et de longueur.
• Cliquez dans la zone de texte titre pour effacer le message d’erreur.
• Cliquez sur « x » dans le cercle en haut à droite pour supprimer todoList et ses todos.
• Cliquez sur le lien « À propos » en haut à droite pour afficher un journal de ces activités.

La logique de validation est effectuée côté client par Breeze. Les attributs de validation sur les classes de modèle serveur sont propagés au client et exécutés automatiquement avant que le client ne contacte le serveur.

Passez en revue le trafic réseau. Notez qu’il n’y a pas eu d’appels au serveur lorsque Breeze a détecté une erreur. Chaque modification valide a entraîné une demande POST à « /api/Todo/SaveChanges ». Breeze regroupe les modifications et les envoie ensemble en une seule requête à la méthode du SaveChanges contrôleur d’API web. Cela est différent du modèle DE SPA KnockoutJS, qui effectue les requêtes PUT, POST et DELETE pour chaque élément individuellement.

Notez également qu’il n’y a pas de trafic réseau lorsque vous basculez entre les pages TodoList et À propos de. En effet, la requête a été limitée au cache Breeze local.

Jeter un coup d’œil à l’intérieur

Cette application a un côté client et côté serveur. La pile côté client se compose d’un peu de CODE HTML et d’une combinaison de modules JavaScript d’application (dans le dossier « application ») et de bibliothèques JavaScript tierces (dans le dossier « Scripts »).

L’architecture de l’interface utilisateur sépare les widgets HTML des vues du code de présentation de prise en charge dans les contrôleurs. Le système de liaison de données Angular coordonne les vues et les contrôleurs afin que chacun puisse effectuer son travail sans connaissance intime de l’autre.

Le contrôleur demande au contexte de données d’acquérir et d’enregistrer les entités du modèle. Le contexte de données délègue la majeure partie du travail à Breeze, qui construit des objets de modèle auto-suivi à partir des résultats de requête JSON.

La pile côté serveur se compose d’un code de développeur et de trois bibliothèques .NET principales : API Web, Entity Framework et Breeze.NET.

L’architecture de base est identique au modèle SPA KnockoutJS. Toutefois, l’implémentation est beaucoup plus simple : les DTO ont été supprimés et la plupart des détails d’Entity Framework ont été délégués à Breeze.NET.

Étapes suivantes

Nous vous suggérons d’explorer le code, guidé par la discussion approfondie sur les piles du client et du serveur sur le site web Breeze.

Vous pouvez essayer de jouer avec une requête côté client Breeze ; ajoutez des filtres et des tris. Vous pouvez ajouter d’autres propriétés de modèle et plus d’entités pour avoir une meilleure idée du développement SPA de bout en bout. Lorsque vous êtes confiant dans la conception, vous pouvez déchirer les fonctionnalités todo et les remplacer par les vôtres.

Codez bien !