Угловой JS с ASP.NET Master Pages

Question

Угловой JS с ASP.NET Master Pages

0

Я пытаюсь использовать Angular JS с помощью приложения ASP.NET.

Я определил приложение для своей главной страницы (мастер-страницы), и он отлично работает. Теперь я столкнулся с несколькими проблемами с другими страницами.

Пока я определяю дочернюю страницу, которая использует эту главную страницу, она должна использовать свое собственное приложение. Так

Где мы можем определить атрибуты приложения и контроллера на странице Child.
Если я определяю их в контейнере DIV, это не нравится. В нем говорится: " Argument 'cityPageCtrl' is not a function, got undefined

На моей главной странице я добавил ссылки ниже:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script src="<%=ApplicationPath %>lib/js/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="<%=ApplicationPath %>cust/js/templateApp.js"></script>
    <script src="<%=ApplicationPath %>cust/js/mainPageApp.js"></script>
    <script src="<%=ApplicationPath %>lib/js/parallax.min.js"></script>

На моей дочерней странице ниже приведен код, который должен использовать другое приложение ng:

<asp:Content ID="Content1" ContentPlaceHolderID="headContent" runat="server">
    <script src="../cust/js/cityPageApp.js"></script>
    <title ng-bind="'Restaurants in '+cityName+' | Restaurants'">Restaurants in your city serving online | Online Restaurnats</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="bodyContent" runat="server">
   <div ng-app="cityPage" ng-controller="cityPageCtrl">
</div>
</asp:Content>

Ниже приведено то, что у меня есть в файле citypage js для определения приложения для углового.

var app = angular.module('cityPage', ['ui.bootstrap', 'templateModule', 'ngCookies']);
app.controller("cityPageCtrl", function($scope, $http, $modal, $cookies, $interval)

Ashutosh Vyas 16 авг. 2015, в 07:21

Источник

Теги:

javascript

jquery

angularjs

asp.net

2 ответа

Ещё вопросы

Alvin Saldanha · Answer 1 · 2016-07-22T07-43-00.000Z

В идеале вы должны создать для этого несколько модулей. Ваша дочерняя страница должна создать собственный модуль, который затем должен быть добавлен в качестве ссылки на ваш основной модуль.

    var mainApp= angular.module('main', ['childApp']);  //child 1

Вы также можете попробовать выполнить ручную загрузку с помощью angular.bootstrap

    angular.bootstrap(document.getElementById("divId"), ['myChildModule']);

Hamid Saberi · Answer 2 · 2015-08-16T05-48-00.000Z

Вы можете использовать именованные разделы для добавления каждого файла сценария дочерней страницы.

На главной странице:

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <script src="<%=ApplicationPath %>lib/js/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="<%=ApplicationPath %>cust/js/templateApp.js"></script>
    <script src="<%=ApplicationPath %>cust/js/mainPageApp.js"></script>
    <script src="<%=ApplicationPath %>lib/js/parallax.min.js"></script>

    @RenderSection("AngularScripts", required: false)

И на странице вашего ребенка:

@section AngularScripts
{
   <script src="../cust/js/cityPageApp.js"></script>
}

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

Судя по всему, именованные разделы предназначены для Razor, а не для синтаксиса ASPX. Мое приложение является ASP.NET, а не MVC. Во-вторых, mainApp заставляет меня отображать данные в панели навигации вверху и в нижнем колонтитуле. Поэтому это требуется в главной странице.
Ой! Извините, я не обращаю внимания на ваш тип проекта. Я проверил это в приложении веб-форм. Кажется, проблема не в расположении тега скрипта на дочерней странице. Я думаю, что у вас есть нг-приложение на главной странице. Если это так, проблема в том, что у вас может быть только одно приложение ng в вашем угловом приложении.
Это правильно, и это то, что является моей проблемой, для которой мне нужно решение. Как я могу использовать приложение для моей главной страницы, чтобы получить подробную информацию для панели навигации, нижнего колонтитула и других общих мест, продолжая при этом использовать собственные приложения для страниц контента. В настоящее время я прибегаю к НЕ использовать главные страницы, и это, кажется, хорошо. Однако должен быть выход, которого я не знаю :(
Вы не можете иметь более одного ng-приложения на своей странице, но у вас может быть несколько ng-контроллеров и вложенных. Вы можете добавить контроллер дочерних страниц в основной модуль приложения. Если у вас есть что-то подобное в вашем mainPageApp: var app = angular.module (mainPage, [ui.bootstrap, templateModule, ngCookies]); Вы можете иметь это в вашем "cityPage": app.controller ("cityPageCtrl", функция ($ scope, $ http, $ modal, $ cookies, $ interval) . Или angular.module ('mainPage'). controller (.. . это добавит «cityPageCtrl» в модуле «MainPage», который устанавливается в нг-приложении на главной странице.