Question

我一直在尝试使用我使用angularjs构建的webapi服务。但是，运行后页面显示为空白。

App.js

var app = angular.module("productsApp", ["productService"]);

app.controller("productsController", function ($scope, product) {
    $scope.products = product.query();
});

Service.js

(function () {
    angular.module("productService", ["ngResource"]).
    factory("product", function ($resource) {
        return $resource('http://localhost:55755/api/products/:id');
    });
}());

Html文件

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-resource.js"></script>
</head>
<body ng-app="productsApp">
    <div ng-controller="productsController as vm">
            <table>
                <tr ng-repeat="p in vm.products">
                    <td>{{ p.productName}}</td>
                    <td>{{ p.productCode }}</td>
                    <td>{{ p.releaseDate | date }}</td>
                    <td>{{ p.price | currency }}</td>
                </tr>
            </table>
    </div>
    <script src="Scripts/App.js"></script>
    <script src="Scripts/service.js"></script>
</body>
</html>

Answer 1

您在视图中使用controllerAs语法，但在控制器

中没有

尝试更改为：

app.controller("productsController", function ( product) {
    var vm = this;
    vm.products = product.query();
});

使用controllerAs时，您只需要$scope来处理角度事件和$watch

等内容

试图显示webapi服务数据的空白页

1 个答案: