用requirejs未定义的toastr答案

【问题标题】：toastr undefined with requirejs用requirejs未定义的toastr
【发布时间】：2014-01-27 00:03:48
【问题描述】：

我正在将带有 require.js 的 toastr.js 加载到我的 Angular 项目中，但是它不能作为全局变量使用。

这是 main.js：

require.config({
  baseUrl: 'js',
  paths: {
    domReady: '../lib/requirejs-domready/domReady',
    jquery: '../lib/jquery/jquery',
    jqueryValidate: '../lib/jquery.validation/jquery.validate',
    underscore: '../lib/underscore/underscore',
    bootstrap: '../lib/bootstrap/dist/js/bootstrap',
    moment: '../lib/momentjs/moment',
    toastr: '../lib/toastr/toastr',
    angular: '../lib/angular/angular',
    ngAnimate: '../lib/angular-animate/angular-animate',
    'ui.router': '../lib/angular-ui-router/release/angular-ui-router',
    'chieffancypants.loadingBar': '../lib/angular-loading-bar/build/loading-bar',
    uuid4: '../lib/angular-uuid4/angular-uuid4',
    'ui.bootstrap': '../lib/angular-bootstrap/ui-bootstrap',
    'ui.bootstrap.tpls': '../lib/angular-bootstrap/ui-bootstrap-tpls',
    xeditable: '../lib/angular-xeditable/dist/js/xeditable',
    Restangular: '../lib/restangular/dist/restangular',
    ngCookies: '../lib/angular-cookies/angular-cookies'
  },
  shim: {
    angular: {
      exports: 'angular'
    },
    Restangular: {
      deps: ["underscore", "angular"]
    },
    'ui.router': {
      deps: ['angular']
    },
    'ui.bootstrap': {
      deps: ['angular', 'ui.bootstrap.tpls']
    },
    underscore: {
      exports: '_'
    },
    bootstrap: {
      deps: ['jquery']
    },
    toastr: {
      deps: ['jquery'],
      exports: 'toastr'
    },
    jquery: {
      exports: 'jquery'
    }
  },
  deps: ['boot']
});

boot.js：

define([
  'require',
  'angular',
  'bootstrap',
  'app'
], function (require, ng) {

  'use strict';

  require(['domReady!'], function (document) {
    ng.bootstrap(document, ['wb']);
  });

});

这里是 app.js 中需要的模块。它依赖于 toastr：

define([
  'angular',
  'ui.router',
  'ngCookies',
  'toastr'
], function (ng) {

  'use strict';

  var module = ng.module('wb.common', [
    'ui.router',
    'ngCookies'
  ]);

  return module;

});

我看到 toastr.js 已加载，但它不是作为全局变量创建的。所以 window.toastr 是未定义的。我正在垫片中的 toasr 中导出...

知道为什么 taostr 不能作为全局变量使用吗？

谢谢

【问题讨论】：

标签： toastr

【解决方案1】：

没关系，通过查看 toastr 的源代码（toastr.js 的结尾），它可以作为模块使用。使用 toastr 的服务需要从：

  define(['../module'], function (module) {

  'use strict';

  module.factory('NotifierSvc', ['$log', function ($log) {
    return {
      info: function (msg) {
        toastr.info(msg);
        $log.info(msg);
      },
      warning: function (msg) {
        toastr.warning(msg);
        $log.warn(msg);
      },
      error: function (msg) {
        toastr.error(msg);
        $log.error(msg);
      },
      success: function (msg) {
        toastr.success(msg);
        $log.log(msg);
      }
    }
  }]);

});

到这里：

  define(['../module', 'toastr'], function (module, toastr) {

  'use strict';

  module.factory('NotifierSvc', ['$log', function ($log) {
    return {
      info: function (msg) {
        toastr.info(msg);
        $log.info(msg);
      },
      warning: function (msg) {
        toastr.warning(msg);
        $log.warn(msg);
      },
      error: function (msg) {
        toastr.error(msg);
        $log.error(msg);
      },
      success: function (msg) {
        toastr.success(msg);
        $log.log(msg);
      }
    }
  }]);

});

【讨论】：