Мы смогли доставить угловое приложение 2 в приложении MVC. Мы также хотели медленно перейти с MVC. Таким образом, мы сначала переписали эту функцию в угловую разработку, полностью отделив угловую разработку, а затем скопировали скомпилированное угловое приложение в наше приложение mvc, на самом деле у нас были скрипты, чтобы позаботиться об угловой компиляции и копировании. Затем мы доставили угловое приложение через бритву. Так как угловое приложение было доставлено в виде бритвы, тогда мы могли бы включить ссылки, и наше угловое приложение было внутри нашей основной схемы mvc.
Представлением бритвы, в котором используется приложение angular, является index.html из нашего приложения angular с некоторыми элементами бритвы для передачи данных в приложение angular из mvc.
<!doctype html>
<html lang="en">
<head>
<title>Page with SPA</title>
<base href="/set/base/ref/">
<link href="styles.bundle.css" rel="stylesheet" />
</head>
<body>
<div>
<a href="/SomeController/Index/Index">
<i></i> back to list
</a>
<h4>approve</h4>
</div><div>
<angular-comp somePathNeeded="@Model.SomeData" someIdNeededByAngular="@Model.SomeId" taskId="@Model.SomethingElse" someUrlNeededByAngular="/Url/Inside/Mvc" lastTaskId="@Model.MoreData" firstTaskId="@Model.OtherData" nextTaskId="@Model.MoreDataId" previousTaskId="@Model.OtherthingsINeedInAngular"></angular-comp></div>
<script type="text/javascript" src="./assets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="./assets/js/jquery-ui-1.8.14.min.js"></script>
</script>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"> </script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
Как вы можете видеть выше, это всего лишь вывод команды углового компоновки, все артефакты из команды компоновки ng были скопированы в каталог, и поэтому угловое приложение может работать внутри mvc. Вы также можете увидеть, как мы передаем материал в наш угловой компьютер. Кроме того, мы можем включить синтаксис бритвы в index.html для передачи данных из mvc в angular.
Внутри углового компонента входа мы разобрали, что нам нужно, используя
constructor(private elemRef: ElementRef) {
this.id= this.elemRef.nativeElement.getAttribute('id');
this.otherId= this.elemRef.nativeElement.getAttribute('otherId');
}
Итак, угловое приложение было создано отдельно, а затем включено в наше приложение mvc в качестве бритвы. Оттуда вы можете перейти на все, что вы хотите под углом. И включить ссылки. И поскольку это бритвенное представление, оно находится внутри основного макета приложения mvc. Так что ссылки всего существующего приложения MVC работают. Однако если вам нужны ссылки внутри угловых, сгенерированные и показанные угловым компонентом, то вам, возможно, придется их передавать.
Кроме того, чтобы бритва распознала файлы .html и анализировала их как cshtml, вы можете зарегистрировать механизм просмотра для обработки html, например cshtml. Это что-то вроде
System.Web.Razor.RazorCodeLanguage.Languages.Add("html", new System.Web.Razor.CSharpRazorCodeLanguage());
ViewEngines.Engines.Add(new HtmlViewEngine());
при запуске приложения, а затем
class HtmlViewEngine : RazorViewEngine
{
public HtmlViewEngine()
{
FileExtensions = new[] { "html" };
}
}
Там может быть немного больше, но в основном вам нужно сделать так, чтобы файлы .html обрабатывались как .cshtml, и вы можете сделать это, связав механизм обработки бритвы, который обрабатывает .cshtml, с .html. Кроме того, в вашей угловой разработке вы можете просто назвать ваш index.html index.cshtml. Но, конечно, этот вид портит ваше угловое приложение.
Надеюсь, это поможет вам.