Question

我正在尝试编译我们的一个角度＆amp; openLayers项目，但我无法使用Angular。

我已经设置了角度外部参数，但是在编译之后我得到了这个错误：

Error: [$injector:unpr] Unknown provider: aProvider <- a <- myCtrl
http://errors.angularjs.org/1.3.15/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20myCtrl
    at REGEX_STRING_REGEXP (angular.js:63)
    at angular.js:4015
    at Object.getService [as get] (angular.js:4162)
    at angular.js:4020
    at getService (angular.js:4162)
    at Object.invoke (angular.js:4194)
    at $get.extend.instance (angular.js:8493)
    at angular.js:7739
    at forEach (angular.js:331)
    at nodeLinkFn (angular.js:7738)

这是一个简单的例子来说明我的问题：

HTML：

<div ng-app="myApp" ng-controller="myCtrl">
  First Name: <input type="text" ng-model="firstName"><br>
  Last Name: <input type="text" ng-model="lastName"><br>
  <br>
  Full Name: {{firstName + " " + lastName}}
</div>

<script src="angular/angular.js"></script>
<script src="vmap.js"></script>

脚本：

  goog.provide("vmap");

vmap = function(){

};


var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});

要编译文件，我使用以下命令：

python closure-library/closure/bin/build/closurebuilder.py
--root=closure-library/ 
--root=../debug/ 
--namespace="vmap" 
--output_mode=compiled 
--compiler_jar=compiler.jar 
--compiler_flags="
    --compilation_level=ADVANCED_OPTIMIZATIONS" 
    --compiler_flags="--externs=../debug/lib/angular/angular-1.3.js" 
    --compiler_flags="--angular_pass" > ../vmap.js

我找到了angular-1.3.js文件here

我错过了什么？

Answer 1

在控制器构造函数的jsdocs中添加@ngInject，
将函数作为角度模块app.controller('myCtrl', fn)
确保将--angular_pass参数传递给闭包编译器。

因此，这里提供的示例的修改版本应该适合您：

goog.provide("vmap");

/**
 * @constructor
 * @ngInject
 */
vmap = function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
};


var app = angular.module('myApp', []);
app.controller('myCtrl', vmap);

Answer 2

使用数组表示法编写控制器：

app.controller('myCtrl', ['$scope', function($scope) {
    $scope['firstName'] = "John";
    $scope['lastName'] = "Doe";
}]);

当局部变量（如$ scope）被重命名，对象属性（$ scope.firstName）也是如此，除非你用字符串表示法写它们。

有关AngularJS缩小的更多信息，请访问：https://docs.angularjs.org/tutorial/step_05#a-note-on-minification

在ADVANCED_MODE中使用Clular Compiler和AngularJS

2 个答案: