Directiva AngularJS: “templateUrl” no funciona mientras que “template” funciona

Tengo una directiva AngularJS llamada, areaOne . Cuando uso la plantilla, se muestra la plantilla, pero cuando uso templateUrl en area1.js , la plantilla HTML no se representa.

¿Que me estoy perdiendo aqui?

Lado del servidor : ASP.NET MVC 5
Lado del cliente : AngularJS 1
El código fuente está disponible aquí en github.

Estructura del proyecto :

 Root Scripts app.js directives area1.js templates area1.html Views Home Index.cshtml 

Index.cshtml

 @{ ViewBag.Title = "Index"; } @section Scripts{    } 

Index

app.js

 (function() { angular.module("app", []); })(); 

area1.js

 (function() { angular.module("app") .directive("areaOne", function() { return { restrict: 'E', templateUrl: '~/templates/area1.html', controller: function ($scope) { $scope.button1Click = function () { alert("button1 clicked"); } } } }); })(); 

area1.html

 

Editar

Si simplemente se preocupa por obtener la URL raíz / base del sitio para poder agregar que para obtener la otra URL que está buscando, simplemente puede usar / como el primer carácter de su URL.

 var getUsersUrl = "/api/users"; 

Enfoque alternativo para crear la URL relativa utilizando los métodos de ayuda de MVC.

¡Porque la ruta de la url de la plantilla es incorrecta! Javascript no puede convertir tu ~ a la ruta base de la aplicación como la maquinilla de afeitar. Debería poder ver un error 404 si inspecciona la pestaña de red del navegador.

No deberías codificar de forma rígida la ruta de tu aplicación como esa Puede usar los métodos de ayuda Url.Content o Url.RouteUrl en su vista de maquinilla de afeitar para generar la url a la base de la aplicación. Se encargará de crear correctamente la url independientemente de su página / ruta actual. Una vez que obtenga este valor, asígnele una variable de javascript y úsela en su otro código js para crear sus otras urls. Siempre asegúrese de usar el espacio de nombres de javascript cuando lo haga para evitar posibles problemas con las variables de javascript globales.

Así que en su vista de afeitar (archivo de diseño o vista específica), puede hacer esto

    

Y en tus controladores / archivos angulares, puedes acceder a ellos como,

 var app = angular.module("app", []); var ctrl = function (appSettings) { var vm = this; vm.baseUrl = appSettings.Urls.baseUrl; //build other urls using the base url now var getUsersUrl = vm.baseUrl + "api/users"; console.log(getUsersUrl); }; app.controller("ctrl", ctrl) 

Puede y debe acceder a esto en sus servicios de datos, directivas, etc.

 (function () { angular.module("app") .directive("areaOne", function (appSettings) { return { restrict: 'E', templateUrl: appSettings.Urls.baseUrl+'/templates/area1.html', controller: function ($scope) { $scope.button1Click = function () { alert("button1 clicked"); } } } }); })();