如何修复AngularJS与RequireJS的竞速问题

How to fix AngularJS with RequireJS racing issue

本文关键字：问题 RequireJS 何修复 AngularJS      更新时间：2023-09-26

我在angularjs中使用requires，我遇到了一些赛车问题，页面将加载大约9/10次，但会抛出一个未定义的对象。下面是有问题的代码。

define("app", ["angular", "angular-resource", "angular-route", "components/app/app-ctrl"], function (angular) {  
    var app = angular.module("app", [
        "ngResource", 
        "ngRoute", 
        "app.myApp2",
        "app.myApp3"
    ]).config(["$routeProvider", function ($routeProvider) {
        $routeProvider.when("/", {
            controller: "appCtrl2", 
            templateUrl: "/app/partials/first.html"
        }).when("/dashboard", {
            controller: "appCtrl3", 
            templateUrl: "/app/partials/second.html"
        }).
        otherwise({redirectTo: '/'});
    }]);
    angular.element().ready(function() {
        angular.bootstrap(document, ["app"]);
    });
    return app;
});

现在我知道，如果我把myApp2, myApp3模块的应用程序的加载区域比错误消失。但是如果我把它留在那里，误差就会出现在角度上。boostrap代码。我认为这可以是固定的，如果我可以移动myApp2, myApp3组件的加载到引导后。连同配置。这可能吗?请记住，我仍然需要返回应用程序，以便其他需求模块可以使用它。

我通过在bootstrap周围添加require语句来修复此问题，该语句要求在初始bootstrap之前加载所有需要的组件。如果这对在Angular中使用RequireJS有帮助的话。

define("app", ["angular", "require", "angular-resource", "angular-route", "components/app/app-ctrl"], function (angular, require) {  
    var app = angular.module("app", [
        "ngResource", 
        "ngRoute", 
        "app.myApp2",
        "app.myApp3"
    ]).config(["$routeProvider", function ($routeProvider) {
        $routeProvider.when("/", {
            controller: "appCtrl2", 
            templateUrl: "/app/partials/first.html"
        }).when("/dashboard", {
            controller: "appCtrl3", 
            templateUrl: "/app/partials/second.html"
        }).
        otherwise({redirectTo: '/'});
    }]);
    angular.element().ready(function() {
        require(["myApp2", "myApp3"], function() {
            angular.bootstrap(document, ["app"]);
        });
    });
    return app;
});
相关文章：