尝试显示 webapi 服务数据时出现空白页

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

应用.js

var app = angular.module("productsApp", ["productService"]);
app.controller("productsController", function ($scope, product) {
    $scope.products = product.query();
});

服务.js

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

网页文件

<!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>

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

尝试更改为：

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

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

相关内容

最新更新

热门标签：