Использование ng-include приводит к undefined

Привет, я довольно новичок в angular, и я только что начал с ним свое первое приложение. Вот что я сделал до сих пор. Это мой индексный файл:

    <body ng-app="codeArt">
<div ng-controller="loginCtrl">
    <ng-include src="/App/scripts/login/login.html"></ng-include>
</div>

<!-------------- Angular Libs ---------------------->
<script src="/App/libs/angular/angular.js"></script>

<!--------------- Code Art Main Module -------------->
<script src="/App/scripts/codeArt.js"></script>

<!--------------- Code Art Login Module -------------->
<script src="/App/scripts/login/login.js"></script>

</body>

Индексный файл хранится в Views/Home/Index.cshtml. Это будет единственный файл, который хранится здесь, и это необходимо, потому что я использовал ASP.NET MVC.

Я определил свой основной модуль в App/scripts/codeArt.js:

var codeArt = angular.module("codeArt", [
    'codeArt.login'
]);

Затем я создал дополнительный модуль, который будет содержать функциональные возможности, связанные с регистрацией и регистрацией. App/scripts/login/login.js

var login =  angular.module('codeArt.login', [])

Я определил контроллер в App/scripts/login/controller/loginCtrl.js:

 login.controller('loginCtrl', function($scope){
   $scope.name = "Nistor Alexandru";
   $scope.clicked = function(){
       alert("I was clicked");
   }
});

Я также определил основной вид страницы входа в App/scripts/login/login.html, и это выглядит так:

<section>
    <div>{{name}}</div>
    <button ng-click="clicked()">Clicked Alert!</button>
</section>

Как видно из моего файла index.cshtml, я попытался использовать ng-include для загрузки файла login.html. По какой-то причине, когда я запускаю приложение, я могу найти комментарий, который говорит ng-include: undefined и html не загружен.

Я буду интегрировать маршрутизацию в какой-то момент, но пока хочу понять, почему это работает неправильно?

Я также пробовал этот путь.. /../App/scripts/login/login.html, предполагая, что он будет хранить файлы, относящиеся к файлу index.cshtml, но это не так.

Ответ 1

ng-include должен быть таким: вам не хватает цитаты:

<ng-include src="'/Content/App/scripts/login/login.html'"></ng-include>

Angular выражение, оценивающее URL. Если источник является константой строки, убедитесь, что вы завернули его в одинарные кавычки, например. src= "myPartialTemplate.html".

https://docs.angularjs.org/api/ng/directive/ngInclude

** Старый ответ **

Я предлагаю вам разместить ваши статические html файлы внутри папки content или создать некоторую маршрутизацию, чтобы вернуть их от контроллера. Он должен работать из коробки внутри папки содержимого:

<ng-include src="/Content/App/scripts/login/login.html"></ng-include>

Или вы можете подумать о создании TemplateController, а затем вы можете вернуть представление на основе имени файла, который вы запрашиваете (не забудьте настроить маршрут):

<ng-include src="'/Template/get/whatever'"></ng-include>  

public ActionResult Get(string name )
{
        return View(name); // return View(name + ".cshtml")
}

Предполагается, что у вас есть папка внутри /Views/Template/ с именем whatever.cshtml. Я думаю, что преимущество использования контроллера заключается в том, что они проксируются через ваш контроллер (вы можете позже изменить структуру папок и легко обновить ссылку в контроллере) и, возможно, передать им некоторые данные на стороне сервера, но в зависимости от ваших требований.

Ответ 1

Ответ 2