如何在不同的文件中分開angularjs應用程序和攔截器

我有一個單獨的文件中分隔$ http攔截器和我的應用程序配置的問題。這是我曾嘗試：如何在不同的文件中分開angularjs應用程序和攔截器

app.js

angular 
.module('myApp', [ 
    'oc.lazyLoad', 
    'ui.router', 
    'ui.bootstrap', 
    'angular-loading-bar', 
]) 
.config(['$stateProvider', '$urlRouterProvider', '$ocLazyLoadProvider', function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) { 

    $ocLazyLoadProvider.config({ 
     debug: false, 
     events: true, 
    }); 

    $urlRouterProvider.otherwise('/page/home'); 

    $stateProvider 
     .state('page', { 
      url: '/page', 
      templateUrl: '../views/pages/main.html', 
      resolve: { 
       loadMyDirectives: function ($ocLazyLoad) { 
        return $ocLazyLoad.load(
         { 
          name: 'myApp', 
          files: [ 
           'scripts/directives/header/header.js', 
           'scripts/directives/header/header-notification/header-notification.js', 
           'scripts/directives/sidebar/sidebar.js', 
           'scripts/directives/sidebar/sidebar-search/sidebar-search.js' 
          ] 
         }) 
         , 
         $ocLazyLoad.load(
          { 
           name: 'ngResource', 
           files: ['bower_components/angular-resource/angular-resource.js'] 
          }), 
         $ocLazyLoad.load(
          { 
           name: 'angular-storage', 
           files: ['bower_components/a0-angular-storage/dist/angular-storage.min.js'] 
          }) , 
         $ocLazyLoad.load(
          { 
           name: 'sjcl', 
           files: ['bower_components/sjcl/sjcl.js'] 
          }) 
       } 
      } 
     }) 
     .state('page.home', { 
      url: '/home', 
      controller: 'MainCtrl', 
      templateUrl: '../views/pages/home.html', 
      resolve: { 
       loadMyFiles: function ($ocLazyLoad) { 
        return $ocLazyLoad.load({ 
         name: 'myApp', 
         files: [ 
          'scripts/controllers/main.js' 
         ] 
        }) 
       } 
      } 
     }) 
     .state('login', { 
      templateUrl: 'views/pages/login.html', 
      url: '/login', 
      resolve: { 
       loadMyFile: function ($ocLazyLoad) { 

        return $ocLazyLoad.load({ 
         name: 'myApp', 
         files: [ 
          'bower_components/a0-angular-storage/dist/angular-storage.min.js', 
          'scripts/service/userService.js', 
          'scripts/service/authService.js' 
         ] 
        }), 

         $ocLazyLoad.load(
          { 
           name: 'sjcl', 
           files: ['bower_components/sjcl/sjcl.js'] 
          }), 
         $ocLazyLoad.load(
          { 
           name: 'myApp', 
           files: ['scripts/controllers/login/login.js'] 
          }) 
       } 
      } 
     }) 
     .state('page.addMoneyFlow', { 
      templateUrl: 'views/pages/add.html', 
      url: '/addMoneyFlow' 
     }) 
     .state('page.reports', { 
      templateUrl: 'views/pages/reports.html', 
      url: '/reports' 
     }) 

}])

authService.js

angular.module('myApp') 
.service('AuthInterceptor', function($rootScope) { 
    var service = this; 

    service.request = function(config) { 
     alert('test') 
     //config.headers.authorization = "sdjkghsdlfkjghfldkjghsfdkljghdslkjghsdfkjghsdflkjghk"; 

     return config; 
    }; 

    service.responseError = function(response) { 
     if (response.status === 401) { 
      $rootScope.$broadcast('unauthorized'); 
     } 
     return response; 
    }; 
}).config(['$httpProvider', function ($httpProvider) { 
    $httpProvider.interceptors.push('AuthInterceptor'); 
}])

login.js

angular.module('myApp') 
.controller('LoginController', function ($scope, $http, UserService) { 

    var login = $scope; 

    login.email = ""; 
    login.password = ""; 

    login.login = function() { 
     $http.get("http://www.w3schools.com/angular/customers.php") 
      .success(function (response) { 
       $scope.names = response.records; 
      }); 
    }; 


})

我f我把authService.js的代碼直接放在app.js源代碼下，一切都很好，但是如果我把它放在一個單獨的文件中，我不會遇到任何錯誤，但是intercepror無法工作。

任何人都可以幫忙嗎？

來源

2015-09-05 Dennis G.

和你的新腳本添加到您「的index.html」或類似的？ –

不，我在$ stateProvider中使用$ ocLazyLoad.load來加載它。這不好嗎？ –

把你authService.js下面app.js

這樣

<script src="app.js"></script> 
<script src="authService.js"></script>

來源

2015-09-05 15:08:05

好吧，似乎在這一點延遲加載服務不起作用。謝謝！ –

如何在不同的文件中分開angularjs應用程序和攔截器

回答

相關問題