javascript - Angular 构建无法在服务器上运行

Question

我正在尝试在服务器上运行我的 AngularJS 前端。我正在使用 Yeoman 来构建应用程序。我上传了非常基本的 hello world 应用程序，我得到了没有加载 JavaScript 的纯 HTML 文本。 Chrome 中的控制台是这样说的:

Error: Unknown provider: aProvider <- a
    at Error (<anonymous>)
    at http://../scripts/vendor/d10639ae.angular.js:2627:15
    at Object.getService [as get] (http://../scripts/vendor/d10639ae.angular.js:2755:39)
    at http://../scripts/vendor/d10639ae.angular.js:2632:45
    at getService (http://../scripts/vendor/d10639ae.angular.js:2755:39)
    at invoke (http://../scripts/vendor/d10639ae.angular.js:2773:13)
    at Object.instantiate (http://../scripts/vendor/d10639ae.angular.js:2805:23)
    at http://../scripts/vendor/d10639ae.angular.js:4620:24
    at update (http://../scripts/vendor/d10639ae.angular.js:13692:26)
    at http://../scripts/vendor/d10639ae.angular.js:8002:24 d10639ae.angular.js:5526

有人遇到同样的情况并且知道出路吗？

编辑:

'use strict';

yoAngApp.controller('MainCtrl',['$scope', '$window', function($scope, $window) {
    $scope.awesomeThings = [
        'HTML5 Boilerplate',
        'AngularJS',
        'Testacular'
    ];

    $scope.records = [{ title : 'one' }, { title : 'two' }, { title : 'three' }, { title : 'four' }];

    $scope.greet = function() {
        ($window.mockWindow || $window).alert('Hello ' + $scope.name);
    }
}]
);

Answer 1

我很确定您在生产服务器上使用过代码压缩器，对吗？

无论如何，folks from Angular Js made pretty clear如果使用不当，使用 minifier 可能会搞砸依赖注入(inject)。为什么会这样？看看:

依赖注入(inject)与代码压缩器

函数 MyController($scope, $log) { ... }

在上面的代码片段中，您正在使用隐式 DI。 Angular 看到变量 $scope 并尝试将它与任何托管依赖项相匹配。在此示例中，它将匹配到 $scope 对象。

然而，这在代码缩小后将不起作用，因为结果看起来像这样:

函数 a(b, c) { ... }

由于变量和函数名称被缩小了，Angular 无法知道“a”到底是什么。

解决方案

使用显式依赖注入(inject)配置。

var MyController = function($scope, $log) { ... }
MyController.$inject = ['$scope', '$log'];

在这个片段中，您定义了哪些依赖项应该通过将它们的名称数组附加到名为 $inject 的 Controller (或服务)的特殊属性来解决。现在 Angular 知道它应该解析 $scope 并将它作为第一个参数传递给 MyController。然后它将解析 $log 并将其作为第二个参数传递。 这一切都是可能的，因为压缩器不会修改字符串变量的内容。