Angular Service在声明全局模块时不被识别
我有一个角度应用程序,它有一个称为app的主模块,然后是子模块:app.ReportingApp,app.MediaJobApp,app.ManageUsers。Angular Service在声明全局模块时不被识别
我有一个服务,允许从本地存储显示一些警报,什么不是。
我发现的问题是,当我将服务依赖项注入到控制器中时,我想从子模块中使用它。然而,当我在我的服务中声明'app.Reporting'而不是'app'时,它可以工作,但是在其他地方破坏了其他东西。
我不能使用这样的服务吗?从逻辑上讲,在服务中调用主模块并且子模块能够调用与主模块相关的服务是有意义的,但看起来我可能不得不做另一种服务来满足模块之间的分离。
下面是一些代码:
app.js:
angular.module('app', ['app.MediaJobApp', 'app.ManageUsers', 'app.ReportingApp'])
.run(function ($http) {
$http.defaults.headers.common['X-XSRF-Token'] =
document.getElementsByName('__RequestVerificationToken')[0].getAttribute("value");
});
app.ReportingApp.js:
angular.module('app.ReportingApp', []);
PageAlertService.js:
angular.module('app').service('PageAlertService', function() {
this.setAlert = function() {
console.log("In setAlert");
if (localStorage.getItem("Success")) {
var alertObj = {
alert: "Success",
alertMessage: localStorage.getItem("Success")
};
console.log(alertObj);
} else if (localStorage.getItem("Error") && localStorage.getItem("Error") != null) {
var alertObj = {
alert: "Error",
alertMessage: localStorage.getItem("Error")
};
};
return alertObj;
};
this.errorStatusCheck = function(error, successString) {
if (error.status = -1) {
localStorage.setItem("Success", successString);
} else {
localStorage.setItem("Error", "Error occured: " + error.status + error.statusText);
};
};
});
和顶部ReportingCtrl.js:
angular.module('app.ReportingApp').controller('ReportingCtrl',
[
'$scope',
'ReportingService',
'PageAlertService',
function ($scope, ReportingService, PageAlertService) {
我得到的错误是:Error: [$injector:unpr] Unknown provider: PageAlertServiceProvider <- PageAlertService <- ReportingCtrl
,我发现这是由于我上面提到的问题。
帮助将不胜感激!谢谢!
你根本无法使用这样的服务。您必须将服务的模块注入到控制器的模块中。创建app.ReportingApp
模块时
angular.module('app.service').service('PageAlertService', function() {
this.setAlert = function() {
console.log("In setAlert");
if (localStorage.getItem("Success")) {
var alertObj = {
alert: "Success",
alertMessage: localStorage.getItem("Success")
};
console.log(alertObj);
} else if (localStorage.getItem("Error") && localStorage.getItem("Error") != null) {
var alertObj = {
alert: "Error",
alertMessage: localStorage.getItem("Error")
};
};
return alertObj;
};
this.errorStatusCheck = function(error, successString) {
if (error.status = -1) {
localStorage.setItem("Success", successString);
} else {
localStorage.setItem("Error", "Error occured: " + error.status + error.statusText);
};
};
});
然后,你必须提供这项服务模块作为一个依赖:在这种情况下,解决方案可能是分离的服务到另一个模块
angular.module('app.ReportingApp',['app.service']);
然后你可以使用以下代码无误:
angular.module('app.ReportingApp').controller('ReportingCtrl',
[
'$scope',
'ReportingService',
'PageAlertService',
function ($scope, ReportingService, PageAlertService) {
希望你能理解。
是的,我完全理解。一位绅士在评论我的帖子后说,你现在在说什么。我不知道你不能这样做,因为在其他语言中情况并非如此。谢谢你的文章! – DDelgro
您的应用程序模块依赖于app.ReportingApp模块(反之亦然),因此您将无法访问app.ReportingApp中的应用程序模块中定义的服务。为app.DataService等服务定义一个分离模块,并将其作为依赖项添加到您的应用中.ReportingApp模块 – Knitesh
我创建了一个plnkr,我相信它演示了您的用例,并显示它按预期工作。您可以查看devtools中的console.log。 https://plnkr.co/edit/IZyRm2srvysogQroESlL?p=preview – ChrisG
谢谢你们两位,我现在明白了! – DDelgro