requirejs 和 angularjs 1.5 注入 ui.router 组件失败

Question

使用推荐的组件加载方法时出现此错误 (See step 3)

  Error: Module name "angular-ui-router" has not been loaded yet for context: _. Use require([])

应用模块定义：

<script>
  var adminApp = angular.module('adminClientApp', [require('angular-ui-router'), 'ngMaterial', 'ngResource', 'ngMessages', 'ngMdIcons']);
</script>

根据文档，不需要包含脚本标签 - 它将通过 requirejs 加载

Requirejs main.js 定义：

  require.config({
    paths:{
        'angular-ui-router': 'vendor/angular-ui-router/release/'
    },
    shim:{
       'angular': {
          exports: 'angular'
     }
   }
  });

应用布局：

  -- root
     index.html
     main.js
     -- js
         -- app (angular files here)
            app.js
     -- vendor (3rd party libs)

需要 index.html 中的 main.js 设置

  <script data-main="main.js" src="vendor/requirejs/require.js"></script>  

Answer 1

您使用的指南不是为 RequireJS 制作的。在那里应用说明后，您正在执行以下操作：

<script>
  var myApp = angular.module('myApp', [require('angular-ui-router')]);
</script>

这通常无法与 RequireJS 一起使用，因为使用单个字符串调用 require 会失败除非模块已经加载。只有在 define 内时，才能保证此调用有效，如下所示：

define(function (require) {
  var myApp = angular.module('myApp', [require('angular-ui-router')]);
});

此代码是一个模块，应位于单独的.js 文件中并使用require(['module name']) 加载。 （请注意，参数是一个字符串数组。这是require 的另一种形式，而不是采用单个字符串参数的形式。）

您应该使用Component，这是您正在使用的指南的作者在他/她编写指南时使用的，或与之等效的工具。否则，您需要将代码转换为使用 RequireJS。