如何加载页面间常见且动态的角模块?

I have a site that is developed by multiple developers that has multiple pages. Each "page" initializes angular by calling angular.module(etc).

我有一个网站是由多个开发人员开发的，有多个页面。每个“页面”通过调用角度模块(等)初始化角度。

My question is, all pages share some modules, and some pages use specific modules. What is the best practice to achieve this? Do I trust that developers will insert the correct modules that will be needed across the site (i.e. Google Analytics) or do I create one call that is shared my all pages that loads ALL the modules. And is there a way to do both? Such as, initilize the modules that are needed across all the pages and then, load specific modules dynamically on their respective pages.

我的问题是，所有页面都共享一些模块，有些页面使用特定的模块。实现这个目标的最佳实践是什么?我是否相信开发人员会在整个站点中插入所需的正确模块(例如谷歌Analytics)，或者我是否创建一个调用，该调用共享我的所有页面以加载所有模块。有办法同时做到这两点吗?例如，在所有页面中初始化所需的模块，然后在各自的页面上动态加载特定的模块。

4 个解决方案

#1

I would make one global module that is loaded by each individual app, much like modules like 'ngAnimate' are loaded... the global module could then initialize functionality common to all pages, such as Google analytics.

我会制作一个全局模块，每个单独的应用都会加载，就像载入ngAnimate(动画)之类的模块一样……然后全局模块可以初始化所有页面的通用功能，比如谷歌analytics。

This requires some policing on all developers involved, but this is a good practice via code reviews, etc.

这需要对涉及的所有开发人员进行一些管理，但是通过代码检查等方法，这是一个很好的实践。

example page:

示例页面:

angular.module('individualPage', [
    'globalModule',
    'customPageModule'
]).config(
    // etc
);

global module:

全球模块:

angular.module('globalModule', [
    'googleAnalytics'
]).config(
    // etc
);

#2

I have a site that is developed by multiple developers that has multiple pages. Each "page" initializes angular by calling angular.module(etc).

我有一个网站是由多个开发人员开发的，有多个页面。每个“页面”通过调用角度模块(等)初始化角度。

My question is:

我的问题是:

1. All pages share some modules, and some pages use specific modules. What is the best practice to achieve this?
2. 所有页面共享一些模块，有些页面使用特定的模块。达到这个目的的最佳实践是什么?

I do not know the best practice when dealing with multiple pages. IMHO, creating multiple pages is a BAD practice nowadays. I think of web applications(SPAs) that have different views and states not web sites with disjointed pages. So if you choose to go the SPA(single page application) way, you can load all you core/common modules before the application bootstraps. Views/pages that need specific modules can lazy load them using something like oclazyload.

我不知道处理多个页面时的最佳实践。现在，创建多个页面是一种不好的做法。我认为web应用程序(SPAs)具有不同的视图和状态，而不是具有不连贯页面的web站点。因此，如果您选择使用SPA(单页应用程序)方式，您可以在应用程序启动之前加载所有的核心/公共模块。需要特定模块的视图/页面可以使用像oclazyload这样的东西来延迟加载它们。

2. Do I trust that developers will insert the correct modules that will be needed across the site (i.e. Google Analytics) or do I create one call that is shared my all pages that loads ALL the modules.
3. 我是否相信开发人员会在整个站点中插入所需的正确模块(例如谷歌Analytics)，或者我是否创建一个调用，该调用共享我的所有页面以加载所有模块。

I can't say much about the question of trust as I do not know your developers well enough. In general, developers are never to be trusted, they will do anything that seems to work, high five themselves and call it a day. The idea is to "Trust but verify", you don't have to wire tap their phones or read their emails but never ever take your eyes off the main git or svn repository. Anywhere, If you were to use oclazyload as I suggested above for a SPA, you would only need to worry about dynamically loading 'view/page' specific modules which the developers can configure themselves.

