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

I created an angular web application that enables drag and drop elements.

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

I finish building it, but i have one big module. The module is placed in one js file with thousand of code lines.

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

I would like to know how can i separate my big modules to several modules in several js files that communicate with each other.

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

May someone provide me simple example how can i do it?

有人可以提供我简单的例子我该怎么做?

2 个解决方案

#1

I would like to know how can i separate my big modules to several modules in several js files that communicate with each other.

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

Sure you can use several modules and bind them like in following example:

当然你可以使用几个模块并绑定它们,如下例所示:

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

Now all services/directives created in firstModule are visible in secondModule.

现在,在firstModule中创建的所有服务/指令都在secondModule中可见。

But before you create two modules you should ask yourself:

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

1. two modules

1.两个模块

Multiple modules as I know is good way if your project has different sections with different dependencies.

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

For example one module uses ui.bootstrap when other is empty, like:

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

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

2. two controllers

2.两个控制器

The multiple controller approach is good to split business logic and make code clearer

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

3. one controller in two js files

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

You would want to implement this way (since we don't know your project goals)

您可能希望以这种方式实现(因为我们不知道您的项目目标)

For example:

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) {
/*...*/
});

#2

I think you should follow the official Angular tutorial to learn about the dependency injection and various types of components available in AngularJS. That will give you a good overview of how to split your code base into several layers.

我认为你应该遵循官方的Angular教程来了解AngularJS中可用的依赖注入和各种类型的组件。这将为您提供如何将代码库分成多个层的概述。

A small set of best practices:

一小组最佳实践:

Services - are used to keep the business logic and communication with APIs/other systems in one place

服务 - 用于在一个地方保持业务逻辑和与API /其他系统的通信

Directives - are used to keep the code which modifies the DOM elements directly

指令 - 用于保存直接修改DOM元素的代码

Controllers - a bridge between the view (HTML - DOM) and services

控制器 - 视图(HTML-DOM)和服务之间的桥梁

Modules - larger sets of features can be encapsulated in module, which helps to reuse larger components

模块 - 可以将更大的功能集封装在模块中,这有助于重用更大的组件

Have a look this site with details about proper scaffolding in AngularJs.

看一下这个网站,其中包含AngularJs中正确搭建脚手架的详细信息。

#1