添加 angular-gridster 时模块实例化失败答案

【问题标题】：Module instantiation failure when adding angular-gridster添加 angular-gridster 时模块实例化失败
【发布时间】：2015-05-05 01:34:17
【问题描述】：

我添加了另一个模块“checklist-model”，它能够加载类似的配置。

错误：

未捕获的错误：[$injector:modulerr] 无法实例化模块 mmxDashboardApp 由于：错误：[$injector:modulerr] 失败实例化模块 angular-gridster 由于：错误：[$injector:nomod] 模块 'angular-gridster' 不可用！你要么拼错了模块名称或忘记加载它。如果注册一个模块，请确保您将依赖项指定为第二个参数。

Bower.json

{
  "name": "mmx-dashboard",
  "version": "0.0.0",
  "dependencies": {
    "angular": ">=1.2.*",
    "json3": "~3.3.1",
    "es5-shim": "~3.0.1",
    "jquery": "~1.11.0",
    "bootstrap": "~3.1.1",
    "angular-resource": ">=1.2.*",
    "angular-cookies": ">=1.2.*",
    "angular-sanitize": ">=1.2.*",
    "angular-route": ">=1.2.*",
    "angular-bootstrap": "~0.11.0",
    "font-awesome": ">=4.1.0",
    "lodash": "~2.4.1",
    "checklist-model" : "~0.2.4",
    "nvd3" : ">=1.7.1",
    "angular-gridster" : "~0.11.7"
  },
  "devDependencies": {
    "angular-mocks": ">=1.2.*",
    "angular-scenario": ">=1.2.*"
  }
}

app.js

'use strict';

angular.module('mmxDashboardApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ui.bootstrap',
  'checklist-model',
  'angular-gridster'
])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(true);
  });

index.html

<!-- bower:js -->
      <script src="bower_components/jquery/dist/jquery.js"></script>
      <script src="bower_components/angular/angular.js"></script>
      <script src="bower_components/angular-resource/angular-resource.js"></script>
      <script src="bower_components/angular-cookies/angular-cookies.js"></script>
      <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
      <script src="bower_components/angular-route/angular-route.js"></script>
      <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
      <script src="bower_components/lodash/dist/lodash.compat.js"></script>
      <script src="bower_components/checklist-model/checklist-model.js"></script>
      <script src="bower_components/d3/d3.js"></script>
      <script src="bower_components/nvd3/build/nv.d3.js"></script>
      <script src="bower_components/javascript-detect-element-resize/detect-element-resize.js"></script>
      <script src="bower_components/angular-gridster/src/angular-gridster.js"></script>
      <!-- endbower -->

【问题讨论】：

标签： javascript angularjs yo angular-fullstack

【解决方案1】：

模块名称是“gridster”而不是“angular-gridster”。

https://github.com/ManifestWebDesign/angular-gridster/blob/master/src/angular-gridster.js#L5

【讨论】：

【解决方案2】：

'use strict';

angular.module('mmxDashboardApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ui.bootstrap',
  'checklist-model',
  'gridster'  /* not  'angular-gridster'*/
])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(true);
  });

【讨论】：