将 require js 与 angular js 一起使用答案

【问题标题】：Using require js with angular js将 require js 与 angular js 一起使用
【发布时间】：2016-02-28 19:38:50
【问题描述】：

我正在尝试同时使用 require js 和 angular js。通过谷歌搜索引用某人指南：

这两个指南似乎都使用了 angular，还有 angular-route 和 angular-amd，但我认为它们是为了其他复杂的目的，所以我只使用了“angular js”（所以 require.config 中没有 shim ))。

我的main.js 看起来像这样；

require.config({
    paths: {
        jquery      : 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min',
        'angular'   : 'https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min',
        'class'     : 'class',
        'utility'   : '../utility/utility',
    },

    deps: ['main1']
});

deps: ['main1'] 是在 require 被定义为第一个指南使用之后要加载的文件。

但我不断收到此错误：

Error: $injector:modulerr

（'UpdateApp' 是我在项目中使用的应用程序的名称。）

当我忘记将文件包含在定义的模块中时，网页说我收到错误。

虽然没有使用deps: ['main1']，但使用require(['angular'], function(){} 并注销angular.module('myApp',[]) 可以很好地记录对象。 ...似乎require(['angular'], function(angular) 不起作用，但require(['angular'], function() 对我有用，而且指南似乎没有告诉我应该做后者还是前者。

我认为这就像在 paths 中添加 angular js 并使用 require() 或 define() 加载一样简单，但它不是......

如何使用 Require JS 和 Angular JS 就像一起使用它们来打印“hello world”一样简单？

【问题讨论】：

@SatejS 哎呀。我不知道该页面包含该内容。我认为这是一个解释 $injector:modulerr 的简单错误页面。 UpdateApp 在我的问题中是 myApp。它只是我将在我的项目中使用的应用程序的名称。无论如何，如果我不使用 require JS，我的代码可以正常工作。

标签： javascript angularjs requirejs

【解决方案1】：

查看您的代码，我可以看到您显然误解了同时使用 requireJS 和 angular 的概念。您找到的任何一个链接都是由专家 JS 开发人员创建的。两者都试图尽可能简单地结合 angular 和 requireJS。所以你需要接受它很复杂的事实。

=> 这就是为什么我不会尝试帮助您编写一些代码的原因。因为这将花费大量时间，并且与许多主题相关，这些主题不太可能适合 stackoverflow 上的单个问题和答案。

如何使用 Require JS 和 Angular JS 就像一起使用它们来打印“hello world”一样简单？

起初我想重复一遍。这不像是简单的工作。对于requireJS，您至少需要对所谓的 AMD 有深入的了解，并且能够想象当requireJS 尝试加载 JS 库时事情是如何异步发生的。

其次，关于angular模块/服务注入的常识。由于 requireJS 和 angular 都可以进行某种模块/服务注入，因此您需要了解这两者之间的区别。

第三，你的 webapp 的初始阶段。因为 requireJS 和 angular 都需要初始化才能正常运行。所以这也是要求。

总结

一两天之内，您将无法同时理解这两者。需要花时间。但幸运的是，我有几个建议给你。

研究一些关于 requireJS 和 Angular 如何加载它们的依赖关系。
去angularAMD获取项目种子。设置、运行、使用。
提高您对两者初始状态的了解。
...
利润！

P.S. 仅供参考。一年前，我开始使用 requireJS 和 angular。就像你一样，我被一堵巨大的知识墙击中了。这些是我试图理解的。慢慢来，它不像使用jquery 可以在一两天内学会。即使对于一些 JS 专家来说，他们也花了几个月的时间才对 angular 充满信心（不包括将它与 requireJS 结合起来）。干杯！

【讨论】：

感谢您的 P.S. 我以为我是个笨蛋，因为我不了解 AngularJS 并将其与 requireJS 结合起来。你给了我很多鼓励。谢谢你。我想我要研究 angularAMD。

【解决方案2】：

在您的 main1.js 中，您必须使用 require(['angular'], function(){} 来启动您的应用程序。

【讨论】：

没试过，因为在这个link中，它使用define而不是require。
如果您定义了应用程序，它将不会执行该功能。您必须要求它才能执行。

【解决方案3】：

Require JS 将为您提供包依赖管理器、连接器/uglifier、javascript 文件加载器和注入器。 Require JS 注入器用于注入类，而 Angular 用于注入实例。

最大的优势是 RequireJS 将通过管理您的负载和运行时依赖项来加速您的应用程序。这对大型 SPA 很有用。

您可以通过使用“define”定义所有依赖项来设置文件结构。要执行函数，您需要使用“require”。

这是一个有用的视频：

https://www.youtube.com/watch?v=4yulGISBF8w&index=1&list=PLgVbnDyASc1qDAam3Fe0f-u6u9MYL6pC8

【讨论】：