Angular + Requirejs - Загрузка не в порядке

Я пытаюсь иметь угловые и jquery, загруженные с requirejs. Лучшее, что я могу сделать, это то, что в 50% случаев все правильно загружается, а другая половина получается ошибкой No Module: mainAppAngular + Requirejs - Загрузка не в порядке

Я предполагаю, что это прерывает половину времени, исходя из скорости, на которую requirejs асинхронно загружает скрипты ,

Когда он работает, я вижу тест Hello World (хотя я вижу {{text}} перед его заменой, но я читал, как это исправить здесь). В остальное время я получаю сообщение об ошибке и {{text}} просто остается на экране.

Github Repo

Tree:

index.html 
- js 
    - libs 
     require.js 
    - modules 
     mainApp.js 
    main.js

main.js

require.config({ 
    paths: { 
    'jQuery': '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min', 
    'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular', 
    }, 
    shim: { 
    'angular' : {'exports' : 'angular'}, 
    'jQuery': {'exports' : 'jQuery'} 
    } 
}); 

require(['jQuery', 'angular', 'modules/mainApp'] , function ($, angular, mainApp) { 
    $(function() { // using jQuery because it will run this even if DOM load already  happened 
    angular.bootstrap(document, ['mainApp']); 
    }); 
});

modules/mainApp.js

define(['angular'], function (angular) { 
    return angular.module('mainApp' , []).controller('MainCtrl', ['$scope', function ($scope) { 
     $scope.text = 'Hello World'; 
    }]); 
});

Relevant index.html

<head> 
    <script src="js/libs/require.js" data-main="js/main"></script> 
</head> 
<body> 
    <div ng-app="mainApp"> 
     <div ng-controller="MainCtrl"> 
      {{text}} 
     </div> 
    </div> 
</body>

источник

2013-11-12 Nick Brown

Вы можете использовать domReady (ОБНОВЛЕНО), чтобы убедиться, что DOM полностью загружен, то есть все файлы JS есть, перед тем развернув приложение.

requirejs.config({ 
    paths: { 
     jquery: '/path/to/jquery', 
     angular: 'path/to/angular', 
     domReady: '/path/tp/domReady' 
    }, shim: { 
     angular: { 
      exports: 'angular' 
     }, 
    } 
}); 
define(['jquery', 'angular', 'modules/mainApp'], 
    function($, angular, 'mainApp') { 
     // tell angular to wait until the DOM is ready 
     // before bootstrapping the application 
     require(['domReady'], function() { 
      angular.bootstrap(document, ['mainApp']); 
     }); 
});

См the RequireJS official documentation для получения дополнительной информации об этом Гоча:

Это возможно при использовании RequireJS для загрузки скриптов достаточно быстро , что они завершат до DOM готова. Любая работа, которая пытается подключиться к DOM , должна дождаться готовности DOM.

Этот трюк находится на this блоге.

EDIT Если вы следуете советам блога, используйте этот скрипт domReady вместо того, который я ранее размещал: https://github.com/requirejs/domReady/blob/master/domReady.js.

источник

2013-11-12 20:14:12

Кажется, не имеет никакого значения. Я даже попытался как можно точнее сопоставить синтаксис примера блога. Вот проект с рекомендованными вами изменениями: 'https: // github.com/nick-brown/broken-require/tree/domReady /' –

Обратите внимание, что согласно [официальной документации] (http://requirejs.org/ docs/api.html # pageload) вы не используете 'domready', как это; вы либо завершаете код в 'domready()' call, либо требуете его с помощью синтаксиса плагина, то есть '' domReady! ''. Не знаю, достаточно ли этого, чтобы исправить проблему OP. – kryger

@Nick Brown В блоге используется другой скрипт domReady, следовательно, различия в синтаксисе. Я написал этот пост, но забыл, какой скрипт использовался. Не используйте ту, которую предлагает официальная документация. Я отправил запрос на получение запроса. –

Добавить Jquery как зависимость углового в прокладке.

require.config({ 
     paths: { 
     'jQuery': '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min', 
     'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular', 
     }, 
     shim: { 
     'angular' : {'exports' : 'angular', deps: ['jQuery']}, 
     'jQuery': {'exports' : 'jQuery'} 
     } 
});

источник

2013-11-12 20:07:56 Rob

Ничего не изменил, к сожалению. –

Кажется, что нужно работать, когда вы добавляете https: // в ваш CDN Вам все равно нужно перезагрузить приложение. угловой.bootstrap (document, ["app"]); Но это должно заставить вас пройти проблему с загрузкой. – Rob

Странно, все еще не работает для меня, но я собираюсь попробовать, когда я вернусь домой и по другому соединению. –

Это может быть поздний ответ, но, как сказал Дастин Блейк, вы также можете использовать jQuery .ready() вместо того, чтобы включать в себя еще один модуль, такой как domReady.

requirejs.config({ 
    paths: { 
     jquery: '/path/to/jquery', 
     angular: 'path/to/angular' 
    }, shim: { 
     angular: { 
      exports: 'angular' 
     }, 
    } 
}); 

require(['jquery'], function($) { 
    $(document).ready(function(){ 
     // I like it this way instead of including 
     // everything in the parent function so it's easier to read 
     require(['angular', "modules/mainApp"], function(){ 
     angular.bootstrap(document, ['mainApp']); 
     }) 
    }) 
});

источник

2015-04-09 17:33:52 ginad

Angular + Requirejs - Загрузка не в порядке

ответ

Смежные вопросы