Использование 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
. Я думаю, что преимущество использования контроллера заключается в том, что они проксируются через ваш контроллер (вы можете позже изменить структуру папок и легко обновить ссылку в контроллере) и, возможно, передать им некоторые данные на стороне сервера, но в зависимости от ваших требований.
Ответ 2
ngInclude - относительные ссылки, поэтому вам нужно использовать относительный путь:../Content/[...]