Question

我正在使用requirejs和angularJS来构建一个简单的应用程序，但是我每次都会遇到这个错误，我已经尝试从js引导角度（仍然在代码上看到），更改deps，需要角度在app上.js，但都没有用。有人能帮助我吗？

main.js

requirejs.config({
    paths: {
        jquery: './lib/jquery/jquery.min',
        angular: './lib/angular/angular',
        bootstrap: './lib/bootstrap/dist/js/bootstrap.min',
        app: './app/app',
        custom: './lib/custom/custom'
    },
    shim: {
        'angular': {
            'exports': 'angular'
        },
        'jquery': {
            'exports': 'jquery'
        },
        'bootstrap': {
            deps: ['jquery']
        },
        'app': {
            deps: ['angular']
        },
        'custom': {
            deps: ['jquery']
        }
    }
});

define(['require', 'jquery', 'angular', 'bootstrap', 'app', 'custom'],
    require(['require', 'jquery'], function (require, $) {
    $(document).ready(function () {
        require(
                ['angular', 'app', 'custom', 'bootstrap']
            , function (angular, document) {
                angular.bootstrap(document, ['helloWorld']);
            });
    });
}));

app.js

angular.module("helloWorld", []);
angular.module("helloWorld").controller("helloWorldCtrl", function ($scope) {
        $scope.message = "Hello World!";
});

的index.html

<html ng-app="helloWorld">
<head>
    <title>Hello World</title>
    <script data-main="main" src="lib/requirejs/require.js"></script>
</head>
<body>
    <div ng-controller="helloWorldCtrl">
        {{message}}
    </div>
</body>
</html>

错误讯息：

Error: [$injector:modulerr] Failed to instantiate module helloWorld due to:
[$injector:nomod] Module 'helloWorld' 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.
http://errors.angularjs.org/1.5.7/$injector/nomod?p0=helloWorld
minErr/<@http://localhost:8000/lib/angular/angular.js:68:12
module/<@http://localhost:8000/lib/angular/angular.js:2075:17
ensure@http://localhost:8000/lib/angular/angular.js:1999:38
module@http://localhost:8000/lib/angular/angular.js:2073:14
loadModules/<@http://localhost:8000/lib/angular/angular.js:4608:22
forEach@http://localhost:8000/lib/angular/angular.js:321:11
loadModules@http://localhost:8000/lib/angular/angular.js:4592:5
createInjector@http://localhost:8000/lib/angular/angular.js:4514:19
bootstrap/doBootstrap@http://localhost:8000/lib/angular/angular.js:1751:20
bootstrap@http://localhost:8000/lib/angular/angular.js:1772:12
angularInit@http://localhost:8000/lib/angular/angular.js:1657:5
@http://localhost:8000/lib/angular/angular.js:31468:5
b.Callbacks/c@http://localhost:8000/lib/jquery/jquery.min.js:3:7852
b.Callbacks/p.add@http://localhost:8000/lib/jquery/jquery.min.js:3:8167
b.prototype.ready@http://localhost:8000/lib/jquery/jquery.min.js:3:2054
@http://localhost:8000/lib/angular/angular.js:31467:3
@http://localhost:8000/lib/angular/angular.js:6:2

http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=helloWorld&p1=%5B%24injector%3Anomod%5D%20Module%20'helloWorld'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.5.7%2F%24injector%2Fnomod%3Fp0%3DhelloWorld%0AminErr%2F%3C%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A68%3A12%0Amodule%2F%3C%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A2075%3A17%0Aensure%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A1999%3A38%0Amodule%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A2073%3A14%0AloadModules%2F%3C%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A4608%3A22%0AforEach%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A321%3A11%0AloadModules%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A4592%3A5%0AcreateInjector%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A4514%3A19%0Abootstrap%2FdoBootstrap%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A1751%3A20%0Abootstrap%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A1772%3A12%0AangularInit%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A1657%3A5%0A%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A31468%3A5%0Ab.Callbacks%2Fc%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fjquery%2Fjquery.min.js%3A3%3A7852%0Ab.Callbacks%2Fp.add%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fjquery%2Fjquery.min.js%3A3%3A8167%0Ab.prototype.ready%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fjquery%2Fjquery.min.js%3A3%3A2054%0A%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A31467%3A3%0A%40http%3A%2F%2Flocalhost%3A8000%2Flib%2Fangular%2Fangular.js%3A6%3A2%0A

Answer 1

问题是，在引导helloWorld模块之前，您必须确保它已创建并可用。似乎当应用程序被引导时，helloWorld模块不可用。

请尝试以下代码：

main.js

    requirejs.config({
    paths: {
        jquery: './lib/jquery/jquery.min',
        angular: './lib/angular/angular',
        bootstrap: './lib/bootstrap/dist/js/bootstrap.min',
        app: './app/app',
        custom: './lib/custom/custom'
    },
    shim: {
        'angular': {
            'exports': 'angular'
        },
        'jquery': {
            'exports': 'jquery'
        },
        'bootstrap': {
            deps: ['jquery']
        },
        'app': {
            deps: ['angular']
        },
        'custom': {
            deps: ['jquery']
        }
    }
});

require(['app'], function (app) {
});

app.js

define(['angular'], function (angular) {
  'use strict';

  angular.module('helloWorld', [])
  .controller("helloWorldCtrl", function ($scope) {
      $scope.message = "Hello World!";
  });

  angular.bootstrap(document, ['helloWorld']);
});

的index.html

<html >
<head>
    <title>Hello World</title>
    <script data-main="main" src="lib/requirejs/require.js"></script>
</head>
<body >
    <div ng-controller="helloWorldCtrl">
        {{message}}
    </div>
</body>
</html>

它应该有用！

RequireJS + Angular Error：[$ injector：modulerr]无法实例化模块helloWorld

1 个答案:

main.js

app.js

的index.html