[英]How to use angularJS with Yeoman's webapp-generator
I'd like to use AngularJS in my Webapp generator setup. 我想在Webapp生成器设置中使用AngularJS。 (I know there is an angular generator, but I prefer the folder structure of the Webapp generator).
(我知道有一个角度生成器,但是我更喜欢Webapp生成器的文件夹结构)。
I have installed Angular with bower install angular --save
and have the reference to the js file in my index: 我已经用
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 -->
When I run gulp serve, it all works perfectly. 当我运行gulp服务时,一切正常。
But, when I run gulp default
(and try to open the website elswhere, after copying the contents of the dist
folder), i get an error injecting my controller: 但是,当我运行
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
Here's my folder structure: 这是我的文件夹结构:
app
-> scripts
->-> Controllers
->->-> MainController.js
->-> main.js
Here's main.js: 这是main.js:
var app = angular.module('PentiaExercise', []);
And here's MainController.js: 这是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...
});
What can be wrong? 有什么事吗 And/or what is the correct way to use Angular in a setup using Yeoman's webapp generator?
和/或使用Yeoman的webapp生成器在设置中使用Angular的正确方法是什么?
If you are minifying your code try this: 如果要缩小代码,请尝试以下操作:
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.user = {};
$scope.showSuccess = false;
$scope.registerFormSubmitted = false;
//Some other code...
}]);
When the code are minified the ...function ($scope) is changed to something like function (e) then the angular can find e to inject, but if you use like this: ['$scope', function ($scope) { ... the code minified will be something like this ['$scope', function (e) {. 当代码缩小时,...函数($ scope)更改为函数(e),则角度可以找到要注入的e,但是如果您这样使用:['$ scope',function($ scope) {...压缩后的代码将是这样的['$ scope',function(e){。 So when the angular do the inject he find the '$scope' and inject in e variable.
因此,当进行角度注入时,他找到“ $ scope”并注入e变量。
Alright, I'm gonna be doing lots of predictions here, but I'm somewhat confident I'm heading the right way. 好吧,我将在这里做很多预测,但是我有一定的信心要朝着正确的方向前进。
Two things make me believe that your latter command, gulp default
, minifies your js files: 有两件事使我相信您的后一个命令gulp
gulp default
最小化您的js文件:
dist
folder, that is typically used for the dist ribution dist
文件夹,通常用于dist ribution e
resource (that looks very much like a minified variable name). e
资源(看起来非常像缩小的变量名)。 What's going on, in my opinion, is that your code in main.js
, somewhere used to contain something similar to: 我认为这是在
main.js
中的代码曾经包含类似以下内容的地方:
myApp.controller('MainController', require('./scripts/Controllers/MainController.js'));
... and your MainController.js
looks like the following: ...,您的
MainController.js
如下所示:
function ($scope) {
...
}
What's happening, when your code is minified, is the following, in MainController.js
: 当代码最小化时,在
MainController.js
发生了以下情况:
function (e) {
...
}
So, one the require
s are resolved, your compiled and minified script looks like: 因此,一个
require
得以解决,您的编译和缩小脚本如下所示:
a.controller('MainController', function (e) {
...
});
... and Angular is trying to provide your controller with the e
service, which does not exist. ...并且Angular试图为您的控制器提供
e
服务,该服务不存在。
You have to declare your controller using explicit injection, when minifying your sources: 在最小化源代码时,必须使用显式注入声明控制器:
myApp.controller(MainController, ['$scope', require('./scripts/Controllers/MainController.js')]);
This way, Angular will still know what to provide your Controller with, regardless of how its parameters are named. 这样, Angular仍然知道为控制器提供什么,而不管其参数如何命名。
Cheers! 干杯!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.