Question

我想在我的Webapp生成器设置中使用AngularJS。（我知道有一个角度生成器，但我更喜欢Webapp生成器的文件夹结构。）

我已经使用bower install angular --save安装了Angular，并在我的索引中引用了js文件：

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<!-- endbower -->
<!-- endbuild -->

<!-- build:js scripts/main.js -->
<script src="scripts/main.js"></script>
<script src="scripts/controllers/MainController.js"></script>
<!-- endbuild -->

当我运行gulp发球时，一切都很完美。

但是，当我运行gulp default（并尝试在复制dist文件夹的内容后打开网站elswhere时，我会在注入控制器时出错：

Error: [$injector:unpr] Unknown provider: eProvider <- e <- MainCtrl
http://errors.angularjs.org/1.5.0/$injector/unpr?p0=eProvider%20%3C-%20e%20%3C-%20MainCtrl

这是我的文件夹结构：

app
-> scripts
->-> Controllers
->->-> MainController.js
->-> main.js

这里是main.js：

var app = angular.module('PentiaExercise', []);

这里是MainController.js：

/**
 * Created by kv on 24/02/16.
 */
app.controller('MainCtrl', function ($scope) {
  $scope.user = {};
  $scope.showSuccess = false;
  $scope.registerFormSubmitted = false;

  //Some other code...
});

有什么不对？和/或使用Yeoman的webapp生成器在设置中使用Angular的正确方法是什么？

Answer 1

如果您正在缩小代码，请尝试以下方法：

app.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.user = {};
  $scope.showSuccess = false;
  $scope.registerFormSubmitted = false;

  //Some other code...
}]);

当代码被缩小时，...函数（$ scope）被改为类似函数（e），然后angular可以找到e来注入，但是如果你这样使用：['$ scope'，function（ $ scope）{...缩小的代码将是这样的['$ scope'，function（e）{。所以当角度进行注入时，他会找到'$ scope'并注入e变量。

Answer 2

好吧，我会在这里做很多预测，但我有点自信我正朝着正确的方向前进。

有两件事让我相信你的后一个命令gulp default，缩小 js 文件：

您提到dist文件夹，该文件夹通常用于 dist ribution
错误消息指的是e资源（看起来非常像缩小的变量名称）。

在我看来，正在进行的是main.js中的代码，某处曾经包含类似的内容：

myApp.controller('MainController', require('./scripts/Controllers/MainController.js'));

...您的MainController.js如下所示：

function ($scope) {
    ...
}

当您的代码缩小时，正在发生的事情是MainController.js中的以下内容：

function (e) {
    ...
}

因此，一个require被解析，你的编译和缩小的脚本看起来像：

a.controller('MainController', function (e) {
    ...
});

... Angular 正在尝试为您的控制器提供e服务，不存在。

在缩小资源时，您必须使用显式注入声明控制器：

myApp.controller(MainController, ['$scope', require('./scripts/Controllers/MainController.js')]);

这样， Angular 仍将知道为Controller提供什么，无论其参数如何命名。

干杯！

如何在Yeoman的webapp-generator中使用angularJS

2 个答案: