В коде HTML (head) имеется следующий набор скриптов (ну, не только скриптов, также CSS):
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel='stylesheet' href='style.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.27/angular.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.27/angular-animate.js"></script>
<script src="script.js"></script>
пытаюсь повесить загрузку всего этого зоопарка на require.js
добавил в head, самым первым, скрипт
<script data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.js"></script>
соответственно, создаю файл main.js, и там пишу:
requirejs.config({
baseUrl:"",
paths: {
"jquery":"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js",
"bootstrap":"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
(...ну и так далее все описываю все скрипты)
}
});
define(["jquery"], function() {
});
define(["bootstrap"], function() {
});
и т.д.
получаю ошибку
Error: Script error for "jquery", needed by: main
http://requirejs.org/docs/errors.html#scripterror
UPD
правильный main.js принял следующий вид:
requirejs.config({
paths: {
"jquery":"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min",
"bootstrap":"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min",
"angular":"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.27/angular",
"router":"https://cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router",
"animate":"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.27/angular-animate"
},
shim: {
'bootstrap': {
deps: ['jquery']
},
'angular': {
exports: 'angular'
},
'router': {
deps: ['angular']
},
'animate': {
deps: ['angular']
},
'routerApp': {
deps: ['angular'],
exports: 'routerApp'
},
'myApp': {
deps: ['angular'],
exports:'myCtrl'
}
}
});
require(["jquery", "bootstrap","angular","router","animate", "routerApp","myApp"], function () {
angular.bootstrap(document, ['routerApp', 'myApp']);
});
Обращаю внимание, что пути пишутся без ".js" в конце.
Дополнительно созданы два файла: routeApp.js и myApp.js. Require.JS находит их автоматически (если лежат в baseUrl, здесь - текущая директория), в shim указаны их зависимости. Файла script.js больше нет, он целиком разделён между этими двумя.
Файл routeApp.js, в частности, имеет структуру:
define('routerApp', ['angular'], function() {
//далее описан контроллер angular, и обязательно добавлено
routerApp.$inject = ['$stateProvider', '$urlRouterProvider'];
//(в коде использованы такие зависимости)
return routerApp; //(модуль должен что-то возвращать)
});
Теперь получаем следующий эффект.
При в запуске в Firefox всё работает нормально. Но, если открыть консоль, сначала видим ошибку Ангуляр: не найден routeApp. Выглядит так, будто сначала загружается HTML, затем Ангуляр, он пытается выполнить компиляцию, но не находит контроллеры (ещё не загрузились). Затем запускается angular.bootstrap, Ангуляр запускает компиляцию по новой, всё находит, и код запускается успешно.
При запуске в Хроме вообще ничего не работает. В консоли наблюдаем: -не найден контроллер -ошибка дайджеста: достигнут предел в 10 итераций