RequireJS正在加载angular应用程序，但没有't创建app.controller

RequireJS is loading angular app, but doesn't create app.controller

本文关键字：创建 controller app 加载 angular 应用程序 RequireJS      更新时间：2023-09-26

我已经设置了一个非常基本的环境，用于使用RequireJS加载AngularJS组件（由Bower管理）。我的index.html非常基础：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular Resource Test</title>
</head>
<body>
    <div ng-controller="MyCtrl">
        <ul>
            <!-- this template is not populated -->
            <li ng-repeat="item in items">{{item}}</li>
        </ul>
    </div>
    <script type="text/javascript" src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
</body>
</html>

我的RequireJS都在main.js中，看起来像这样：

requirejs.config({
    baseUrl: 'bower_components',
    paths: {
        'angular': '../bower_components/angular/angular',
        'angular-resource': '../bower_components/angular-resource/angular-resource'
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'angular-resource': {
            deps: ['angular'],
        }
    },
});
define("app", ["angular", "angular-resource"], function(angular) {
    var app = angular.module('MyApp', ['ngResource']);
    return app;
});
require(["app"], function(app) {
    console.log(app); // this works
    app.controller("MyCtrl", ['$scope', '$resource',
        function($scope, $resource) {
            console.log("hello"); // this doesn't work
            $scope.items = [1, 3, 4, 5];
        }
    ]);
});

似乎所有依赖项都已解析并加载，Angular应用程序正在实例化。但是，我无法注册Angular控制器。回调函数中的console.log()语句没有执行，所以控制器创建似乎完全失败了？

/编辑：

将ng-app指令添加到<body>会产生以下错误：

未捕获错误：[$injector:moduler]未能实例化模块MyApp，原因是：错误：[$injector:nomod]模块"MyApp"不可用！您拼错了模块名称或忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

你可以在GitHub上找到完整的项目，如果这能让它更清晰的话。

在您的代码中有一些事情应该/可能会被更正。

  • 缺少angular.bootstrap(document, ['MyApp']);。因为当您使用requireJS时，angular.bootstrap()是一种需要。加载脚本时，要求先获取init，而不是angular获取init。这会导致你的应用程序崩溃。为了使其工作，您需要等待require init=>，然后它将加载angular up并初始化angular=>。完成所有操作后，引导您的应用程序
  • define()应该包装模块/文件的所有代码
  • require()用于调用模块/文件
  • 要求使用JS将模块分离成文件。因此，如果你能很好地配置它，它将更容易管理，并可能改善应用程序的加载时间。通过在文件中放入许多模块。你破坏了requireJS的使用目的。（例如，我已经构建了一个应用程序，它的代码、插件和html总量约为3MB。但在第一次加载页面时，它只有400kb，很酷，呵呵？）

您可以尝试以下内容：

requirejs.config({
    baseUrl: 'bower_components',
    paths: {
        'angular': '../bower_components/angular/angular',
        'angular-resource': '../bower_components/angular-resource/angular-resource',
        'app' : '../scripts/app' // 'app' is the module name. It got defined by define() block, and  can be loaded by either require() or define() block
    },
    shim: {
        'angular': {
            exports: 'angular'
        },
        'angular-resource': {
            deps: ['angular'],
        }
    },
});

require(["app"], function(app) {
    console.log(app);
    app.controller("MyCtrl", ['$scope', '$resource',
        function($scope, $resource) {
            console.log("hello"); // this doesn't work
            $scope.items = [1, 3, 4, 5];
        }
    ]);
    angular.bootstrap(document, ['MyApp']);
});

以及在您的app.js 中

define(["angular", "angular-resource"], function(angular) {
    var app = angular.module('MyApp', ['ngResource']);
    return app;
});

您已经加载了angular，但尚未引导它由于您是动态加载脚本的，因此使用ng-app属性不是一个选项所以你需要打电话给

angular.bootstrap(document.body, ['app']);

参见https://docs.angularjs.org/api/ng/function/angular.bootstrap

相关文章：