添加模块时,ZURB Foundation for Apps [$ injector:modulerr]错误

时间:2016-01-06 15:42:45

标签: javascript angularjs zurb-foundation

我正在开发一个已经在Ionic工作的具有特定身份验证的项目。我必须为仅适用于Web设备的管理面板实现相同的功能,因此我已经安装了所有依赖项,配置了应用程序并且已经在ZURB Foundation for Apps 1.1中完成了HTML / CSS。 现在我坚持执行控制器和服务。

我阅读了官方文档,对自定义控制器和服务没有太多解释,因此我在网上发现了一些解释基金会应用程序结构的文本。我还找到了一个示例应用程序,其结构在此处说明:ORGANIZING ANGULAR FILES IN ZURB FOUNDATION FOR APPS并从此处复制每个页面的示例文件:Foundation for Apps Template

因此,我在 assets / js 文件夹中放入了关于,联系人,家庭和共享文件夹。

因此,例如,共享文件夹包含 controllers.js 文件,其中包含以下代码:

   (function () {
    'use strict';
    var controllers;

    AppCtrl.$inject = ['$scope'];
    function AppCtrl($scope) {
        // This is a shared controller because its the application parent controller
    }

    controllers = {
        AppCtrl: AppCtrl
    };

    angular.module('SharedModule').controller(controllers);
})

module.js 文件包含:

(function () {
    'use strict';
  angular.module('SharedModule', [ /* Dependencies to be shared everywhere */ ]);
})

app.js 文件与生成的文件几乎完全相同,但指定了自定义模块:

(function() {
  'use strict';

  angular.module('application', [
    'ui.router',
    'ngAnimate',

    //foundation
    'foundation',
    'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations',

    // My modules
    'SharedModule',
    'ContactModule',
    'AboutModule',
    'HomeModule'
  ])
    .config(config)
    .run(run)
  ;

  config.$inject = ['$urlRouterProvider', '$locationProvider'];

  function config($urlProvider, $locationProvider) {
    $urlProvider.otherwise('/');

    $locationProvider.html5Mode({
      enabled:false,
      requireBase: false
    });

    $locationProvider.hashPrefix('!');
  }

  function run() {
    FastClick.attach(document.body);
  }

})();

所以现在,当我运行应用程序时,我收到以下错误:

  

未捕获错误:[$ injector:modulerr]无法实例化模块   应用程序由于:错误:[$ injector:modulerr]无法实例化   模块HomeModule由于:错误:[$ injector:nomod]模块' HomeModule'   不可用!您要么错误拼写了模块名称,要么忘了   加载它。如果注册模块,请确保指定   依赖作为第二个参数。

任何帮助都将不胜感激,谢谢。

1 个答案:

答案 0 :(得分:0)

我解决了这个问题。

我尝试逐个删除模块以测试单个模块是否存在问题,但是抛出了相同的错误,所以我也检查了单个文件,但文件看起来与示例应用程序中的相同。然后,我检查了是否调用了依赖项,但由于它们没有像常规AngularJS应用程序那样在索引文件中调用,我比较了gulpfile.js并附带了解决方案: 在appJS数组中,我必须包含.js文件的路径,因此gulpfile.js的一部分现在看起来像这样:

  appJS: [
    'client/assets/js/app.js',

    // Load my modules
    'client/assets/js/*/module.js',
    'client/assets/js/*/controllers.js',
    'client/assets/js/*/factories.js',
    'client/assets/js/*/services.js',
    'client/assets/js/*/directives.js'
  ]