Angular e Partial View: la direttiva ng-include

Spesso può risultare molto comodo caricare una porzione di html dal server, magari generata da una partial view di ASP.NET MVC (o magari proprio da una View, perchè no?). con angular questo è del tutto possibile grazie alla direttiva ng-include che consente di specificare l'url da cui  caricare una risorsa all'interno della pagina. Vediamo un esempio con typescript:

Per prima cosa si crea una partialview  che dimostri un po' di dinamismo. Ecco un semplice esempio:

   1:<h2>@DateTime.Now.ToLongDateString()</h2>

   2:<h3>@DateTime.Now.ToLongTimeString()</h3>

In seguito aggiungiamo al controller il codice per poterla chiamare dal browser:

   1:public ActionResult _PartialContent()

   2: {

   3:return PartialView();

   4: }

A questo punto diciamo che l'url per raggiungere la partial view sia il seguente:

/Include/_PartialContent

Creaiamo quindi un controller come segue:

   1:class IncludeController

   2: {

   3:     count: number = 0;

   4:     includeUri: string = undefined;

   5:  

   6:     click(): void

   7:     {

   8:this.includeUri = '../Include/_PartialContent?ts=' + (++this.count).toString();

   9:     }

  10: }

  11:  

  12: angular.module('include', ['ngRoute'])

  13:     .controller('includeIndex', IncludeController);

Nel controller usiamo una variabile "count" per tenere conto delle volte in cui l'utente clicca il pulsante di test. Questo valore viene accodato all'uri della partial-view per forzarne il caricamento a ciascun click. L'uri così calcolato viene riposto nella proprietà includeUri. Vediamo ora la view:

   1: @{

   2:     ViewBag.Title = "Test Include";

   3: }

   4:<div>

   5: 

   6:</div>

   7:<divng-app="include"ng-controller="includeIndex as ct"class="row">

   8:<form>

   9:<buttontype="button"class="btn btn-primary"ng-click="ct.click();">Click Me!</button>

  10:<png-show="ct.count>0">clicked {{ct.count}} times</p>

  11:<divng-include="ct.includeUri"></div>

  12:</form>

  13:</div>

  14: @section Scripts {

  15:<scriptsrc="~/Scripts/Views/Include/index.js"></script>

  16: }

Niente più di un normale binding, con un pulsante per invocare la funzione click(), la visualizzazione del count e l'assegnazione della direttiva ng-include sulla variabile includeUri. Il risultato è che la partial view viene inclusa all'interno delle pagina ogni volta che clicchiamo il pulsante.

Interessante notare che mediante questa tecnica possiamo agevolmente caricare nella pagina qualunque tipo di file il server sia in grado di servire. Se ad esempio all'url della partial sostituiamo quello del file TS vedremo apparire il codice.