Je travaille sur une application web SailsJS, en utilisant Angular. Cependant, je rencontre des problèmes. Lorsque je charge ma page, rien n'apparaît et la copnsole est pleine d'erreurs, la plupart exaltantes pour angular.js

ncaught Erreur: [$ injector: modulerr] Échec de l'instanciation du module HomepageModule en raison de: Erreur: [$ injector: modulerr] Échec de l'instanciation du module toastr en raison de: Erreur: [$ injector: nomod] Le module 'toastr' n'est pas disponible! Vous avez soit mal orthographié le nom du module, soit oublié de le charger. Si vous enregistrez un module, assurez-vous de spécifier les dépendances comme deuxième argument.

Comme vous pouvez le voir sur la page source ci-dessous, il y a un lien vers toastr, qui si je clique, il va dans le fichier source de javascript. J'ai essayé d'alterner l'ordre afin que jQuery se charge d'abord (n'aide pas). Quelle est la cause de ces erreurs?

<!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']);

Puis c'est là qu'il est utilisé 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;
    });
  };


}]);
1
George Edwards 6 mars 2016 à 12:57

4 réponses

Meilleure réponse

Il y a toastr, qui est une bibliothèque JavaScript toastr et il y a AngularJS-Toaster, qui est une bibliothèque toastr AngularJS.

Vous devriez utiliser ce dernier, mais il semble que vous utilisez le premier.

Pour utiliser ce dernier dans AngularJS, essayez ce qui suit (selon la documentation):

angular.module('main', ['toaster', 'ngAnimate'])
    .controller('myController', function($scope, toaster) {
        $scope.pop = function(){
            toaster.pop('success', "title", "text");
        };
    });
3
camden_kid 6 mars 2016 à 10:16

Inclure First angular js puis ses dépendances pour toujours éviter ce genre d'erreurs

<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");
    };
});
1
RamaKrishna 6 mars 2016 à 10:47

Dans mon propre cas, je me suis souvenu d'inclure mon script app.js.

0
Edwin Ikechukwu Okonkwo 16 oct. 2016 à 20:01
<script src="/bower_components/angular/angular.js"></script>  First
<script src="/bower_components/toastr/toastr.js"></script>    Second

N'oubliez pas d'ajouter la dépendance angular.module ('app', ['toastr'])

0
regex 6 mars 2016 à 10:18