RequireJS＆Toaster

Question

私は、RequireJSを使用するdemoAppにToasterを実装する際に問題があります。ここではいくつかのコード：

(function() { 
    require.config({ 
     paths: { 
      'angular': 'bower_components/angular/angular', 
      'jquery': 'bower_components/jquery/dist/jquery', 
      'toaster': 'bower_components/toaster/toaster' 
     }, 
     shim: { 
      angular: { 
       deps: ['jquery'], 
       exports: 'angular' 
      }, 
      toaster: { 
       deps: ['angular', 'jquery'], 
       exports: 'toaster' 
      } 
     } 
    }); 

    require([ 
     'angular', 
     'app', 
     'toaster', 
     'jquery' 
    ], 
    function (angular, app, toaster) { 
     'use strict'; 
     // toaster is undefined. I add it here just for a check. <<<<<< 

     angular.bootstrap(angular.element('body')[0], ['myApp']); 
    }); 
})(); 

これはmain.jsで、トースターは、私が終わり近くにコメントを書き込みましたundefinedです。ファイルは、コンソールの[Sources]タブで確認できるように読み込まれます。 さらに、toasterを使用したい場合は、undefinedです。ここでは、同じデモアプリケーションからいくつかのコード：

最初のケース：

define(['somefile', 'toaster'], function (someModule, toaster) { 
    'use strict'; 

    // toaster is undefined 

}); 

セカンドケース（John Papa Angular Style Guide）：

define(['somefile', 'toaster'], function (someModule) { 
    'use strict'; 

    someModule.controller('NewController', NewController); 

    NewController.$inject = ['someDeps', 'toaster']; 

    function NewController(someDeps, toaster) { 

    // angular.js:13424 Error: [$injector:unpr] 
    // Unknown provider: toasterProvider <- toaster <- NewController 

    } 
}); 

はここで私が使用しているものです：

Angular: 1.5.3 
RequireJs: 2.2.0 
Toaster: 2.0.0 

誰かが私が間違っていることを教えてもらえますか？

Answer 1

AngularモジュールとRequireJSモジュールを区別する必要があります。トースターはAngularモジュールのみを登録し、何もエクスポートする必要はありませんはRequireJSの方法でです。

shim: { 
    // ... 
    toaster: { 
    deps: ["angular", "jquery"] 
    } 
} 

ブートストラップ：あなたのapp.jsで

require(["angular", "app"], function (angular) { 

    // here, app.js is loaded in the DOM, so you can bootstrap Angular: 
    angular.bootstrap(angular.element("body")[0], ["myApp"]); 

}) 

：どこでも他

define(["toaster" /* , ... */], function() { 

    // here, toaster.js is loaded in the DOM, so you can add the "toaster" Angular module in your Angular app dependencies: 
    return angular.module("myApp", ["toaster" /* , ... */]); 

}); 

：

define(["app"], function (app) { 

    // as myApp depends on toaster, you can inject the toaster service the Angular way: 
    app.controller("MyController", ["toaster", function (toaster) { 
    // ... 
    }]); 

});