AngularJS Directive TemplateURLs mit ASP.NET MVC (virtuelle Verzeichnisse)


Wie und wo legt man am besten die HTML Templates für die eigenen AngularJS Direktiven ab? AngularJS bietet hier mehrere Möglichkeiten, zum einen über eine Template URL oder das direkte Definieren von Templates im JavaScript über einen String. Auch beim Angeben der Template URLs gibt es zwei Möglichkeiten wo das Template abgelegt werden kann, entweder legt man es in einem entsprechend definierten Script Tag ab oder man greift wirklich auf eine passende URL zu in der eine HTML Datei abgelegt wurde.

Da ich meine Direktiven aber auch über NuGet verteilen möchte, fällt die Möglichkeit mit dem Script Tag bereits weg. Außerdem erkennt Visual Studio nicht direkt das es sich um HTML Code im Script Tag handelt und es gibt dadurch auch kein IntelliSense und keine Autovervollständigung.

Damit bleibt nur noch die Möglichkeit das Template direkt als String zu hinterlegen oder in einer extra HTML Datei. Da ich aber wie bereits erwähnt nicht auf IntelliSense und Autovervollständigung verzichten möchte bleibt nur die Möglichkeit das Template direkt in einer HTML Datei abzulegen. Was im Prinzip auch kein Problem darstellt, außer man legt seine Anwendung in einem virtuellen Verzeichnis ab und nicht direkt im Webserver “root” Verzeichnis.

Im virtuellen “MvcAngularJs” Verzeichnis http://localhost/MvcAngularJs/Home/TemplateUrl

im root http://localhost/Home/TemplateUrl

Denn sobald man seine Anwendung nicht mehr im root ablegt, ist es mir bisher nicht gelungen einen festen Pfad in der Direktive zu hinterlegen der immer gefunden werden kann. Die folgende Template URL kann daher im virtuellen Verzeichnis nicht mehr aufgelöst werden.

“/ScriptsAngular/directives/HtmlTemplates/PanelTemplate.html”

Denn der Server beginnt im root zu suchen unter:

http://localhost/Home/TemplateUrl/ScriptsAngular/directives/HtmlTemplates/PanelTemplate.html

und nicht unter:

http://localhost/MvcAngularJs/Home/TemplateUrl/ScriptsAngular/directives/HtmlTemplates/PanelTemplate.html

daher muss man am besten mit .NET ermitteln wie die aktuelle “root” URL inkl. virtuellem Verzeichnis lautet.

public static class SiteRoot
{
    public static string GetSiteRoot()
    {
        var cnt = new UrlHelper(HttpContext.Current.Request.RequestContext);
        return string.Format("{0}://{1}{2}", (object)HttpContext.Current.Request.Url.Scheme, 
                                             (object)HttpContext.Current.Request.Url.Authority,
                                             (object)cnt.Content("~"));
    }
}

diese URL stelle ich im im JavaScript unter global zur Verfügung und greife dann entsprechend in all meinen Direktiven darauf zu. Dafür muss natürlich immer der gleiche Variablenname verwendet werden und meist definiere ich diesen direkt in der “_Layout.cshtml”. (p.s. sonst halte ich mich fern von global im Js, aber hier hatte ich bisher keine bessere Idee wie sich dies besser realisieren lässt.)


    var siteRoot = '@SiteRoot.GetSiteRoot()'

Jetzt kann man seine Direktive erstellen und die entsprechende Template URL einfach zusammenbauen.

angular.module("panel.directives", [])
    .directive("panelWithHeader", function () {
        return {
            restrict: 'EAC',
            transclude: true,
            templateUrl: siteRoot + "/ScriptsAngular/directives/HtmlTemplates/PanelTemplate.html",
            scope: {
                panelTitle: '='
            }
        }
    });

Damit ist es jetzt möglich seine eigenen Direktiven inkl. der HTML Templates auch über NuGet zu verteilen und die Webseiten können auch in einem virtuellen Verzeichnis abgelegt werden. Man muss nur darauf achten, das man bei jeder neuen MVC Seite einmalig den “siteRoot” definiert (manuell oder über einen Helper).

image

Wer hier eine elegantere Lösung bieten kann, würde ich mich natürlich über einen Hinweis freuen. Das ganze liegt natürlich wieder bei mir auf Codeplex.

Advertisements

Ein Gedanke zu „AngularJS Directive TemplateURLs mit ASP.NET MVC (virtuelle Verzeichnisse)

  1. Pingback: AJAX Calls und virtuelle Verzeichnisse mit ASP.NET MVC und dem “base” Tag | SquadWuschel's Blog

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s