Question

我正在尝试将我的控制器和服务（以前都在我的app.js文件中）分离成单独的js文件。但是我从我的一个独立服务的第一行得到Uncaught TypeError: undefined is not a function（authInterceptorService如下所示）。

以下是我app.js的模块代码：

var app = angular.module('AngularAuthApp', [
    'ngRoute',
    'LocalStorageModule',
    'angular-loading-bar'
]);

//some app.constants

这是我在单独的authInterceptorService.js文件中的服务（Uncaught TypeError发生在第一行：

app.factory('authInterceptorService', [
    '$q',
    '$injector',
    '$location',
    'localStorageService',
    function ($q, $injector, $location, localStorageService) {

//more code

        return authInterceptorServiceFactory;
    }
]);

我错过了一段正确的语法吗？我以为我遵循了this stack post中提供的示例。我也在我的html中引用这些单独的js文件。如果我在控制器或模块设置中遗漏了某些内容，或者我应该采取其他方式，请告诉我。

非常感谢你的时间。如果您需要其他信息或我不清楚，请告诉我。

Answer 1

将authInterceptorService放入app.js依赖项中。

所以：

var app = angular.module('AngularAuthApp', ['ngRoute', 'LocalStorageModule', 'authInterceptorService', 'angular-loading-bar']);

Answer 2

自： http://briantford.com/blog/huuuuuge-angular-apps

模块

在“app.js”中定义和配置所有模块：这意味着authInterceptorService

angular.module('yourAppName', ['yourAppDep']);
angular.module('yourAppDep');

在模块上定义控制器，服务等，如下所示：

angular.module('yourAppDep').controller('MyCtrl', function () {
  // ...
});

尽管我们（AngularJS团队）已经讨论过能够以模块粒度进行延迟加载，但它还没有出现在下一版Angular的路线图中。关于使用多个顶级AngularJS应用程序产生类似延迟加载效果的Google+上有一个很好的讨论。我没有尝试或看过它，但如果你迫切需要减少有效载荷大小，那肯定是一种方法。唯一剩下的问题是如何将控制器，指令，服务和过滤器细分为模块。 Angular Seed将过滤器，服务和指令放入单独的模块中，但这对我来说似乎有些愚蠢。根据应用程序的不同，我更倾向于按页面/路线组织模块。从性能角度来看，组织模块的方式并不重要，因此请选择最适合您项目的方法。

Answer 3

而不是使用全局app为什么不这样做呢？

angular.module('AngularAuthApp', [
    'ngRoute',
    'LocalStorageModule',
    'angular-loading-bar'
]);

然后这应该适用于您的服务：

angular
.module('AngularAuthApp')
.factory('authInterceptorService', [
    '$q',
    '$injector',
    '$location',
    'localStorageService',
    function ($q, $injector, $location, localStorageService) {

//more code

        return authInterceptorServiceFactory;
    }
]);

＆＃39; Uncaught TypeError：undefined不是函数＆＃39;将控制器/服务放在单独的js文件中时

3 个答案: