2015-06-24 77 views
0

我試圖做AngularJS測試應用程序,但停留在幾天在一個地方 與此錯誤:

angular.js:38 Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.4.1/$injector/unpr?p0=AuthtokenProvider%20%3C…terceptor%20%3C-%20%24http%20%3C-%20%24templateRequest%20%3C-%20%24compile 

我能理解,我做了在參考文獻中的某處錯誤:

你能告訴我在哪裏,我的代碼如下

mainController.js:

angular.module('mainController', []) 

.controller('MainController', function($rootScope, $location, Auth) { 

     var vm = this; 

     vm.LoggedIn = Auth.isLoggedIn(); 

     $rootScope.$on('$routeChangeStart', function() { 
      vm.LoggedIn = Auth.isLoggedIn(); 

      Auth.getUser() 
       .then(function (data) { 
        vm.user = data.data; 
       }); 
     }); 

     vm.doLogin = function() { 

      vm.processing = true; 

      vm.error = ''; 

      Auth.login(vm.loginData.username, vm.loginData.password) 
       .success(function (data) { 
        vm.processing = false; 

        Auth.getUser() 
         .then(function (data) { 
          vm.user = data.data; 
         }); 

        if (data.success) 
         $location.path('/'); 
        else 
         vm.error = data.message; 

       }); 
     } 

     vm.doLogout = function() { 
      Auth.logout(); 
      $location.path('/logout'); 
     } 
    }); 

userController.js:

angular.module('userController', ['userService']) 

.controller('UserController', function(User){ 

    var vm = this; 

    User.all() 
     .success(function (data) { 
      vm.users = data 
     }) 
}) 

.controller('UserCreateController', function(User, $location, $window){ 

     var vm = this; 

     vm.signupUser = function() { 
      vm.message = ''; 

      User.create(vm.userData) 
       .then(function(response){ 
        vm.userData = {}; 
        vm.message = response.data.message; 

        $window.localStorage.setItem('token', response.data.token); 
        $location.path('/'); 
       }) 
     } 
    }) 

authService.js:

angular.module('authService', []) 

.factory('Auth', function($http, $q, AuthToken) { 

     var authFactory = {}; 

     authFactory.login = function(username, password){ 

      return $http.post('/api/login', { 

       username: username, 
       password: password 
      }) 
       .success(function(data){ 
        AuthToken.setToken(data.token); 
        return data; 
       }) 
     } 

     authFactory.logout = function(){ 
      AuthToken.setToken(); 
     } 

     authFactory.isLoggedIn = function(){ 
      if(AuthToken.getToken()) 
       return true; 
      else 
       return false; 
     } 

     authFactory.getUser = function(){ 
      if(AuthToken.getToken()) 
      return $http.get('/api/me'); 
      else 
      return $q.reject({ message: "User has no token"}); 
     } 

     return authFactory; 
    }) 

.factory('AuthToken', function($window){ 

     var authTokenFactory = {}; 

     authTokenFactory.getToken = function(){ 
      return $window.localStorage.getItem('token'); 
     } 

     authTokenFactory.setToken = function (token) { 
      if(token) 
      $window.localStorage.setItem('token', token); 
      else 
      $window.localStorage.removeItem('token'); 
     } 

     return authTokenFactory; 
    }) 

.factory('AuthInterceptor', function ($q, $location, Authtoken) { 

     var interceptorFactory = {}; 

     interceptorFactory.request = function(config){ 

      var token = Authtoken.getToken(); 

      if(token){ 
       config.headers['x-access-token'] = token; 
      } 

      return config 
     }; 

     interceptorFactory.responseError = function (response) { 
      if(response.status == 403) 
      $location.path('/login'); 

      return $q.reject(response); 
     } 

     return interceptorFactory; 
    }); 

userService.js:

angular.module('userService', []) 

.factory('User', function($http){ 

     var userFactory = {}; 

     userFactory.create = function(userData){ 
      return $http.post('/api/signup', userData); 
     } 

     userFactory.all = function(){ 
      return $http.get('/api/users'); 
     } 

     return userFactory; 
    }); 

app.js:

angular.module('MyApp', ['appRoutes', 'mainController', 'authService', 'userController', 'userService']) 

.config(function($httpProvider){ 

     $httpProvider.interceptors.push('AuthInterceptor'); 
    }); 

app.routes。 js:

angular.module('appRoutes', ['ngRoute']) 

.config(function ($routeProvider, $locationProvider) { 

     $routeProvider 

      .when('/', { 
       templateUrl: 'app/views/pages/home.html' 
      }) 
      .when('/login',{ 
       templateUrl: 'app/views/pages/login.html' 
      }) 
      .when('/signup', { 
       templateUrl: 'app/views/pages/signup.html' 
      }); 

     //$locationProvider.html5Mode(true); 
     $locationProvider.html5Mode({ 
      enabled: true, 
      requireBase: false 
     }); 
    }); 
+0

將Authservice注入到mainController模塊。順便說一句,模塊的怪名字。使用類似於:'angular.module('app',['authService']);' – Michelangelo

+0

Mikey,非常感謝你(我會在未來注意到它) – Anton

回答

4

你需要注入你的authService到您的mainController使其可因爲你是在mainController使用驗證:

angular.module('mainController', ['authService']); 

每當你在第二個參數傳遞給模塊(陣列)它創建一個無法訪問已創建的其他模塊的新模塊。所以你必須以這種方式使它們彼此可用。

你可以閱讀有關

0

也許問題是引用不同文件中的模塊的名稱。我在另一篇文章中讀到,這使得模塊加載重複次數。所以爲一個變量賦一個名字,然後在其他文件中使用該變量,而不是再次命名它。

Example的論壇。

相關問題