未知提供商 - NavigationCtrl、Restangular
我目前正在处理我的旧项目，让它们再次完全工作，作为一个小的重构练习，我遇到了一些不再编译的 AngularJS 代码。我相信这取决于更新的依赖项，因为我至少 3 年没有更改此源代码的功能。
我遇到的问题是：
angular.js:15567 错误：[$injector:unpr] 未知提供者：AProvider https://errors.angularjs.org/1.7.8/$injector/unpr?p0=AProvider%20%3C-%20A%20%3C-%20NavigationCtrl
at angular.js:138
at angular.js:4924
at Object.getService [as get] (angular.js:5084)
at angular.js:4929
at getService (angular.js:5084)
at injectionArgs (angular.js:5109)
at Object.invoke (angular.js:5133)
at $controllerInit (angular.js:11704)
at nodeLinkFn (angular.js:10517)
at compositeLinkFn (angular.js:9832)
我理解这是一个注入问题。我正在尝试注入 Angular 不知道的东西。这有点令人困惑，因为我已经有一段时间没有使用 AngularJS 了（使用过 Angular 2+）。
My app.js文件看起来像这样：
angular.module('qaDashboard', ['restangular'])
.run(['$anchorScroll', function ($anchorScroll) {
$anchorScroll.yOffset = 85; // always scroll by 50 extra pixels
}]);
angular.module('qaDashboard').controller('NavigationCtrl', function ($scope, $location, $anchorScroll) {
$scope.scrollTo = function (id) {
$location.hash(id);
$anchorScroll();
};
});
// Environment
require('../components/environments/script.js');
require('../components/environments/style.scss');
// Feature
require('../components/features/script.js');
require('../components/features/style.scss');
// Day
require('../components/days/script.js');
require('../components/days/style.scss');
// Hour
require('../components/hours/script.js');
// Report Data (URL & JSON)
require('../components/report/script.js');
require('../components/report/style.scss');
// Index Style
require('../stylesheets/style.scss');
And my index.html看起来像这样：
<!DOCTYPE html>
<html ng-app="qaDashboard">
<head>
<title>DASHBOARD</title>
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/lodash/lodash.js"></script>
<script src="/node_modules/restangular/src/restangular.js"></script>
<script src="/javascripts/app.bundle.js" type="text/javascript"></script>
<body>
<div class="navbar">
<p>Regression Test Dashboard</p>
<div ng-controller="NavigationCtrl" class="navbarAlign">
<a ng-click="scrollTo('Dev')" class="btn">Dev</a>
<a ng-click="scrollTo('QA')" class="btn">QA</a>
<a ng-click="scrollTo('Staging')" class="btn">Staging</a>
<a ng-click="scrollTo('Staging_EMEA')" class="btn">Staging EMEA</a>
<a ng-click="scrollTo('Production')" class="btn">Production</a>
<a ng-click="scrollTo('Production_EMEA')" class="btn">Production EMEA</a>
<!--<a class="btn">[Do stuff]</a>-->
</div>
</div>
<environments>
</environments>
</body>
</html>
我尝试过删除单个控制器，但没有成功。我在这里遗漏了一些明显的东西吗？自从我上次使用此代码以来，语法/ API 是否发生了很大变化？
The app,js文件被 webpack 捆绑- 不知道这是否是问题的根源。我知道这个代码以前运行得很好。我只是觉得我错过了一些微不足道的东西，而且事实证明它有点难以发现。
My package.json- 如果有帮助：
{
"name": "dashboard",
"version": "0.5.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"angular": "^1.7.8",
"body-parser": "~1.19.0",
"concat-map": "0.0.1",
"convert-time": "^0.3.0",
"cookie-parser": "~1.4.4",
"dateformat": "^3.0.3",
"debug": "~4.1.1",
"express": "~4.17.1",
"jenkins-api": "^0.3.1",
"lodash": "^4.17.15",
"morgan": "~1.9.1",
"restangular": "^1.6.1",
"serve-favicon": "~2.5.0"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"acorn": "^6.2.0",
"acorn-dynamic-import": "^4.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.1.0",
"file-loader": "^4.1.0",
"html-loader": "^0.5.5",
"node-sass": "^4.12.0",
"promise": "^8.0.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^2.1.0",
"webpack": "^4.36.1"
}
}
EDIT:
我试过这个：
angular.module('qaDashboard', ['restangular'])
.controller('NavigationCtrl', function ($scope, $location, $anchorScroll) {
$scope.scrollTo = function (id) {
$location.hash(id);
$anchorScroll();
}
.run(['$anchorScroll', function ($anchorScroll) {
$anchorScroll.yOffset = 85; // always scroll by 50 extra pixels
}])
});
没有运气。
Edit 2:
我刚刚使用以下代码尝试了 georgeawg 的响应：
angular.module('qaDashboard', ['restangular'])
.controller('NavigationCtrl', ["$scope", "$location", "$anchorScroll",
function ($scope, $location, $anchorScroll) {
$scope.scrollTo = function (id) {
$location.hash(id);
$anchorScroll();
}
}]);
// Environment
require('../components/environments/script.js');
require('../components/environments/style.scss');
// Feature
require('../components/features/script.js');
require('../components/features/style.scss');
// Day
require('../components/days/script.js');
require('../components/days/style.scss');
// Hour
require('../components/hours/script.js');
// Report Data (URL & JSON)
require('../components/report/script.js');
require('../components/report/style.scss');
// Index Style
require('../stylesheets/style.scss');
我得到一个angular.js:15567 Error: [$injector:unpr] Unknown provider: AProvider <- A现在问题。
我的组件如下所示：
angular.module('qaDashboard').component('environments', {
controller: function (Restangular) {
this.$onInit = () => {
Restangular.one('environments').get().then((response) => {
this.environments = response.environments;
});
}
},
template: require('./template.html'),
}).filter('formattedEnvironment', () => {
return (item) => {
return item.replace('-', ' ')
.replace('_', ' ')
.replace('_', ' ')
.replace('_', ' ');
}
});
<div id="{{environment}}" ng-repeat="environment in $ctrl.environments" class="borderedHolder">
<h1>{{environment | formattedEnvironment}}</h1>
<features environment='environment' >
</features>
</div>
（有几个组件，它们都使用Restangular像上面那样^
编辑3：我已经尝试过：
with: angular.js:15567 Error: [$controller:ctrlreg] The controller with the name 'EnvironmentsController' is not registered.
angular.module('qaDashboard').component('environments', {
controller: 'EnvironmentsController', ['Restangular', function (Restangular) {
this.$onInit = () => {
Restangular.one('environments').get().then((response) => {
this.environments = response.environments;
});
}
},
template]: require('./template.html'),
})
