如何将 angularJS 与 Yeoman 的 webapp-generator 一起使用
How to use angularJS with Yeoman's webapp-generator
我想在我的 Webapp 生成器设置中使用 AngularJS。 (我知道有一个 angular 生成器,但我更喜欢 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
文件夹的内容后),我在注入控制器时遇到错误:
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...
});
有什么问题吗? And/or 在使用 Yeoman 的 webapp 生成器的设置中使用 Angular 的正确方法是什么?
如果您要缩小代码,试试这个:
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.user = {};
$scope.showSuccess = false;
$scope.registerFormSubmitted = false;
//Some other code...
}]);
当代码被缩小时 ...function ($scope) 被更改为 function (e) 之类的东西然后 angular 可以找到 e 来注入,但是如果你这样使用:[' $scope', function ($scope) { ... 缩小后的代码会像这样 ['$scope', function (e) {.因此,当 angular 执行注入时,他会找到“$scope”并注入 e 变量。
好吧,我会在这里做很多预测,但我有点自信我的方向是正确的。
有两件事让我相信你的后一个命令,gulp default
,缩小你的js文件:
- 您提到的
dist
文件夹通常用于 distribution
- 错误消息指的是
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 仍然知道为您的控制器提供什么,无论其参数如何命名。
干杯!
我想在我的 Webapp 生成器设置中使用 AngularJS。 (我知道有一个 angular 生成器,但我更喜欢 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
文件夹的内容后),我在注入控制器时遇到错误:
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...
});
有什么问题吗? And/or 在使用 Yeoman 的 webapp 生成器的设置中使用 Angular 的正确方法是什么?
如果您要缩小代码,试试这个:
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.user = {};
$scope.showSuccess = false;
$scope.registerFormSubmitted = false;
//Some other code...
}]);
当代码被缩小时 ...function ($scope) 被更改为 function (e) 之类的东西然后 angular 可以找到 e 来注入,但是如果你这样使用:[' $scope', function ($scope) { ... 缩小后的代码会像这样 ['$scope', function (e) {.因此,当 angular 执行注入时,他会找到“$scope”并注入 e 变量。
好吧,我会在这里做很多预测,但我有点自信我的方向是正确的。
有两件事让我相信你的后一个命令,gulp default
,缩小你的js文件:
- 您提到的
dist
文件夹通常用于 distribution - 错误消息指的是
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 仍然知道为您的控制器提供什么,无论其参数如何命名。
干杯!