$injector:modulerr : authentication in AngularJS a

2019-04-17 15:35发布

站内问答 / JavaScript
728 1 6

I am having hard time to pass this error:

Uncaught Error: [$injector:modulerr]

when I am trying to make an authentication app with AngularJS. I put the code in plunker.

Here are my codes:

1- app.js

"use strict";
(function() {

var app = angular.module('loginApp', ['AuthService', 'Session']);
app.constant('appSettings', {
    title:'Authentication Application',
    version:'1.0'
});
app.constant('AUTH_EVENTS', {
      loginSuccess: 'auth-login-success',
      loginFailed: 'auth-login-failed',
      logoutSuccess: 'auth-logout-success',
      sessionTimeout: 'auth-session-timeout',
      notAuthenticated: 'auth-not-authenticated',
      notAuthorized: 'auth-not-authorized'
});
app.constant('USER_ROLES', {
      all: '*',
      admin: 'admin',
      editor: 'editor',
      guest: 'guest'
});
app.controller('footerController', function($scope, appSettings){
    $scope.appSettings = appSettings;
});

}());

2 - applicationcontroller.js

"use strict";
(function() {

var applicationcontroller = function ($scope, USER_ROLES, AuthService) {
      $scope.currentUser = null;
      $scope.userRoles = USER_ROLES;
      $scope.isAuthorized = AuthService.isAuthorized;

      $scope.setCurrentUser = function (user) {
        $scope.currentUser = user;
      };
};

applicationcontroller.$inject = ['$scope', 'USER_ROLES', 'AuthService'];

angular.module('loginApp')
  .controller('applicationcontroller', applicationcontroller);

}());

3- logincontroller.js

"use strict";
(function() {

var logincontroller = function ($scope, $rootScope, AUTH_EVENTS, AuthService) {
      $scope.credentials = {
        username: '',
        password: ''
      };
      $scope.login = function(credentials){
        AuthService.login(credentials).then(function(user){
            $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
            $scope.setCurrentUser(user);
        }, function(error){
            $rootScope.$broadcast(AUTH_EVENTS.loginFailed);
        });
      };
};

logincontroller.$inject = ['$scope', '$rootScope', 'AUTH_EVENTS', 'AuthService'];

angular.module('loginApp')
  .controller('logincontroller', logincontroller);

}());

4- authservice.js

"use strict";
(function(){
   var AuthService = function($http, Session){
    var authService = {};

    authService.login = function (credentials) {
      return $http
        .post('/login', credentials)
        .then(function (res) {
          Session.create(res.data.id, res.data.user.id,
                         res.data.user.role);
          return res.data.user;
        });
    };

    authService.isAuthenticated = function () {
      return !!Session.userId;
    };

    authService.isAuthorized = function (authorizedRoles) {
      if (!angular.isArray(authorizedRoles)) {
        authorizedRoles = [authorizedRoles];
      }
      return (authService.isAuthenticated() &&
        authorizedRoles.indexOf(Session.userRole) !== -1);
    };

    return authService;
};
AuthService.$inject = ['$http', 'Session'];
angular.module('loginApp').factory('AuthService', AuthService);
}());

5- session.js

"use strict";
(function(){
var Session = function(){
        this.create = function (sessionId, userId, userRole) {
        this.id = sessionId;
        this.userId = userId;
        this.userRole = userRole;
      };
      this.destroy = function () {
        this.id = null;
        this.userId = null;
        this.userRole = null;
      };
};
angular.module('loginApp').service('Session', Session);
}());

6- index.html

<!DOCTYPE html>
<html data-ng-app="loginApp" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Authentication</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="css/main.css" rel="stylesheet">
</head>
<body ng-controller="applicationcontroller">
<div class="container">
    <div class="jumbotron">
    <form name="loginForm" ng-controller="logincontroller" ng-submit="login(credentials)" novalidate>
      <div class="form-group">
            <label for="username">Username:</label>
            <input type="text" id="username" ng-model="credentials.username" class="form-control">
     </div>
     <div class="form-group">      
      <label for="password">Password:</label>
      <input type="password" id="password" ng-model="credentials.password" class="form-control">
    </div>
       <button type="submit" class="btn btn-default">Submit</button>

    </form>
    <hr class="color-violet">
    <footer class="text-center" data-ng-controller="footerController"> MADE WITH <i class="fa fa-heart color-violet"></i> BY <span class="color-violet">ALAN SABERI</span>. FIND THIS ON <a href="https://github.com/alireza-saberi/customer-application" target="_bank"><span class="color-violet">GITHUB</span></a><div>Version: {{appSettings.version}}</div></footer>
</div>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="vendor/bootstrap.min.js"></script>
     <script src="vendor/angular.min.js"></script>
     <script arc="js/services/authservice.js"></script>
     <script arc="js/services/session.js"></script>
     <script src="js/app.js"></script>
     <script src="js/controllers/applicationcontroller.js"></script>       
     <script src="js/controllers/logincontroller.js"></script>
  </body>
</html>

1条回答
时光不老，我们不散
2楼-- · 2019-04-17 16:25

First of all you have a typo when referencing your script files

<script arc="js/services/authservice.js"></script>
<script arc="js/services/session.js"></script>

Should be

<script src="js/services/authservice.js"></script>
<script src="js/services/session.js"></script>

Second -> Your AuthService and Session are not new modules, they are being registered in the same loginApp module based on your code. So you don't inject them into your loginApp module.

Change 

var app = angular.module('loginApp', ['AuthService', 'Session']);

to this 

var app = angular.module('loginApp', []);

Third -> You are loading your service script files before loading your app.js, remember app.js is where you are first defining your loginApp module that you are using to assign your services, so change your script load order to be this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
         <!-- Include all compiled plugins (below), or include individual files as needed -->
         <script src="bootstrap.min.js"></script>
         <script src="angular.min.js"></script>
         <script src="app.js"></script>
         <script src="session.js"></script>
         <script src="authservice.js"></script>             
         <script src="applicationcontroller.js"></script>       
         <script src="logincontroller.js"></script>

Here's your plnkr that's forked and working : http://plnkr.co/edit/5BEIsVxwt8sKwr4HA8Eq?p=preview

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)