Question

我正在使用Angular开发一个SailsJS Web应用程序。但是，我遇到了问题。当我加载页面时，没有任何内容出现，并且copnsole充满了错误，最常见的是angular.js

ncaught错误：[$ injector：modulerr]由于以下原因无法实例化模块HomepageModule：错误：[$ injector：modulerr]由于以下原因无法实例化模块toastr：错误：[$ injector：nomod]模块'toastr'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

正如您从下面的页面源中看到的，有一个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>

HomePageModule：

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;
    });
  };


}]);

Answer 1

有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");
        };
    });

Answer 2

包括第一个角度js然后它的依赖性总是避免这种错误

<script src="/bower_components/angular/angular.js"></script> in head tag
<script src="/bower_components/toastr/toastr.js"></script> anywhere after head tag


angular.module('HomepageModule', ['toaster', 'ngAnimate'])
.controller('HomepageController', function($scope, toaster) {
    $scope.pop = function(){
        toaster.pop('success', "title", "text");
    };
});

Answer 3

<script src="/bower_components/angular/angular.js"></script>  First
<script src="/bower_components/toastr/toastr.js"></script>    Second

不要忘记添加依赖项 angular.module（'app'，['toastr']）

Answer 4

在我自己的情况下，我记得包含我的app.js脚本。

未捕获错误：[$ injector：modulerr]无法实例化模块toastr

4 个答案: