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

我很确定你已经将代码缩减器用于生产服务器,对吗？

无论如何,来自Angular Js的人明确表示,如果没有正确完成,使用minifier可能会破坏依赖注入.为什么会这样？看一看:

依赖注入与代码扩展器

function MyController($scope, $log) { ... }

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

但是,在代码缩小之后,这将不起作用,因为结果将看起来像这样:

function a(b, c) { ... }

由于变量和函数名称被缩小,Angular无法知道"a"究竟是什么.

解

使用显式依赖注入配置.

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

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

Answer 2

正如 @\xc5\x81ukaszBachman 所建议的，您可以使用 $inject 注释，或者如果您愿意，也可以使用内联注释：

\n\n

\n
1. 让您的依赖注释靠近您的函数定义（以获得更好的可读性）。
\n
2. 远离污染全局命名空间。
\n

\n\n

 

\n\n

app.controller('UsersController',\n  [\n    '$scope', 'UserService', '$location', '$routeParams',\n    function($scope, User, $location, $routeParams) {\n      $scope.user = User.get({id: $routeParams.id});\n      ...\n    }\n  ]\n);\n

\n