Angular JS与ASP.NET主页

我正在尝试使用ASP.NET应用程序的用户Angular JS。Angular JS与ASP.NET主页

我为我的主页（主页）定义了应用程序，它工作正常。现在我遇到了其他页面的多个问题。

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

我们可以在子页面上定义应用程序和控制器属性。
如果我在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文件中定义App for Angular的。

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

来源

2015-08-16 Ashutosh Vyas

您可以使用named sections添加每个子页面的脚本文件。

在你的母版页：

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

来源

2015-08-16 08:17:36

通过它的外观，命名段在剃刀，而不是ASPX语法。我的应用程序是一个ASP.NET的，而不是MVC。其次，mainApp让我获得数据显示在顶部的导航栏和底部的页脚。因此它在Master Page中是必需的。 –

哦！对不起，我不关注你的项目类型。我在一个web表单应用程序中测试了它。看来问题不在脚本标记在子页面中的位置。我想你的母版页上有一个ng-app。如果是这样，问题在于，因为在角度应用程序中只能有一个ng-app。 –

那是正确的，那是什么我需要解决方案的问题。如何在我的母版页上使用该应用程序来获取导航栏，页脚和其他常见位置的详细信息，同时仍然继续使用内容页面的本机应用程序。目前我已经采取了不使用母版页，它似乎很好。然而，我不知道有什么出路:( –

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

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

您也可以尝试手动引导使用angular.bootstrap

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

来源

2016-07-22 10:08:54

Angular JS与ASP.NET主页

回答

相关问题