关于信任问题，我不能说太多，因为我对您的开发人员不够了解。一般来说，开发人员是不值得信任的，他们会做任何看起来有用的事情，他们自己会高高兴兴地结束这一天。我们的想法是“信任但验证”，你不需要窃听他们的电话或阅读他们的邮件，但永远不要把你的目光从git或svn存储库上移开。在任何地方，如果您使用oclazyload(如上所述)作为SPA，您只需要考虑动态加载开发人员可以自己配置的“视图/页面”特定模块。

3. And is there a way to do both? Such as, initilize the modules that are needed across all the pages and then, load specific modules dynamically on their respective pages.
4. 有办法同时做到这两点吗?例如，在所有页面中初始化所需的模块，然后在各自的页面上动态加载特定的模块。

Yes, yes, there is ... SPA approach that I have already outlined above. I would also recommend using angular-ui-router for the states and views approach. The idea is to design your application whilst thinking of it as a desktop or mobile thick client that has state transitions and so forth.

是的，是的，有……我已经在上面概述过的SPA方法。我还建议在状态和视图方法中使用angular-ui-router。我们的想法是，在设计应用程序的同时，将其视为具有状态转换等功能的桌面或移动厚客户机。

#3

I have a site that is developed by multiple developers that has multiple pages.

我有一个网站是由多个开发人员开发的，有多个页面。

Each "page" initialises angular by calling angular.module(etc).

每个“页面”通过调用角度模块(等)初始化角度。

My question is, all pages share some modules, and some pages use specific modules.

我的问题是，所有的页面都共享一些模块，有些页面使用特定的模块。

What is the best practice to achieve this?

达到这个目的的最佳实践是什么?

Do I trust that developers will insert the correct modules that will be needed across the site (i.e. Google Analytics) or do I create one call that is shared my all pages that loads ALL the modules.

我是否相信开发人员会在整个站点中插入所需的正确模块(例如谷歌Analytics)，或者我是否创建一个调用，该调用共享我的所有页面以加载所有模块。

And is there a way to do both? Such as, initialise the modules that are needed across all the pages and then, load specific modules dynamically on their respective pages.

有办法同时做到这两点吗?例如，初始化所有页面需要的模块，然后在各自的页面上动态加载特定的模块。

---

I would start off by defining what a page is.

首先我要定义页面是什么。

Are you talking about a SPA or a more traditional setup a la client transitions between pages with a regular <a href="/page"> and the server serves the client a piece of HTML?

您是在讨论SPA还是更传统的设置，一个la客户端在页面之间的转换，使用常规的，服务器为客户端提供一段HTML?

If the latter is true, then I would urge you to reconsider your underlying approach to your Angular application.

如果后者是正确的，那么我将敦促您重新考虑您的角度应用程序的底层方法。

The best (or rather, preferred) way of doing things would be to serve the client a single piece of HTML, and then transition between pages (from now on I will refer to them as states), by using either ngRoute, angular router (2), or better yet - ui-router.

最好的(或者更确切地说，更好的)方法是为客户端提供一段HTML，然后在页面之间进行转换(从现在开始，我将把它们称为状态)，使用ngRoute、棱角路由器(2)或者更好的是ui-router。

---

For the remainder of my answer I am going to assume that you are in fact working with a SPA.

---

What is the best practice to achieve this?

达到这个目的的最佳实践是什么?

As it stands, I would go out on a limb and say that there is no best practice defined for the case you present. There are a ton of ways to do it, none of which have been officially recommended by the core development team / community standard as far as I'm concerned.

就目前的情况而言，我要说的是，对于你所提出的这个问题，没有任何最好的做法。有很多方法可以做到这一点，在我看来，核心开发团队/社区标准并没有正式推荐这些方法。

You could go with webpack-angularjs-lazyload, requirejs (angular-requirejs-seed), requirejs (angularAMD), SystemJS among others. Pick your poison of preference!

你可以使用webpack-angularjs-lazyload, requirejs (angular- requirejres -seed)， requirejs (angularAMD)， SystemJS等等。选择你喜欢的毒药!

