Question

我创建了一个支持拖放元素的角度Web应用程序。

我完成了它，但我有一个大模块。该模块放在一个带有数千个代码行的js文件中。

我想知道如何将我的大模块分成几个相互通信的js文件中的几个模块。

愿有人给我提供简单的例子我该怎么做？

Answer 1

我想知道如何将我的大模块分成几个相互通信的js文件中的几个模块。

当然，您可以使用多个模块并将其绑定，如下例所示：

var firstModule = angular.module('firstModule', []);
var secondModule = angular.module('secondModule', ['firstModule']);

现在，在firstModule中可以看到secondModule中创建的所有服务/指令。

但在创建两个模块之前，您应该问问自己：

<强> 1。两个模块

如果您的项目具有不同的依赖关系部分，我知道多个模块是很好的方法。

例如，当其他模块为空时，一个模块使用ui.bootstrap，例如：

var firstModule = angular.module('firstModule', []);
var secondModule = angular.module('secondModule', ['ui.bootstrap','firstModule']);

<强> 2。两个控制器

多控制器方法可以分割业务逻辑并使代码更清晰

第3。两个js文件中的一个控制器

您希望以这种方式实现（因为我们不了解您的项目目标）

例如：

<强> controllers.js

var app = angular.module('myApp', []);

app.controller('someCtrl', function($scope) {

     // call other js file:
     otherFile($scope);

    /*....*/
});
app.$inject = ['$scope'];

<强> someotherfile.js

var otherFile = function($scope) {
/*...*/
});

Answer 2

我认为您应该关注the official Angular tutorial以了解依赖注入和AngularJS中可用的各种类型的组件。这将为您提供如何将代码库分成多个层的概述。

一小组最佳实践：

服务 - 用于在一个地方保持业务逻辑和与API /其他系统的通信
指令 - 用于保留直接修改DOM元素的代码
控制器 - 视图（HTML - DOM）和服务之间的桥梁
模块 - 可以将更大的功能集封装在模块中，这有助于重用更大的组件

在AngularJs中查看this site有关正确搭建脚手架的详细信息。

Angular js分离到不同js文件中的不同模块

2 个答案: