Директива AngularJS: "templateUrl" не работает, а "template" работает

Question

У меня есть директива AngularJS, areaOne, Когда я использую template шаблон отображается, но когда я использую templateUrl в area1.js шаблон HTML не отображается.

Что мне здесь не хватает?

Серверная сторона: ASP.NET MVC 5
Клиентская сторона: AngularJS 1
Исходный код доступен здесь на github.

Структура проекта:

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

Index.cshtml

@{
    ViewBag.Title = "Index";
}
@section Scripts{
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/app.js"></script>
    <script src="~/Scripts/directives/area1.js"></script>
}
<h2>Index</h2>
<div ng-app="app">
    <area-one></area-one>
</div>

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

<div>
    <button id="button1" ng-click="button1Click()">Button 1</button>
</div>

Answer 1

редактировать

Если вы просто хотите получить корневой / базовый URL-адрес сайта, чтобы добавить другой URL-адрес, который вам нужен, вы можете просто использовать / как первый символ вашего URL.

var getUsersUrl = "/api/users";

---

Альтернативный подход для построения относительного URL с использованием вспомогательных методов MVC.

Потому что неверный путь URL шаблона Javascript не может конвертировать ваши ~ приложить базовый путь, как бритва. Вы должны увидеть ошибку 404, если осмотрите вкладку сети своего браузера.

Вы не должны жестко кодировать базовый путь вашего приложения таким образом. Вы можете использовать Url.Content или же Url.RouteUrl вспомогательные методы в вашем представлении бритвы, чтобы генерировать URL к базе приложения. Он позаботится о правильном построении URL независимо от вашей текущей страницы / пути. Как только вы получите это значение, присвойте его переменной javascript и используйте его в своем другом js-коде для создания других ваших URL-адресов. При этом всегда используйте пространство имен javascript, чтобы избежать возможных проблем с глобальными переменными javascript.

Таким образом, в вашем бритвенном представлении (файл макета или специальный вид), вы можете сделать это

<script>
    var myApp = myApp || {};
    myApp.Urls = myApp.Urls || {};
    myApp.Urls.baseUrl = '@Url.Content("~")';       
</script>
<script src="~/Scripts/AngularControllerForPage.js"></script>
<script>
    var a = angular.module("app").value("appSettings", myApp);
</script>

И в ваших угловых контроллерах / файлах, вы можете получить к нему доступ, как,

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)

Вы можете и должны получить к нему доступ в своих службах данных, директивах и т. Д.

(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");
                    }
                }
            }
        });
})();

Answer 2

Вы можете импортировать шаблон поверх скрипта и использовать его как "шаблон", а не "templateUrl":

import area1 from '/templates/area1.html';

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

})();