Angular JS与ASP.. NET母版页

Angular JS with ASP.NET Master Pages

本文关键字：NET 母版页 ASP JS Angular      更新时间：2023-09-26

我正在尝试使用一个ASP. JS。网络应用程序。

我为我的主页(母版页)定义了应用程序，它工作得很好。现在我在使用其他页面时遇到了很多问题。

虽然我定义了一个使用这个母版页的子页，但它必须使用自己的App。所以

  1. 我们在哪里可以在子页面上定义应用程序和控制器的属性?
  2. 如果我在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文件中为Angular定义App的内容。

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

理想情况下您应该为此创建多个模块。您的子页面应该创建自己的模块，然后将其作为引用添加到主模块中。

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

你也可以尝试使用angular.bootstrap

手动引导
    angular.bootstrap(document.getElementById("divId"), ['myChildModule']);

您可以使用命名节来添加每个子页面的脚本文件。

母版页:

    <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"仅用于一个页面，则从母版页中删除它并将其放入子页面。

相关文章：