Controller und Direktiven in Angular + RequireJS

Question

In this plunk Ich habe einen Beispielcode mit Angular + Angular UI Router + RequireJS. Es gibt zwei Seiten mit jeweils einem entsprechenden Controller. Wenn Sie auf Ansicht 1 klicken, sollten Sie eine Seite sehen, die eine Direktive enthält.

Wenn die Seite geladen wird es die folgende Ausnahme ausgelöst:

Kann nicht Eigentum 'Controller' undefinierter an bei my-ctrl-1.js lesen: 3

was bedeutet, dass app undefiniert in my-ctrl-1.js, obwohl ich es in app.js zurückgeben. Was ist mit diesem Code falsch?

HTML

<ul class="menu"> 
    <li><a href ui-sref="view1">View 1</a></li> 
    <li><a href ui-sref="view2">View 2</a></li> 
    </ul> 

    <div ui-view></div> 

main.js

require.config({ 

    paths: { 
     'domReady': 'https://cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady', 
     'angular': 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min', 
     "uiRouter": "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router" 
    }, 

    shim: { 
     'angular': { 
      exports: 'angular' 
     }, 
     'uiRouter':{ 
      deps: ['angular'] 
     } 
    }, 

    deps: [ 
     'start' 
    ] 
}); 

start.js

define([ 
    'require', 
    'angular', 
    'app', 
    'routes' 
], function (require, angular) { 
    'use strict'; 
    require(['domReady!'], function (document) { 
     angular.bootstrap(document, ['app']); 
    }); 
}); 

app.js

define([ 
    'angular', 
    'uiRouter', 
    'my-ctrl-1', 
    'my-ctrl-2', 
    'my-dir-1' 
], function (angular) { 
    'use strict'; 
    console.log("app loaded"); 
    return angular.module('app', ['ui.router']); 
}); 

my-ctrl-1.js

define(['app'], function (app) { 
    'use strict'; 
    app.controller('MyCtrl1', function ($scope) { 
     $scope.hello = "Hello1: "; 
    }); 
}); 

Answer 1

Das Problem ist, dass Sie eine zirkuläre Abhängigkeit zwischen app.js und my-ctrl-1.js haben. Wenn RequireJS auf eine zirkuläre Abhängigkeit stößt, werden die Referenzen, die an die Fabriken der Module übergeben werden, undefined. Es gibt viele Möglichkeiten, das Problem zu lösen. Eine einfache Möglichkeit, die mit dem Code arbeiten würden Sie zeigen könnte my-ctrl-1.js zu ändern:

define(function() { 
    'use strict'; 

    return function (app) { 
     app.controller('MyCtrl1', function ($scope) { 
      $scope.hello = "Hello1: "; 
     }); 
    }; 
}); 

Und in app.js:

define([ 
    'angular', 
    'my-ctrl-1', 
    'my-ctrl-2', 
    'my-dir-1', 
    'uiRouter', 
], function (angular, ctrl1) { 
    'use strict'; 
    console.log("app loaded"); 
    var app = angular.module('app', ['ui.router']); 
    ctrl1(app); 
    return app; 
}); 

Vermutlich werden Sie die gleiche Sache mit dem anderen zu tun haben Controller.

Die documentation hat einen Abschnitt zum Thema zirkuläre Abhängigkeiten und andere Methoden, um sie zu behandeln.