Quand j'ai décidé de
commencer le travail avec AngularJS, il fallait effectuer des recherches sur
les outils nécessaires qui peuvent m'aider à part la documentation technique d’AngularJs.
Est-ce que c'est nécessaire qu'on soit expert en JavaScript pour maitriser d’AngularJs?
Des questions qui se posent, et vu que je travaille avec Visual Studio depuis
longtemps, j'ai pris la décision de l'utiliser, malgré l’existence de bonnes
IDE sur le marché qui prennent en charge JavaScript.
Quels sont les
extensions qui peuvent nous aider si je continue à travailler avec VS?
Cet article est dédié
à toute personne voulant démarrer un projet avec d’AngularJs sur .Net et ses
plusieurs alternatives, je ne vais pas écrire du code, ce n'est qu'n
tutoriel technique qui vous fera économiser quelques heures sur internet et
d'enquête.
1- Utilisation de Visual Studio
Vous pouvez télécharger la dernière version de Visual Studio, une version gratuite : https://www.visualstudio.com/
- Général Plugins
Peu importe quel genre de projet web, vous allez commencer à l'aide de Visual Studio, vous devez utiliser au moins un des plugin / extension présentés dans ce qui suit pour Visual Studio. Il existe des plugin plus liés avec Angularjs mais je préfère ne pas utiliser l'un d'eux.
a- Web Essentials - (http://vswebessentials.com)
Cette extension ajoute de nombreuses fonctionnalités qui manquent dans Visual Studio, facilite le travail, c'est l'un des meilleurs extensions sur le marché.
b- Productivity Power Tools (https://visualstudiogallery.msdn.microsoft.com/dbcb8670-889e-4a54-a226-a48a15e4cace)
C'est un pack d'extension qui apporte des outils puissants pour améliorer la productivité. Les caractéristiques sont axés à la personnalisation de Visual Studio et non au code introduit.
c- CssCop - FxCop pour Stylesheet -
Cet outil complète les suggestions css de bonnes pratiques de l'extension Web Essentials. Il active l'utilisation de l'outil : CSS Lint.
d- Mexedge Stylesheet - (https://visualstudiogallery.msdn.microsoft.com/b6dd8050-77fa-4dba-998f-dabdd255d96d)
Cette extension de Visual Studio vous permet de visualiser dans une arborescence la structure de vos fichiers CSS directement dans votre Explorateur de solutions, je ne l'utilise pas plus parce que j'utilise LESS dans tous mes projets récents.
e- MultiEditing - (https://visualstudiogallery.msdn.microsoft.com/2beb9705-b568-45d1-8550-751e181e3aef)
Ceci est une extension simple qui permet l'édition multilingue appuyant sur la touche ALT. Cette fonctionnalité est impressionnante dans Sublime Text.
f- Task Runner Explorer - (https://visualstudiogallery.msdn.microsoft.com/8e1b4368-4afb-467a-bc13-9650572db708)
Cette extension vous permet d'exécuter toute tâche Grunt (http://gruntjs.com/) / Gulp (http://gulpjs.com/) ou cible à l'intérieur de Visual Studio en ajoutant une fenêtre Tâche Runner Explorer.
g- Package Intellisense - (https://visualstudiogallery.msdn.microsoft.com/65748cdb-4087-497e-a394-2e3449c8e61e)
C'est l'intellisense NPM et Bower package dans Visual studio qui vous laisse voir, installer, désinstaller et mettre à jour les packages.
h- Snippetizer - (https://visualstudiogallery.msdn.microsoft.com/3260eed5-c3c2-44f8-b705-a332d3a9f64b)
Laissez-vous construisez des extraits, les recueillir et bien sûr l'utiliser.
i- Visual Studio Spell Checker (https://visualstudiogallery.msdn.microsoft.com/a23de100-31a1-405c-b4b7-d6be40c3dfff)
Une extension simple qui corrige l'orthographe.
j- File Nesting - (https://visualstudiogallery.msdn.microsoft.com/3ebde8fb-26d8-4374-a0eb-1e4e2665070c)
Afin de maintenir un projet aussi plat que possible et de ne pas créer plus de dossiers pour organiser votre projet, cette extension vous permettra d'ordonner les fichiers par ses relations.
- Modèles
Parfois, nous voulons commencer un projet à partir d'un modèle ayant les bases pour construire votre solution sans réécrire la même structure tout le temps. Visual Studio dispose de plusieurs modèles pour construire une application ASP.NET MVC, et vous permettent de télécharger plus en ligne. Parmi les modèles en ligne il y a plusieurs qui comprennent Angularjs et ont une structure précédente qui nous aident avec les nouveaux projets. Les meilleurs modèles sont:
- AngularJS SPA Template (https://github.com/kriasoft/AngularJS-SPA-Template)
- SideWaffle (http://sidewaffle.com/)
- ASP.NET Boilerplate (http://aspnetboilerplate.com/)
- HotTowel (http://www.johnpapa.net/hottowel/)
- AngularStart (https://angularstart.codeplex.com/)
- ng.Net Template (https://visualstudiogallery.msdn.microsoft.com/48d928e3-9b5c-4faf-b46f-d6baa7d9886c)
- Intellisense
Un bon IDE est un IDE intelligent, qui peut aider le développeur à augmenter leurs productivités en minimisant les erreurs à travers l'utilisation de Intellisense, nous citons quelques outils qui peuvent être intégré dans VS :
a- Web Essentials 2013
Cet outil dispose de plusieurs fonctionnalités pour améliorer à la fois l'IntelliSense pour modifier le code HTML à l'éditeur Javascript, par exemple tout élément HTML avec un attribut ng-controller dispose d'un Smart Tag pour générer le fichier du contrôleur .js.
b- Resharper
C'est un outil payant, avec une utilisation de 30 jours gratuits, Si vous avez acheté une licence ReSharper vous avez la possibilité d'utiliser tous les avantages avec JavaScript et avec Visual Studio, il a aussi une extension qui inclut le support pour Angularjs. Ce soutien comprend la complétion de code de Angularjs attributs lors de l'édition des fichiers HTML et d'autres caractéristiques. Vous pouvez trouver plus d'informations ici. Si vous voulez activer l'extension aller à ReSharper dans la barre de menu, cliquez sur Extension Manager and search AngularJS.
c- Modification de HTML5 -Schéma XSD
Visual Studio dispose d'un schéma XML langage de définition pour le HTML5 qui définit les types de structure et de données pour cette norme. Si vous modifiez ce fichier et ajoutez tous les directives compilés sous Angularjs , vous serez capable de l'utiliser lorsque vous êtes dans l'éditeur HTML. Ce fichier se trouve généralement dans: C:\Program Files (x86)\Microsoft Visual Studio (x.0)\Common7\Packages\schemas\html\commonHTML5Types.xsd où "x" est la version de VS. Cet un exemple de la façon dont vous pouvez voir le fichier après la modification je l'ai mentionné avant:
d- Référencement * .js
Lorsque Visual Studio 2012 a été publié, un nouvel éditeur Javascript est venu avec un IntelliSense puissant. Il y a plusieurs moyens d'étendre l'IntelliSense pour Javascript, certains automatiquement et manuellement comme référence d'autres fichiers JavaScript avec triple barre, la création d'un fichier ou de créer un _references.js {} libraryname .intellisense.js. Vous pouvez trouver plus d'informations sur ce sujet dans le blog de Mad Kristensen (http://madskristensen.net/post/the-story-behind-_referencesjs)ou dans la page à propos de Javacript IntelliSense dans MSDN (http://msdn.microsoft.com/en-us/library/bb385682.aspx).
Il y a un dépôt dans GitHub de John Bledsoe appelé "JavaScript IntelliSense pour angularjs composants dans Visual Studio" qui mélangent certaines des techniques ci-dessus vaut pour angulaire JS. (https://github.com/jmbledsoe/angularjs-visualstudio-intellisense)
2- Choisir type d'application
Lorsque vous êtes à proximité de démarrer un projet Angularjs dans Visual Studio, il est un bon moment pour s'arrêter et penser comment Angularjs peux interagir et vivre à l'intérieur d'une application Web ASP.NET. Cette décision dépend du client, les exigences des facteurs de projet et bien d'autres. Je tiens à le séparer en plusieurs catégories, chacun montrent la relation entre ASP.NET MVC ou formulaire Web et le code client. Les catégories sont les suivantes:
- Utilisation Angularjs l'intérieur d'une mise en page MVC (MVC layout) ou un formulaire Web
Ceci est possible par la voie commune, et de façon naturelle, le développeur qui est habitué de travailler avec Legacy.NET et ASP.NET MVC. C'est une belle façon pour mélanger le meilleur des deux mondes, le côté client et côté serveur. Pour démarrer un projet avec ces caractéristiques il vous suffit de créer un projet avec un modèle par défaut ou utiliser un modèle en ligne comme l'a vu précédemment.
Une fois terminée la création du projet, vous devez ajouter Angularjs au projet manuellement, avec Nuget ou avec un autre gestionnaire de Packages comme Bower. À ce stade, vous pouvez construire votre application sans aucun problème en utilisant les deux : Angularjs et ASP.NET. Un problème courant avec cette façon vient quand vous essayez de passer des données à partir d'ASP.NET pour Angularjs, cela peut être accomplit de passer les données envoyées directement au contrôleur dans le cas de MVC- à Angularjs avec la directive ng-init ou la création de services / factories/ value/ constant/ provider pour obtenir les données,en appelant le service de $http ou $resource un contrôleur, ou la meilleure façon est d'appeller le API Web. Un autre problème possible est de construire un SPA complet parce que quand vous mettrez en œuvre un routage avec Angularjs vous ne pouvez pas le router avec des vues razor ou des pages aspx, vous devez donc utiliser HTML à l'exception de la page d'index.
- Angularjs et WebAPI
Une autre façon pour utiliser Angularjs et ASP.NET est de compiler l'ensemble SPA et de communiquer uniquement avec les services Web. Par conséquent, dans ce genre d'application, ASP.NET ne rendra pas les pages, toutes les pages de notre application sera en html plaine qui communiquent avec notre application via des services Web créés avec WebAPI.
- Angularjs et des endpoints RESTful externes
Utilisation AngularJs avec des endpoints externes.
3- Projets et l'architecture Angularjs
Il est très important de disposer d'une solution bien organiser, je veux dire:
- Appliquer la séparation des problèmes (separation of concerns (SoC)).
- Appliquer le principe de la responsabilité unique aussi,
- Notre code situé facilement,
- Réutilisation du code.
- Appliquer une architecture claire et en couche.
Bien sûr que l'organisation du code dépend complètement du projet, mais il ya de bons pratiques appliqués à tous les projets qui reflète la qualité de votre code.
Vous pouvez trouver plus d'informations avec «Principes clés de l'architecture logicielle" de MSDN(https://msdn.microsoft.com/en-us/library/ee658124.aspx) , SOLIDE (https://en.wikipedia.org/wiki/SOLID_(object-oriented_design)), GRASP (https://en.wikipedia.org/wiki/GRASP_(object-oriented_design)), GoF Pattern (http://www.gofpatterns.com/index.php) et autres ressources web.
Quelques conseils sur l'organisation d'un projet angularjs dans Visual Studio est d'essayer de profiter des «projets» dans une solution et avoir un "projet" pour chaque SPA. Autres projet pourrait être le modèle, le repository, la logique, l'authentification, etc.
a- Projet partagé
Un problème commun quand vous construisez un SPA est de savoir comment partager les ressources entre les différentes parties de l'application. Je veux dire, comment partager les bibliothèques, les fichiers JavaScript, les fichiers HTML, les fichiers image du backend, frontend, peut-être une version spécifique au mobile ou d'une autre version spéciale séparée de l'application. Dans ce cas, une bonne solution est d'avoir un projet partagé et y maintenir tous les fichiers communs, y compris les bibliothèques téléchargés avec NuGet et Bower.
Pour ajouter les fichiers communs à chaque projet Visual Studio laisser utiliser des liens directs de cette manière:
Faites un clic droit sur le dossier de destination du fichier> Sélectionnez Ajouter> cliquez sur un élément existant ...> Regardez le fichier à importer> cliquez sur la flèche de droite (déroulant) du bouton Ajouter et sélectionnez Ajouter comme lien.
Après cette étape, vous aurez un lien direct vers le fichier mais vous n'aurez pas le fichier physique, donc si vous faites glisser le fichier à l'éditeur -et il est un Fichier Javascript - Visual Studio va créer un script qui visent le fichier partagé dans le projet partagé. Si vous voulez que le fichier en locale, vous pouvez écrire un script MSBUILD qui va copier le fichier lié lorsque vous compilez. Avec cette astuce vous une fois que vous modifiez le fichier partagé quand vous compilez tous les maillons vont se mettre à jour instantanément. Ci-dessous un exemple des phrases MSBUILD :
b- Architecture AngularJS
L'oganisation du projet AngularJS dépend de votre vision des choses, par exemple pour:
- Monolithic files : on organise les fichiers par leurs types, façon à adopter dans les petits projets.
- Monolithic folders
- Organisation par fonction
- Organisation par module
- Mélangeant tous - Assembler par module et en fonction
Pour couvrir au-delà de l'architecture, des moyens dans la syntaxe, je recommande la lecture de "AngularJS Style Guide" par Papa John (https://github.com/johnpapa/angular-styleguide) et l'autre par Todd Motto (https://github.com/toddmotto/angularjs-styleguide). Ce genre de guides assurer la cohérence à travers les bonnes pratiques.
4- Tests
Le test est une partie essentielle de chaque projet de manière à ce chapitre, vous pourrez voir différentes façons de configurer un environnement de test dans Visual Studio.
a - Karma
L'équipe AngularJS fournit un outil de test appelé Karma qui est un lanceur de test pour les tests unitaires. L'installation est simple bien détaillé dans leur site : http://karma-runner.github.io/0.12/index.html, Une fois qu'il est installé, vous pouvez l'utiliser en externe indépendamment de Visual Studio.
Cependant il y a quelques d'autres plugins qui pourront vous aider dans cette tâche. Je vais vous confier les liens avec les instructions:
- VS Adapter for Google’s Karma Test Runner (https://visualstudiogallery.msdn.microsoft.com/bfe6feb7-7ec4-4e8e-9d90-cf6ea2cd2169)
- KarmaVs (https://visualstudiogallery.msdn.microsoft.com/02f47876-0e7a-4f6c-93f8-1af5d5189225)
b- Chutzpah
Si vous souhaitez gérer et exécuter votre test unitaire JavaScript via Visual Studio, chutzpah est bon choix.
Pour installer Chutzpah vous devez suivre les étapes suivantes:
1- Ouvrir Outils -> Extensions et mises à jour, cliquez sur ligne gauche-onglets et de chercher chutzpah, puis installez Chutzpah Test Adapter pour l'Explorateur Test et Test Runner Context Menu Extension.
2- Installer jasmine.js avec NuGet
3- Téléchargez le mock module de angularjs du projet.
4- Ecrire le code se référant tous les fichiers ont besoin avec la méthode de slash triple
Si vous suivez ces étapes, une fois que vous ouvrez l'explorateur de test de Visual Studio, vous trouverez tous les tests javascript que vous avez écrit, et vous serez en mesure d'exécuter test avec le menu contextuel de la souris.
c- Resharper
Si vous utilisez ReSharper (R #) avec votre Visual Studio, vous pouvez utiliser le test coureur de ReSharper au lieu d'autres comme Karma ou chutzpah. Tout ce que vous devez faire est de télécharger jasmin et l'inclure comme référence dans vos tests. Pour le configurer, allez dans les options de ReSharper et accédez à Tools -> Unit Testing -> JavaScript Test et veiller à ce que ‘Enable Jasmine support’ est cochée, définir la version Jasmine aussi, Si vous souhaitez utiliser un navigateur spécifié pour tester, vous pouvez le mettre ici, cependant, ReSharper vous donne la possibilité d'utiliser PhantomJS pour exécuter les tests aussi. PhantomJS vous permettent de tester sans ouvrir une fenêtre de navigateur chaque fois que vous voulez exécuter votre suite de tests. Pour l'utiliser, téléchargez les PhantomJS exécutable et le placer dans un endroit de votre preferency, une fois que l'exécutable de son placé le mettre dans les options.
Maintenant, vous devriez être en mesure de voir vos tests dans la fenêtre de test unitaire de ReSharper Explorer:
5- Build
ASP.NET 4.5 a des techniques afin d'améliorer le temps de chargement en réduisant le nombre de requêtes vers le serveur et en réduisant la taille des actifs demandés. Cette technique est appelée Regroupement et Minification sont très faciles à utiliser, mais s vouis voulez plus de flexibilité et ou d'écrire votre optimisation personnalisé ou même télécharger du code tiers des parties et l'inclure dans votre code. Si vous pensez à ce niveau d'optimisation alors vous devriez travailler avec Grunt ou Gulp.
a- Grunt Launcher
Ce plugin vous permettent de lancer des tâches Grunt depuis l'explorateur de solution. En cliquant à droite sur un gruntfile vous verrez un nouveau sous-menu listant toutes vos options.
b- TRX – Task Runner Explorer
Cette extension vous permet d'exécuter toute tâche Grunt / Gulp ou cible à l'intérieur de Visual Studio en ajoutant une nouvelle fenêtre Tâche Runner Explorer.