Do I trust that developers will insert the correct modules that will be needed across the site (i.e. Google Analytics) or do I create one call that is shared my all pages that loads ALL the modules.

我是否相信开发人员会在整个站点中插入所需的正确模块(例如谷歌Analytics)，或者我是否创建一个调用，该调用共享我的所有页面以加载所有模块。

If code contained in an angular.module is required across the site, I would attach it to the main application module.

如果代码包含在角中。整个站点都需要模块，我将它附加到主应用程序模块。

Such as:

如:

/** Define core functionality that _is_ essential to the application running as expected **/
angular.module('core-module', [ 'route-definitions', 'http-interceptors', 'google-analytics' ]);

/** Inject the core functionality into a bundle module **/
angular.module('main-bundle-module', [ 'core-module' ]);

/** Bootstrap the bundle module as your application **/
angular.bootstrap(/* DOM element */, ['main-bundle-module']);

Now, whenever someone creates a new module for a specific state, they will need to inject said module into the main-bundle-module (barring lazy loaded modules). As such, the core functionality will always be supplied and available, in your case Google Analytics. In a sense, you just tore down the trust barrier.

现在，每当有人为一个特定的状态创建一个新模块时，他们都需要将这个模块注入到主绑定模块中(除了延迟加载的模块)。因此，核心功能将始终提供和可用，对于谷歌分析来说。在某种意义上，你只是打破了信任障碍。

---

Taking a step back, lets for a moment assume that you are not working with a SPA - and you are in fact re-initialising the angular application on each page transition (bad move). How would you ensure that the required functionality is always present?

后退一步，让我们暂时假设您没有使用SPA—实际上您正在重新初始化每个页面转换上的角化应用程序(错误的移动)。如何确保所需的功能始终存在?

Decorating the angular.module method.

Note: This is not officially supported, be wary of what you are doing. Also it defeats the purpose of modularisation in my opinion, but I'll showcase the way(s) of doing it.

注意:这不是官方支持的，要小心你正在做的事情。在我看来，它也违背了模块化的目的，但我将展示它的实现方式。

You could go two ways here I reckon:

我想你可以从两方面来考虑:

• Kill the execution of JS if the required module is not a part of the developers module definition.
  • "Bad cop."
  • “坏警察”。
  • This would catch the 'untrusted developer' in his/her tracks during development, so as to ensure they are following the project standard.
  • 这将在开发过程中捕获“不受信任的开发人员”，以确保他们遵循项目标准。
• 如果所需的模块不是开发人员模块定义的一部分，则终止JS的执行。“坏警察”。这将在开发过程中捕获“不受信任的开发人员”，以确保他们遵循项目标准。
• Assist the 'untrusted developer' by automating the task of requiring the module.
  • "Good cop." (well, sort of...)
  • “好警察”。(好吧,有点…)
  • This would ensure that the required module is always present, albeit in every module.
  • 这将确保所需的模块始终存在，尽管是在每个模块中。
• 通过自动化要求模块的任务来帮助“不受信任的开发人员”。“好警察”。(好吧,有点…)这将确保所需的模块始终存在，尽管是在每个模块中。

"Good Cop"

“好警察”

(function(angular) {

  // The always required module(s).
  var ALWAYS_REQUIRED = ['cs.core'];
  // Keep a reference to the original angular.module function.
  var originalFn      = angular.module;
  // Keep track of registered modules.
  var registered      = {};

  angular.module = function (name, dependencies, configFunction) {
    var loaded;

    // Ensure that we are always working with an array of dependencies.
    dependencies = dependencies || [];

    // If the module has not already been registered
    if (!registered[name]) {

      // Ensure that the required modules are available.
      ALWAYS_REQUIRED.forEach(function (required) {
        if (dependencies.indexOf(required) === -1) {
          dependencies.push(required);
        }
      });

      // Register the module and store it in the registered object for future reference.
      loaded = registered[name] = original(name, dependencies, configFunction);
    } else {
      // Do not re-register the module, simply load it as per 'angular.module('name_of_module')';
      loaded = original(name);
    }

    // Return the loaded module.
    return loaded;
  };

})(angular);

