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

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），則角度可以找到要注入的e，但是如果您這樣使用：['$ scope'，function（$ scope） {...壓縮后的代碼將是這樣的['$ scope'，function（e）{。 因此，當進行角度注入時，他找到“ $ scope”並注入e變量。

Answer 2

好吧，我將在這里做很多預測，但是我有一定的信心要朝着正確的方向前進。

有兩件事使我相信您的后一個命令gulp 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仍然知道為控制器提供什么，而不管其參數如何命名。

干杯!