Как использовать один и тот же контроллер AngularJS в нескольких файлах сценариев MVC?

Я создал проект MVC и добавил AngularJS-Material и все необходимые файлы. Я поместил приложение AngularJS на страницу _Layout.cshtml, так как хочу иметь возможность отображать панель инструментов во всем проекте.

Для каждого представления я планировал использовать другой контроллер, но когда я ссылаюсь на контроллер в новом файле сценария, я получаю сообщение об ошибке, в котором говорится, что контроллер не определен.

Приведенный ниже код работает нормально, и единственные проблемы, с которыми я сталкиваюсь, возникают при попытке добавить другое представление в раздел кода @RenderBody(). В каждом отдельном файле chstml я определяю новый контроллер, но сохраняю одно и то же приложение.

Вот мой файл макета:

<!DOCTYPE html>
<html ng-app="bPST" ng-controller="layoutCtrl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
<link href="~/Content/angular-material.min.css" rel="stylesheet" />

<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-animate.js"></script>
<script src="~/Scripts/angular-aria.js"></script>
<script src="~/Scripts/angular-messages.js"></script>
<script src="~/Scripts/angular-material/angular-material.js"></script>
<script src="~/Ang_Scripts/bpst.js"></script>

</head>
<body>
  <div layout="column" layout-fill>
    <md-toolbar>
        <div class="md-toolbar-tools">
            <span>Title </span>
            <!-- fill up the space between left and right area -->
            <span flex></span>
            <md-button ng-click="sideBarFunctions()">Menu</md-button>
        </div>
    </md-toolbar>

    <md-sidenav ng-cloak class="md-sidenav-left md-whitefram-z2" md-component-id="left" md-is-open="sideBarOpen">
        <div layout="column" layout-align="space-around stretch">
            <md-toolbar>
                <h2 style="text-align: center;">Menu</h2>
            </md-toolbar>
            <md-content layout-padding layout="column" layout-align="start">
            </md-content>
        </div>
    </md-sidenav>
    <md-content>
        <div class="container body-content">
            @RenderBody()
        </div>
    </md-content>
</div>
<hr />
<footer>
    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
@Scripts.Render("~/bundles/jquery")
@*@Scripts.Render("~/bundles/bootstrap")*@
@RenderSection("scripts", required: false)

логин.js:

var bApp = angular.module('bPST', ['ngMaterial']);
bApp.controller('loginCTRL',function($scope) {

$scope.message = "Login";
});

angularjs asp.net-mvc angular-material
person Xerc    schedule 25.08.2016    source источник
comment
Я не вижу ссылки на login.js в вашем коде, опубликованном выше, - это проблема? Я также задаюсь вопросом, как вы собираетесь создавать приложение. Когда вы говорите, что хотите... добавить еще одно представление в @RenderBody(), вы говорите о представлении Razor? Если да, то Angular, как правило, используется в одностраничных приложениях, где у вас (в мире ASP.NET MVC) будет одно представление индекса Razor, а остальная часть вашего приложения будет управляться представлениями Angular.   -  person Brendan Green    schedule 26.08.2016

Ответы (1)


arrow_upward
0
arrow_downward

Так что проблема была больше в том, как я создавал приложение в файле js.

Я делал это.

var bPSTApp = angular.module('bPST', ['ngMaterial']);

Затем создайте контроллер следующим образом.

bPSTApp.controller('layoutCtrl', function ($scope) {
//Add coding here

};

когда я изменил его на это, он начал работать.

angular.module('bPST').controller('layoutCtrl', function ($scope) {
//Add coding here
});

Теперь все, что мне нужно сделать, это ссылаться на приложение в каждом файле контроллера вместо того, чтобы пытаться ссылаться на переменную, которую я устанавливал в основном файле JS.

Кроме того, поскольку я использую login.js в файле cshtml для входа, на него ссылаются только в этом представлении.

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

Должен любить ошибки новичков.

person Xerc    schedule 26.08.2016
comment
Поместите все файлы js в ваш макет бритвы. Это проще, потому что ваш макет является общим для всех страниц. Если вы используете ngRouter или uiRouter, используйте бритву частичного просмотра для страницы angular js. И когда вы настраиваете свой маршрут, вам нужно добавить ссылку на контроллер angular. Надеюсь на вашу помощь. - person nevradub; 09.06.2017