Why angular returns with referenceError: ngResource is not defined?

Question

我用 angular 1.4.4 完成了快速客户端路由。在每个教程中，我都看到了将模块分配给变量（通常是：app）并对其执行不同任务的方法，如下所示：

var app = angular.module('skeleton', [ngResource, ngRoute]);

app.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
    $routeProvider
        .when('/', {
                     templateUrl: '/partials/main',
                     controller: 'MainController'
                   });
});

app.controller('MainController', function ($scope) {
    $scope.test = 'Hi Angular';
});

在我现在做的教程中，我看到了完全不同的方法：

angular.module('skeleton', ['ngResource', 'ngRoute']);

angular.module('skeleton').config(function($routeProvider, $locationProvider){
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
    $routeProvider
        .when('/', { templateUrl: '/partials/main', controller: 'mainCtrl'});
});

angular.module('skeleton').controller('mainCtrl', function($scope){
    $scope.test = "Hello Angular";
});

我认为这只是偏好，所以我选择了 'app' 版本，因为我发现它更具可读性。不幸的是，它导致 angular 抛出

ReferenceError: ngResource is not defined

有人知道这种行为的原因吗？
您更喜欢哪种方法？

Answer 1

您需要正确注入依赖项，在引号内传递 ngResource 和 ngRoute，否则它们将被视为变量，因此您一定会遇到错误。

var app = angular.module('skeleton', ['ngResource', 'ngRoute']);

Answer 2

首先，问题不在于将模块声明分配给变量 'app' 然后使用它。这两种方法都有效，但最好在不将其分配给变量的情况下进行声明，这样可以避免可能导致模块覆盖的变量冲突。

您的代码中的问题在于语法。请更正如下所示：

var app = angular.module('skeleton', ['ngResource', 'ngRoute']);

dependency Annotation 也可以通过将依赖项数组分配给'$inject' 属性或直接作为函数属性来完成。

请参阅此 angular 指南以供参考：

https://docs.angularjs.org/guide/di

Why angular returns with referenceError: ngResource is not defined?

Why angular returns with referenceError: ngResource is not defined?

javascript

angularjs

ngroute