我正在使用 Angular 开发 SailsJS 网络应用程序。但是，我遇到了问题。当我加载我的页面时，什么也没有出现，copnsole 充满了错误，大多数与 angular.js 有关
ncaught Error: [$injector:modulerr] Failed to instantiate module HomepageModule due to: Error: [$injector:modulerr] Failed to instantiate module toastr due to: Error: [$injector:nomod] Module 'toastr' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
从下面的页面源码可以看出，有一个指向toastr的链接，如果我点击它，它会转到javascript的源文件。我尝试过交替顺序，以便首先加载 jQuery(无济于事)。是什么导致了这些错误？
<!DOCTYPE html>
<html>
<head>
<!--STYLES-->
<link rel="stylesheet" href="/bower_components/toastr/toastr.css">
<link rel="stylesheet" href="/styles/angular-toastr.css">
<link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
<link rel="stylesheet" href="/styles/importer.css">
<!--STYLES END-->
<script type="text/javascript">
window.SAILS_LOCALS = { _csrf: "null" };
</script>
</head>
<body ng-app="HomepageModule" ng-controller="HomepageController" ng-cloak>
//content of my page
</body>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/bower_components/toastr/toastr.js"></script>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/js/dependencies/compareTo.module.js"></script>
<script src="/js/public/signup/SignupModule.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/public/homepage/HomepageModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
<script src="/js/public/homepage/HomepageController.js"></script>
<script src="/js/public/signup/SignupController.js"></script>
<!--SCRIPTS END-->
</body>
</html>
主页模块:
angular.module('HomepageModule', ['toastr', 'compareTo']);
然后这是使用 HomepageController 的地方:
angular.module('HomepageModule').controller('HomepageController', ['$scope', '$http', 'toastr', function($scope, $http, toastr){
$scope.loginForm = {
loading: false
}
$scope.submitLoginForm = function (){
// Set the loading state (i.e. show loading spinner)
$scope.loginForm.loading = true;
// Submit request to Sails.
$http.put('/login', {
email: $scope.loginForm.email,
password: $scope.loginForm.password
})
.then(function onSuccess (){
// Refresh the page now that we've been logged in.
window.location = '/';
})
.catch(function onError(sailsResponse) {
// Handle known error type(s).
// Invalid username / password combination.
if (sailsResponse.status === 400 || 404) {
toastr.error('Invalid email/password combination.', 'Error', {
closeButton: true
});
return;
}
toastr.error('An unexpected error occurred, please try again.', 'Error', {
closeButton: true
});
return;
})
.finally(function eitherWay(){
$scope.loginForm.loading = false;
});
};
}]);
最佳答案
有toastr ，这是一个 toastr JavaScript 库，并且有 AngularJS-Toaster ，这是一个 AngularJS toastr 库。
你应该使用后者，但看起来你使用的是前者。
要在 AngularJS 中使用后者，请尝试以下操作(根据文档):
angular.module('main', ['toaster', 'ngAnimate'])
.controller('myController', function($scope, toaster) {
$scope.pop = function(){
toaster.pop('success', "title", "text");
};
});
关于javascript - Uncaught Error : [$injector:modulerr] Failed to instantiate module toastr，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35825475/