Блог

Я использую requirejs с angularjs, и у меня возникает какая-то проблема с гонками, когда страница будет отлично загружаться примерно 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 из области загрузки приложения, ошибка исчезнет. Однако, если я оставлю это там, ошибка возникает в коде angular.boostrap. Я думаю, это можно было бы исправить, если бы я мог переместить загрузку компонентов MyApp2, myApp3 вниз, чтобы быть после начальной загрузки. Вместе с конфигурацией. Возможно ли это? Имейте в виду, что мне все еще нужно вернуть приложение, чтобы другие модули requirejs могли его использовать.

Я исправил эту проблему, добавив оператор require вокруг начальной загрузки, который требует, чтобы все компоненты, которые необходимо загрузить до начальной загрузки. На случай, если это кому-нибудь поможет при использовании RequireJS с Angular.

 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;
});