带有 AngularJS 的 Microsoft Azure - 数据未显示在图表中答案

【问题标题】：Microsoft Azure with AngularJS - Data not being displayed in chart带有 AngularJS 的 Microsoft Azure - 数据未显示在图表中
【发布时间】：2015-04-01 02:52:36
【问题描述】：

我可以在本地查看数据，但是当我打开 Windows Azure 云服务应用程序时，不再有 Json 数据传入我的图表 (http://dashboardexample.cloudapp.net/Home/Product)。我在控制台中收到一条消息，说“控制器名称应以大写字符开头并以后缀 Controller 结尾。例如：UserController。模块名称的最佳实践是使用 lowerCamelCase。检查“dx”的名称。”不确定是什么导致了这个问题。有什么想法吗？

AngularJS

var app = angular.module('customCharts', ['dx']);

app.controller("ChartController", function ($scope, $http, $q) {
    $scope.productSettings = {
        dataSource: new DevExpress.data.DataSource({
            load: function () {
                var def = $.Deferred();
                $http({
                    method: 'GET',
                    url: 'http://localhost:53640/Home/PostChart'
                }).success(function (data) {
                    def.resolve(data);
                });
                return def.promise();
            }
        }),
        series: {
            title: 'Displays Product Costs for items in our Database',
            argumentType: String,
            argumentField: "Name",
            valueField: "Cost",
            type: "bar",
            color: '#008B8B'
        },
        commonAxisSettings: {
            visible: true,
            color: 'black',
            width: 2
        },
        argumentAxis: {
            title: 'Items in Product Store Database'
        },
        valueAxis: {
            title: 'Dollor Amount'
        }
    }
})

HTML

<script type="text/javascript" src="~/Scripts/angular.js"></script>
<script type="text/javascript" src="~/Scripts/angular-sanitize.js"></script>
<script type="text/javascript" src="~/Scripts/globalize/globalize.js"></script>
<script type="text/javascript" src="~/Scripts/dx.chartjs.js"></script>
@Scripts.Render("~/Scripts/ChartDesign.js")

<div ng-app="customCharts">
    <div ng-controller="ChartController">
        <div dx-chart="productSettings"></div>
    </div>
</div>

【问题讨论】：

你仍然在这里调用localhost而不是http://dashboardexample.cloudapp.net：url: 'http://localhost:53640/Home/PostChart'。
好，一秒，我测试一下。
嗯，由于某种原因仍然没有数据。我想知道它是否与 Windows Azure 中的权限无法传递我的 Json 对象有关...
@GauravMantri 或者你认为这与我需要使用dashboardexample.cloudapp.net url 进行回调有关吗？
还有一件事......你只是打电话给http://dashboardexample.cloudapp.net。请将其更改为http://dashboardexample.cloudapp.net/Home/PostChart 或只是/Home/PostChart。我只是将这个 URL 放在浏览器中，然后得到以下 JSON：[{"Name":"Learn SQL Server 2014","Cost":34.95},....。 HTH。

标签： json angularjs azure

【解决方案1】：

正如 GauravMantri 所说，您需要引用控制器函数的名称和位置。例如：我必须在我的数据源 url 中引用 /Home/PostChart。这解决了这个问题。

AngularJS var app = angular.module('customCharts', ['dx']);

app.controller("ChartController", function ($scope, $http, $q) {
    $scope.productSettings = {
        dataSource: new DevExpress.data.DataSource({
            load: function () {
                var def = $.Deferred();
                $http({
                    method: 'GET',
                    url: '/Home/PostChart'
                }).success(function (data) {
                    def.resolve(data);
                });
                return def.promise();
            }
        }),
        series: {
            title: 'Displays Product Costs for items in our Database',
            argumentType: String,
            argumentField: "Name",
            valueField: "Cost",
            type: "bar",
            color: '#008B8B'
        },
        commonAxisSettings: {
            visible: true,
            color: 'black',
            width: 2
        },
        argumentAxis: {
            title: 'Items in Product Store Database'
        },
        valueAxis: {
            title: 'Dollor Amount'
        }
    }
})

【讨论】：