$噴油器：modulerr：認證在AngularJS應用

-1

我有很難通過此錯誤：

Uncaught Error: [$injector:modulerr]

當我試圖與AngularJS認證的應用程序。我把代碼放在plunker。

這裏是我的代碼：

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>

來源

2015-10-26 Ali Saberi

首先你有一個錯字時引用您的腳本文件

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

應該

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

二 - >您AuthService和會話不是新的模塊，它們被註冊的，基於您的代碼相同loginApp模塊中。所以你不要將它們注入到你的loginApp模塊中。

變化

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

這個

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

三 - >您正在加載您的服務腳本文件加載您app.js之前，記得app.js是你在哪裏首先定義loginApp模塊，您正在使用它來分配您的服務，因此請將腳本加載順序更改爲此

<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>

這是你的plnkr多數民衆贊成分叉和工作：http://plnkr.co/edit/5BEIsVxwt8sKwr4HA8Eq?p=preview

來源

2015-10-27 04:05:25 curiousgeek

凡從$ scope.setCurrentUser（用戶）這個未來; 它來自ApplicationController –

$噴油器：modulerr：認證在AngularJS應用

回答

相關問題