Question

我在单独的文件中分离我的$ http拦截器和我的app配置时遇到问题。这就是我的尝试：

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;
            });
    };


})

如果我将authService.js的代码直接放在app.js源代码下，一切都很好，但如果我把它放在一个单独的文件中，我没有错误，但拦截器不起作用。

任何人都可以帮忙吗？

Answer 1

将authService.js放在app.js

下面像这样

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

如何在不同的文件中分离AngularJS应用程序和拦截器

1 个答案: