繁体   English   中英

错误:无模块:ngResource(带有Angular的Node / Express)

[英]Error: No module: ngResource (Node/Express with Angular)

我收到此错误:

Error: No module: ngResource

我已经在我的index.html文件中包含了一个脚本引用,如下所示(以及ngRoute, ngSanitize, ngCookies和一个名为angularjs.media.directive.js的指令):

<script src="/js/angular-resource.js"></script>

这是我的server.js文件,在这里我说“使用”静态文件夹为public文件夹-我还设置了views文件夹:

app.configure(function() {
    app.use(express.static(__dirname + '/public'));
    app.set('views', __dirname + '/views');
});

我的javascript文件位于/public/js文件夹中-我是否可以正确加载脚本? 提前致谢。

脚本顺序:

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="/js/angular-resource.js"></script>
<script src="/js/angular-cookies.js"></script>
<script src="/js/angular-sanitize.js"></script>
<script src="/js/angular-route.js"></script>
<script src="/js/angularjs.media.directive.js"></script> 
<script src="/js/leader-board.js"></script> 

leader-board.js是注入模块的地方。

在负载上显示的其他错误(可能是相关的):

TypeError: angular.$$minErr is not a function
    var $sanitizeMinErr = angular.$$minErr('$sanitize');

看起来media指令被加载了两次-一次是由socket.io加载,一次是从index.html加载:

"NetworkError: 404 Not Found - http://localhost:8000/js/angularjs.media.directive.js"
GET http://localhost:8000/socket.io/1/?t=1400937921919 200 OK 1ms   
"NetworkError: 404 Not Found - http://localhost:8000/js/angularjs.media.directive.js" socket.io.js (line 1659)

每个请求:

Leader-board.js

var app = angular.module('app', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'angularjs.media.directives'
]);

app.directive('contestant', function(socket) {
    var linker = function(scope, element, attrs) {
            element.hide().fadeIn();
        };

    var controller = function($scope) {
            // Incoming
            socket.on('onContestantUpdated', function(data) {
                // Update if the same contestant
                if(data.id == $scope.contestant.id) {
                    $scope.contestant.display_name = data.display_name;
                    $scope.contestant.score = Number(data.score);
                }
            });

            // Outgoing
            $scope.updateContestant = function(contestant) {
                socket.emit('updateContestant', contestant);
            };

            $scope.deleteContestant = function(id) {
                $scope.ondelete({
                    id: id
                });
            };
        };

    return {
        restrict: 'A',
        link: linker,
        controller: controller,
        scope: {
            contestant: '=',
            ondelete: '&'
        }
    };
});

app.factory('socket', function($rootScope) {
    var socket = io.connect();
    return {
        on: function(eventName, callback) {
            socket.on(eventName, function() {
                var args = arguments;
                $rootScope.$apply(function() {
                    callback.apply(socket, args);
                });
            });
        },
        emit: function(eventName, data, callback) {
            socket.emit(eventName, data, function() {
                var args = arguments;
                $rootScope.$apply(function() {
                    if(callback) {
                        callback.apply(socket, args);
                    }
                });
            });
        }
    };
});

app.config(function ($routeProvider, $locationProvider, $httpProvider) {
  $routeProvider
    .when('/startup', {
      templateUrl: 'views/startup.html',
      controller: 'MainCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });

    $locationProvider.html5Mode(true);

    // Intercept 401s and redirect you to login
    /*$httpProvider.interceptors.push(['$q', '$location', function($q, $location) {
      return {
        'responseError': function(response) {
          if(response.status === 401) {
            $location.path('/login');
            return $q.reject(response);
          }
          else {
            return $q.reject(response);
          }
        }
      };
    }]);*/
});

app.controller('MainCtrl', function($scope, socket) {
    $scope.contestants = [];

  socket.emit('listContestants');

    // Incoming
  socket.on('onContestantsListed', function(data) {
    $scope.contestants.push.apply($scope.contestants, data);
  });

    socket.on('onContestantCreated', function(data) {
        $scope.contestants.push(data);
    });

    socket.on('onContestantDeleted', function(data) {
        $scope.handleDeleteContestant(data.id);
    });

    var _resetFormValidation = function() {
        $("input:first").focus();
        var $dirtyInputs = $("#ldrbd").find(".new input.ng-dirty")
                                      .removeClass("ng-dirty")
                                      .addClass("ng-pristine");
    };

    // Outgoing
    $scope.createContestant = function(display_name, score) {
        var contestant = {
            id: new Date().getTime(),
            display_name: display_name,
            score: Number(score)
        };

        $scope.contestants.push(contestant);
        socket.emit('createContestant', contestant);

        _resetFormValidation();
    };

    $scope.deleteContestant = function(id) {
        $scope.handleDeleteContestant(id);

        socket.emit('deleteContestant', {id: id});
    };

    $scope.handleDeleteContestant = function(id) {
        console.log('HANDLE DELETE CONTESTANT', id);

        var oldContestants = $scope.contestants,
        newContestants = [];

        angular.forEach(oldContestants, function(contestant) {
            if(contestant.id !== id) {
                newContestants.push(contestant);
            }
        });

        $scope.contestants = newContestants;
    }
});

// misc form validation stuff
$(function(){

    setTimeout(function(){
        // wait till angular is done populating the list

        // focus the first field
        $("input:first").focus();

        var $requiredInputs = $("#ldrbd").find("input[required]:not('.ng-dirty')");
        $requiredInputs.on("blur", function(){
            $(this)
                .removeClass("ng-pristine")
                .addClass("ng-dirty")
                .attr({
                    placeholder: "Required"
                });

        });
    }, 100);

});

如上所述,您的AngularJS版本不正确。 从1.2.0 ngRoute开始, ngRoute成为了自己的模块。

您可以使用AngularJS的最新版本1.2.16

其次,似乎angularjs.media.directives.js文件路径不正确或文件名不正确。 您可能要验证该文件是否确实存在。

那应该解决问题。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM