使用带有Angular的RequireJS会抛出异常

时间:2016-03-18 21:30:33

标签: javascript angularjs module requirejs frontend

我使用RequireJS加载AngularJS控制器来提供我的前端html。 但是,即使加载了所有必需的库,它也会抛出异常:

[$injector:modulerr] Failed to instantiate module metaapp due to: Error: [$injector:nomod] Module 'metaapp' is not available!

有人能指出我的方式吗?

这是我的目录结构:

Directory Structure

metacontroller.js:

/*global define*/
'use strict';

define(['angular'], function(angular){
  return ['$scope', function($scope){
    $scope.test = "haha";
  }
  ];
});

的index.html

<!doctype html>
<html lang="en" data-framework="angularjs">
  <head>

  </head>
  <body ng-app="metaapp" ng-controller="MetaController">
    {{test}}
    <script data-main="js/main" src="js/lib/require.js"></script>
  </body> 
</html>

app.js

/*global require*/
'use strict';

require([
    'angular'
], function (angular) {
    require([
      'app/UserMeta/metacontroller',
      'app/UserMeta/metaservice'

    ], function (metaCtrl, metaSrv) {
      var app = angular.module('metaapp', []);
      app.controller('MetaController', metaCtrl);
    }); 
});

main.js

/*global require*/
'use strict';


require.config({
    paths: {
        angular: 'lib/angular'
    },
    shim: {
        angular: {
            exports: 'angular'
        }
    },
    deps: ['app']
});

network in console

-------------第一次更新----------------- 更新控制器 - 用$ scope替换范围。

-------------第二次更新---------------- 在app.js中,删除依赖项注入。但仍然没有工作......

错误:

angular.js:63 Uncaught Error: [$injector:modulerr] Failed to instantiate module metaapp due to: Error: [$injector:nomod] Module 'metaapp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument

----------------------更新3 -------------------- 好的,我明白了...... 我错过了这行代码:angular.bootstrap(document, ['metaapp']);现在它正在运行,因为我可以在html页面上看到haha解释。 但是我还能看到错误,有什么想法吗?

1 个答案:

答案 0 :(得分:0)

不确定两个嵌套模块的行为方式。 它们可以合并为一个吗?

/*global require*/
'use strict';

require([
  'angular',
  'app/UserMeta/metacontroller',
  'app/UserMeta/metaservice'

], function (angular, metaCtrl, metaSrv) {
  var app = angular.module('metaapp', [metaCtrl, metaSrv]);
  app.controller('MetaController', metaCtrl);
});