Question

我正在尝试使用RequireJS在AngularJS中构建前端应用程序。

应用程序实现主细节，使用$ http.get调用从Web服务RESTful应用程序获取一些信息并将其显示在表中。对于每一行，都有一个按钮，使用另一个$ http.get来显示其他详细信息。

一切正常。但是，使用RequireJS有问题。

这是我的应用树：

script/
    main.js
    angularJS/
        angular.min.js
        masterDetailAppController.js
    requireJS/
        require.js

这是由SpringMVC管理的 .jsp ，它将是index.html。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Master Detail</title>

    <!-- Inclusion of CSS -->
    <link href="${pageContext.servletContext.contextPath}/resources/css/css.css" rel="stylesheet" type="text/css">

    <!-- Inclusion of requireJS -->
    <script data-main="${pageContext.servletContext.contextPath}/resources/script/main" 
            src="${pageContext.servletContext.contextPath}/resources/script/requireJS/require.js">
    </script>        
   </head>
<body>
    <h3>Master Detail</h3>        
    <div ng-app="masterDetailApp" ng-controller="masterDetailController" ng-init="query()">
        <table>
            <tr>
                <th>Id</th>
                <th>Nome</th>
                <th>Cognome</th>
            </tr>
            <tr class="row" ng-repeat="e in employees">
                <td>{{e.uid}}</td>
                <td>{{e.name}}</td>
                <td>{{e.surname}}</td>  
                <td><input type="button" ng-click="detail(e.uid)" value="Detail"/></td>
            </tr>
        </table>            
    </div>
</body>
</html>

Main.js

require.config({
"paths": {
    "angularJS": "angularJS/angular.min",
    "masterDetailAppController": "angularJS/masterDetailAppController"
}
});

require(["angularJS","masterDetailAppController"]);

masterDetailAppController.js

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

app.controller("masterDetailController", ["$scope", "$http", function   ($scope, $http) {
    $scope.query = function () {
        $http.get("http://localhost:8080/RESTfulWebApp/api/players/list")
                .success(function (response) {
                    $scope.employees = response;
                });
    };
    $scope.detail = function (id) {
        var squadra, ruolo, numero, ris;
        $http.get("http://localhost:8080/RESTfulWebApp/api/players/" + id)
                .success(function (response) {
                    alert("Squadra: " + response.team + "\nRuolo: " + response.role + "\nMaglia: " + response.shirtNumber);

                });
    };

}
]);

angular.min.js 和 require.js 是图书馆。

当我运行应用程序时，我收到了这个错误：

未捕获错误：[$ injector：modulerr] http://errors.angularjs.org/1.2.26/ $ injector / modulerr？p0 = masterDetailApp＆amp; p1 ... 2FHttpRequest％2Fresources％2Fscript％2FangularJS％2Fangular.min.js％3A344％3A20）
获取http://localhost:8080/HttpRequest/resources/script/angularJS/angular.min/angular.min.js
未捕获错误：脚本错误：angularJS / angular.min http://requirejs.org/docs/errors.html#scripterror
未捕获错误：模块的加载超时：masterDetailAppController http://requirejs.org/docs/errors.html#timeout

为什么？

使用RequireJS构建AngularJS应用程序时出错

0 个答案: