MVC5 Angular2 - Structure de l'application Todolist Template

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.

Un peu de lecture : Introduction à Angular 2 comparatif entre AngularJS et Angular2

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

En ce qui concerne Node.JS, on a vu dans l'Installation de l'application comment installer Node.JS au sein d'une application ASP.NET MVC. 

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!