connecting scripts require.js

The HTML code (head) has the following set of scripts (well, not just scripts, also 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>

Trying to hang the download of this whole zoo on require.js

Added the script{[7] to head, the very first one]}

<script data-main="main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.1/require.js"></script>

Accordingly, I create the main file.js, and there I write:

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() {

});

, etc.

I get the error

Error: Script error for "jquery", needed by: main
http://requirejs.org/docs/errors.html#scripterror

UPD

The correct main.js took the following form:

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

Please note that the paths are written without".js" at the end.

Additionally, two files were created: routeApp.js and myApp.js. Require.JS finds them automatically (if they are in baseUrl, here is the current directory), and their dependencies are specified in shim. File name script.js no longer, it is entirely divided between the two.

RouteApp file.js, in particular, has the structure:

define('routerApp', ['angular'], function() {
//далее описан контроллер angular, и обязательно добавлено
routerApp.$inject = ['$stateProvider', '$urlRouterProvider'];
//(в коде использованы такие зависимости)
return routerApp; //(модуль должен что-то возвращать)   
});

Now we get the following effect.

When running in Firefox, everything works fine. But, if you open the console, first we see an error Angular: routeApp not found. It looks like the HTML is loaded first, then the Angular, it tries to compile, but doesn't find the controllers (haven't loaded yet). Then angular.bootstrap is started, Angular starts the compilation again, finds everything, and the code runs successfully.

When running in Chrome, nothing works at all. In the console, we observe: - controller not found - digest error: limit of 10 iterations reached

 2
Author: user211576, 2016-09-09

1 answers

Try to make only require entry points in main after the settings, for example:

require(['myApp'],function(myApp){});

And already in MyApp.js define the necessary scripts/modules, like this:

define(['jquery'], function($){
 ...
 -1
Author: Mikl, 2016-10-27 14:23:43