保持 angularjs 与应用程序分离

Question

我正在计划一个理想情况下我想与 Angular 保持分离的应用程序，因此所有 dom 交互都将进入 Angular 层，但核心业务逻辑将保存在完全不知道 Angular 的独立应用程序中。两者将通过 Angular 能够向核心应用程序发送消息的服务进行通信。

独立应用很可能会使用 requirejs 来处理依赖项注入。

我不确定的是如何获得一个可以这样声明的模块：

define('AppInteractor', ['require'], function(requre){
    // Set up interactor functionality
});

进入 Angular 服务。

我的第一个想法是使用这样的适配器：

define(['AppInteractor', 'angular'], function(interactor, angular) {
    var app = angular.module('appInteractor', []).service('AppInteractor', interactor);
});

这会在 angular 模块中将 AppInteractor 注册为服务，这种方法的问题似乎是因为 requirejs 异步加载东西，所以当 angular代码运行。它似乎也以 angular 加载两次而告终，这大概也无济于事。

我看过几篇文章介绍了通过 require 加载所有 Angular 组件，但我希望有更简单的方法来完成这项工作。

任何人都可以推荐我如何完成这项工作吗？

Answer 1

如果你打算在主要模块初始化后添加服务，我建议你将它添加到你的应用程序模块

define(['AppInteractor', 'angular'], function(interactor, angular) {
  // There is no second parameter, because we are getting an existing
  // module, not creating a new one.
  var app = angular.module('appModule');
  app.service('AppInteractor', interactor);
});

否则，如果您想将所有其他逻辑分组到不同的模块中，则需要导入该模块并将其添加为应用程序模块的要求。

define(['AppInteractorModule', 'angular'], function(interactorModule, angular) {
  var app = angular.module('appModule', [interactorModule.name]);
});

我也推荐大家使用ES6（6to5，traceur），browserify或者Typescript之类的工具进行模块管理，然后编译成AMD。我发现开发起来更容易、更干净。

保持 angularjs 与应用程序分离

Keeping angularjs decoupled from an application

javascript

requirejs

angularjs