javascript - AngularJS 从文件夹加载 Controller

Question

我是 AngularJS 的新手，对如何从结构化文件夹加载 Controller 和其他 js 有疑问？

例如我有结构:

app/
-common
-users
--userController.js
--userService.js
-orders
-app.js

我应该如何从文件夹用户加载 Controller 和服务？

还有一个小问题:方形护腕是什么意思？

app.config(['someThing'], function($routeProvider)

Answer 1

您可以将代码放在您想要的位置。如果将它们放入 Angular 模块中， Angular 会找到它。所以如果你在 /app/common/services/foo.js 有服务喜欢:

angular.module('app').service('foo', function() { ... });

您可以在 userController 中执行此操作:

angular.module('app').controller('UserController', function($scope, foo) { ... });

在这里你可以看到我是如何注入(inject) foo 的在我们的 Controller 中。 Angular Dependency Injection系统足够智能，无论您将代码放在哪里都能找到您的代码。

您还可以创建不同于 app 的模块，你可以有:

angular.module('other').service('bar', function() { ... });

以及您定义 app 的位置模块，像这样:

angular.module('app', []);

您只需要将新模块作为依赖项添加到那里，这就是 [] 的内容。用于:

angular.module('app', ['other']);

现在您可以使用服务bar在你的 Controller 中也:)

另一方面，您所说的语法是数组表示法，如下所示:

angular.module('app').controller('FooCtrl', ['$scope', 'foo', function($scope, foo) { ... }]);

如果您在缩小代码时破坏了代码，则需要这样做，因为在缩小代码中，您可能会得到如下内容:

angular.module('app').controller('FooCtrl', ['$scope', 'foo', function(f, g) { ... }]);

如您所见，函数参数现在是 f和 g Angular 不知道根据这些名称注入(inject)什么，所以它会查看我们提供的字符串，所以它会知道 f是$scope和 g是foo .

不需要直接使用这个注释，有几个工具可以为你做到这一点，比如 ngmin .

干杯。

编辑:您需要将每个 javascript 文件添加到 <script> 中否则不会加载并且 Angular 也找不到它。

一个一个地添加文件很痛苦，因为你可以有 5 个，也可以有 200 个。

最好将它们连接起来，为此我建议:grunt-concat-sourcemap因为它会生成源映射，所以整个应用程序只有 1 个文件，但在开发工具中，您会在单独的文件中看到它们。

我建议您检查 linemanjs，它是开发 javascript 应用程序的好工具，它可以为您连接文件、源映射、缩小、数组符号等等...