我有一个现有的Web Forms ASP.NET网站。我想在调用我的RESTful Web API的网站上放置一个AngularJS页面。该页面包含一个加载页面加载的证券选择列表。我按下一个调用另一个RESTful查询的按钮来显示所选安全性的引号。当我直接在浏览器中调用它们时，Web API调用工作。当AngularJS代码到达“angularApp.controller（'QuotesCtrl'，'function（$ scope，$ http）”这一行时，它会失败。我认为它与app / controller / modules的嵌套方式有关。是我第一次尝试AngularJS，我觉得我很接近，但我对此还不太了解。可能有一种简单的方法可以做到这一点。你能在下面的代码中看到错误吗？
<%@ Page Language="C#" MasterPageFile="~/Template.master" AutoEventWireup="true" CodeFile="WebAPI.aspx.cs" Inherits="WebAPIDemo" ValidateRequest="false" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script>
var angularApp = angular.module('myApp', []);
LoadSecurities();
function GetQuotes()
{
var id = $('#SecurityID').val();
id = id.replace("number:", "").trim();
var url= "http://stevegaines.info/api/Data/GetQuotes?id=" + id + "&count=10&extra=1";
angularApp.controller('QuotesCtrl', function ($scope, $http)
{
$http.get(url).
success(function (data)
{
$scope.Quotes = data;
});
});
return false;
}
function LoadSecurities()
{
angularApp.controller('SecuritiesCtrl', function ($scope, $http)
{
var url= "http://stevegaines.info/api/Data/GetSecurities?id=0&securityType=CASH";
$http.get(url).
success(function (data)
{
$scope.Securities = data;
});
});
return false;
}
</script>
<div ng-app="myApp">
<div ng-controller="SecuritiesCtrl">
<select ID="SecurityID" ng-model="SecuritiesModel" ng-options="x.SecurityID as x.TrueSymbol for x in Securities | filter:'USD'"/>
<button onclick="return GetQuotes();">Get Quotes</button><br />
<div id="Message"></div><hr />
</div>
<div ng-controller="QuotesCtrl">
<table id="QuotesTable">
<tr>
<th>Time</th>
<th>Open</th>
<th>Hi</th>
<th>Lo</th>
<th>Close</th>
</tr>
<tr ng-repeat="x in Quotes">
<td>{{ x.QuoteTime }}</td>
<td>{{ x.Open }}</td>
<td>{{ x.Hi }}</td>
<td>{{ x.Lo }}</td>
<td>{{ x.Close }}</td>
</tr>
</table>
</div>
</div>
</asp:Content>
答案 0 :(得分：2)
由于QuotesCtrl不可用，您收到该错误。不要将控制器包装在函数中并尝试在函数调用中初始化。
你应该去http://www.learn-angular.org/。从下面的代码中，我认为你还有点远。还有许多非角度的做事方式仍在那里你依赖于一些jquery。如果你必须以角度恢复到jquery，那么你大部分时间都是错误的。另外onclick是一个角落应用程序，你应该使用ng-click。我已快速破解你的代码，以展示你应该如何做到这一点。我的代码并不完美，因为我没有时间，但可能会给你一个很好的起点。
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"> </script>
<script>
var angularApp = angular.module('myApp', []);
angularApp.controller('SecuritiesCtrl', function ($scope, $http)
{
$scope.Securities = {};
$scope.Quotes = {};
$scope.message = '';
$scope.GetQuotes = function(){
$scope.message = 'Loading...';
var count = 10;
var sURL = "http://stevegaines.info/api/Data/GetQuotes?id=" + SecuritiesModel.SecurityID + "&count=" + count + "&extra=1";
$http.get(sURL).
success(function (data)
{
$scope.Quotes = data;
$scope.message = '';
});
}
var sURL = "http://stevegaines.info/api/Data/GetSecurities?id=0&securityType=CASH";
$http.get(sURL).
success(function (data)
{
$scope.Securities = data;
});
});
</script>
<div ng-app="myApp">
<div ng-controller="SecuritiesCtrl">
<select ID="SecurityID" ng-model="SecuritiesModel" ng-options="x.SecurityID as x.TrueSymbol for x in Securities | filter:'USD'">
</select>
<button ng-click="GetQuotes()">Get Quotes</button>
<br />
<div>{{message}}</div>
<hr />
</div>
<div>
<table id="QuotesTable">
<tr>
<th>Time</th>
<th>Open</th>
<th>Hi</th>
<th>Lo</th>
<th>Close</th>
</tr>
<tr ng-repeat="x in Quotes">
<td>{{ x.QuoteTime }}</td>
<td>{{ x.Open }}</td>
<td>{{ x.Hi }}</td>
<td>{{ x.Lo }}</td>
<td>{{ x.Close }}</td>
</tr>
</table>
</div>
</div>
答案 1 :(得分：0)
在garethb的帮助下，我能够重新编写这个并且现在可以正常工作了。我使用了他写的大部分内容，但按钮单击导致页面在ASP.NET中回发，即使我使用了ng-click按钮。我通过将select ng-change属性连接到GetQuotes（）来解决这个问题。
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script>
var angularApp = angular.module('myApp', []);
angularApp.controller('SecuritiesCtrl', function ($scope, $http)
{
$scope.Securities = {};
$scope.Quotes = {};
$scope.message = '';
$scope.GetQuotes = function ()
{
$scope.message = 'Loading...';
var id = $scope.SecuritiesModel;
var url1 = "http://stevegaines.info/api/Data/GetQuotes?id=" + id + "&count=10&extra=1";
$http.get(url1).
success(function (data)
{
$scope.Quotes = data;
$scope.message = '';
});
return false;
}
var url2 = "http://stevegaines.info/api/Data/GetSecurities?id=0&securityType=CASH";
$http.get(url2).
success(function (data)
{
$scope.Securities = data;
});
});
</script>
<div ng-app="myApp">
<div ng-controller="SecuritiesCtrl">
Select A Forex Pair:
<select ng-model="SecuritiesModel" ng-options="x.SecurityID as x.TrueSymbol for x in Securities" ng-change="GetQuotes();" ></select><br />
Warning: These prices are not current! Historical quotes only.<br />
<div>{{ Message }}</div><hr />
<table id="QuotesTable" style="border: 1px solid black;">
<tr>
<th style="border: 1px solid black;">Time</th>
<th style="border: 1px solid black;">Open</th>
<th style="border: 1px solid black;">Hi</th>
<th style="border: 1px solid black;">Lo</th>
<th style="border: 1px solid black;">Close</th>
</tr>
<tr ng-repeat="x in Quotes">
<td style="border: 1px solid black;">{{ x.QuoteTime | date:"MM/dd/yyyy hh:mm:ss a" }}</td>
<td style="border: 1px solid black;">{{ x.Open | number:4 }}</td>
<td style="border: 1px solid black;">{{ x.Hi | number:4 }}</td>
<td style="border: 1px solid black;">{{ x.Lo | number:4 }}</td>
<td style="border: 1px solid black;">{{ x.Close | number:4 }}</td>
</tr>
</table>
</div>
</div>
</asp:Content>