"Bad Cop"

“坏警察”

(function(angular) {

  var ALWAYS_REQUIRED = ['cs.core'];
  var originalFn      = angular.module;

  angular.module = function (name, dependencies, configFunction) {

    ALWAYS_REQUIRED.forEach(function (required) {
      if (dependencies.indexOf(required) === -1) {
        throw new Error('You need to add ' + required + ' to ' + name + '\'s module dependencies!');
      }
    });

    return originalFn(name, dependencies, configFunction);
  };

})(angular);

---

That's two ways of killing the trust issue, but in doing so we've introduced code that;

这是消除信任问题的两种方法，但是这样做我们引入了代码;

• Is not very pretty.
• 不是很漂亮。
• Is definitely not very well tested / battle proven.
• 绝对不是很好的测试/战斗证明。
• Kills modularisation to boot.
• 杀死了模块化的引导。

---

And is there a way to do both? Such as, initialise the modules that are needed across all the pages and then, load specific modules dynamically on their respective pages.

有办法同时做到这两点吗?例如，初始化所有页面需要的模块，然后在各自的页面上动态加载特定的模块。

I would say the best way to do so is to:

我想说最好的方法是:

1. Take the steps necessary to convert to a SPA.
2. 采取必要的步骤转化为水疗。
3. Write some documentation for all your developers so as to bring them up to speed on the requirements of the project.
4. 为您的所有开发人员编写一些文档，以便使他们了解项目的需求。
5. Create a standalone module containing the required core functionality and attach it to your ng-app/angular.bootstrap module.
6. 创建一个独立模块，包含所需的核心功能，并将其附加到您的ng-app/角度。引导模块。
7. Get ui-router, ui-router-extras and ocLazyLoad to allow for lazy loaded module/state/component definitions.
8. 获取ui-router、ui-router-extras和ocLazyLoad，以便允许延迟加载模块/状态/组件定义。
9. Have a look at some of the following links for inspiration/ideas on what fits your specific project:
   • ocLazyLoad-SystemJS-Router by @lookfirst
   • 由@lookfirst ocLazyLoad-SystemJS-Router
   • ng-jspm-seed#futureStateConfig by @kasperlewau
   • ng-jspm-seed # futureStateConfig @kasperlewau
   • ocLazyLoad#with-your-router
   • ocLazyLoad # with-your-router
   • ocLazyLoad+requirejs plunker
   • ocLazyLoad + requirejs砰砰作响
   • webpack vs browserify @*
   • webpack vs browserify @*
   • angular + webpack slides
   • 角+ webpack幻灯片
10. 看看下面的一些链接，寻找适合您特定项目的灵感和想法:ocLazyLoad- systemjs -router，由@lookfirst ng-jsp -seed#futureStateConfig，由@kasperlewau ocLazyLoad @ -your-router ocLazyLoad+ requirejesrejs plunker webpack, vs . browserify @*

---

tl;dr

• Convert to a SPA.
• 转换为一个温泉浴场。
• Bootstrap the application with core functionality supplied.
• 使用提供的核心功能引导应用程序。
• Write some documentation for untrusted developers.
  • Better yet, build trust. :)
  • 更好的是,建立信任。:)
• 为不可信的开发人员编写一些文档。更好的是,建立信任。:)
• Lazy load state-specific modules when needed.
• 当需要时，延迟加载特定于状态的模块。

#4

You can try browserify to load and build your javascript in single file. With this you can easy minify the javascript code, and also you can load nodejs modules like events and more, but this is not your question about.

您可以尝试使用browserify在单个文件中加载和构建javascript。有了它，您可以轻松地简化javascript代码，还可以加载nodejs模块，如事件等，但这不是您的问题。