Détaillons un peu plus la structure de l'application
Sample Angular 2 RC1 and Mvc 5 application. Dont nous avons vu comment installer et faire fonctionner l'application avec Visual Studio Community 2015
Ici.
En partant de la documentation du projet, c'est un peu plus simple, on voit par exemple que Visual Studio 2015 Update3 est préconisé. Mais c'est toujours l'enfer toutes c'est versions par exemple il existe une sample :
Angular2 Mvc6 sample application
MVC 6 !?
Compilateur open source Roslyn
J'en découvre encore, pour l'instant je note :
en ouvrant le répertoire Bin, je tombe sur Roslyn : "Open source compiler for C# and VB"
 |
| Microsoft Visual Studio - compilateur Roslyn |
Est-ce à dire que ce template embarque un compilateur spécifique ? On dirait bien qui oui.
Angular2 Qu'est ce que cela signifie par rapport à AngularJS ?
Oui après tout, on croit savoir mais est ce que l'on sait vraiment ? Je lis un truc sur Angular2 déjà on me dit que ce n'est pas un upgrade d'AngularJS mais que Google à totalement réécrit AngularJS en créant Angular2. Nous voilà bien.
On dirait bien que vous aviez appris plein de chose avec Angular JS et bien il faut tout recommencer Apple et Google même combat rien n'est compatible.
AngularJS c'est :
- Architecture MVC (Modèle-Vue-Contrôleur
- Data Binding
- Injection de dépendances
- La manipulation du DOM
Et allons y, pendant qu'on y est, si on apprenait un nouveau langage de programmation, il y avait bien longtemps que cela ne m'était pas arrivé, je vous propose maintenant
TypeScript
Vous l'aurez compris tout, absolument
tout change avec Angular2.
Débuter avec Angular2
Pour bien débuter avec Angular2, il y a 3 points importants :
TypeScript
Is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open source.
Node.JS
Interpréteur JavaScript côté serveur
Connaître les
objets JavaScript
TypeScript dans l'application Todolist
Dans le répertoire \bin on remarque une DLL
TypeLite.dll, elle est installée par le package
TypeLite
Ce package permet de générer du TypeScript à partir des classes .NET.
 |
| Au sein d'ASP.NET MVC TypeLite génère du TypeScipt à partir de classes C# |
Un outil qui génère du TypeScript à partir de modèle .tt et de fichier .ts très différent de ce que l'on a l'habitude de voir et très lié à Angular2.
Modèle .tt du projet : TypeLite.Net4.tt
Quoi d'autre avec TypeScript ?
Dans les propriétés du projet Angular2Mvc5Application1.csproj Onglet -> Build TypeScript un petit message : "Un ou plusieurs fichiers tsconfig.json détectés. Les propriétés du projet sont désactivée."
Ok, je cherche donc "tsconfig.json" dans l'arborescence des répertoires du projet :
 |
| tsconfig.json dans un projet ASP.NET Angular2 MVC5 |
C'est impressionnant non ?
On trouve un fichier tsconfig.json dans le répertoires :
\\Samples\ASP.NET MVC5\Angular2Mvc5Application1\Angular2Mvc5Application1\node_modules\reflect-metadata\test
Mais également à la racine du projet :
\\Samples\ASP.NET MVC5\Angular2Mvc5Application1\Angular2Mvc5Application1\
Dans le fichier projet : Angular2Mvc5Application1.csproj
se trouve un directive :
<Content Include="tsconfig.json" />
Le fichier tsconfig.json fait donc bien partie de la solution.
Compilation des fichiers .ts
Au sein du fichier projet on trouve une directive : TypeScriptCompile
<ItemGroup>
<TypeScriptCompile Include="app\boottodolist.ts" />
<TypeScriptCompile Include="app\components\todolist\todolist.component.ts" />
<TypeScriptCompile Include="app\services\app.service.todolist.ts" />
<TypeScriptCompile Include="app\utils\HttpHelpers.ts" />
<TypeScriptCompile Include="Scripts\Enums.ts">
<DependentUpon>TypeLite.Net4.tt</DependentUpon>
</TypeScriptCompile>
<TypeScriptCompile Include="Scripts\TypeLite.Net4.d.ts">
<AutoGen>True</AutoGen>
<DesignTime>True</DesignTime>
<DependentUpon>TypeLite.Net4.tt</DependentUpon>
</TypeScriptCompile>
</ItemGroup>
Il y a toute une arborescence de répertoires sous la racine app
NodeJS dans l'application Angular2 MVC 5 ToDoList
On se retouve avec un répertoire à la racine du projet :
\\Samples\ASP.NET MVC5\Angular2Mvc5Application1\Angular2Mvc5Application1\node_modules
Tous ces fichiers sont installés par >npm ...
En faisant bouton-droit-> Propriétés du répertoire on obtient :
 |
| node_modules - 6739 Fichiers pour 38,5 Mo |
Impressionnants, j'entendais une remarque à propos de Node.JS que je note ici : "Toutes les questions que l'on se posait avec JQuery sont résolues dans Node.JS".
Bas alors ! C'est parfait si tout est résolut avec Node.JS ...
Angular2 MVC JavaScripts
Encore une petite chose comparons les répertoires Scripts d'une application ASP.NET MVC 4.6.1 et notre nouvelle application Angular2 :
 |
| Scripts MVC 4.6.1 vs Scripts MVC5 Angular2 |
On a vu l'utilisation du Modèle TT dans TypeScript. On voit qu'une partie de JQuery est encore là.
Conclusion sur Angular2 MVC5
On vient de voir à peu prêt tout ce qui caractérise une application ASP.NET MVC Angular2, c'est une somme considérable que l'on maintenant appréhender point par point.
Have fun!
