如何将 angularJS 与 Yeoman 的 webapp-generator 一起使用答案

【问题标题】：How to use angularJS with Yeoman's webapp-generator如何将 angularJS 与 Yeoman 的 webapp-generator 一起使用
【发布时间】：2016-02-25 20:06:18
【问题描述】：

我想在我的 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 serve 时，一切正常。

但是，当我运行 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 的正确方法是什么？

【问题讨论】：

你能显示你的 MainController 代码吗？
添加了@shaishabroy

标签： javascript angularjs yeoman yeoman-generator

【解决方案1】：

如果您要缩小代码，请尝试以下操作：

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

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

当代码被缩小时 ...function ($scope) 被更改为类似 function (e) 的东西然后角度可以找到 e 注入，但如果你像这样使用： ['$scope', function ( $scope) { ... 缩小后的代码类似于 ['$scope', function (e) {.因此，当角度进行注入时，他会找到“$scope”并注入 e 变量。

【讨论】：

【解决方案2】：

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

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

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

在我看来，这是怎么回事，您在 main.js 中的代码曾经包含类似以下内容：

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

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

function ($scope) {
    ...
}

当您的代码被缩小时，会发生什么，在MainController.js 中：

function (e) {
    ...
}

所以，requires 之一已解决，您编译和缩小的脚本如下所示：

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

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

在缩小您的来源时，您必须使用 explicit 注入声明您的控制器：

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

这样，Angular 仍然知道为控制器提供什么，而不管它的参数是如何命名的。

干杯！

【讨论】：