找不到应用程序模块AngularJS

【问题标题】：App Module Not Found AngularJS找不到应用程序模块AngularJS
【发布时间】：2016-07-25 21:16:05
【问题描述】：

由于某种原因，当我尝试运行此代码时它给了我错误。 （我将发布代码然后在底部出错）：

index.html:

<!DOCTYPE html>
<html>

<head>
    <meta id="meta" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="assets/dist/css/vendor.min.css" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.css" />
    <script type="text/javascript" src="assets/dist/js/vendor.min.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.min.js"></script>


    <link rel="stylesheet" href="global.css" type="text/css" />


    <link href="https://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>



    <script type="text/javascript" src="app/app.module.js"></script>
    <script type="text/javascript" src="app/app.route.js"></script>
    <script type="text/javascript" src="assets/dist/js/app.min.js"></script>


</head>


    <body ng-app="Hive">


      <div ui-view class="main_view">
      </div>


   <ion-tabs class="tabs-icon-top tabs-energized">

        <ion-tab title="Home" icon="ion-home" ui-sref="home">
          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Discussions" icon="ion-android-contacts" ui-sref="discussions">
          <ion-nav-view name="discussions-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Board" icon="ion-ios-list-outline" ui-sref="board">
          <ion-nav-view name="list-tab"></ion-nav-view>
        </ion-tab>


             <ion-tab title="Me" icon="ion-android-happy" ui-sref="me">
          <ion-nav-view name="profile-tab"></ion-nav-view>
        </ion-tab>

      </ion-tabs>


  </body>


</html>

app.module.js：

(function (angular) {
    'use strict';
    angular.module('Hive', [
            'ionic',
            'firebase',
            'ngMaterial'
        ]
    );

});

app.route.js：

(function (angular) {
    'use strict';

    angular.module('Hive')
        .config(stateParams)

    /* @ngInject */
    function stateParams($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl:'app/components/home/home.html',
                controller: 'homeCtrl'
            })

            .state('me' , {
                url:'/me',
                templateUrl:'app/components/me/me.html',
                controller:'meCtrl'
            })

            .state('discussions' , {
                url:'/discussions',
                templateUrl:'app/components/discussions/discussions.html',
                controller:'discussionsCtrl'
            })

            .state('board', {
                url:'/board',
                templateUrl:'app/components/board/board.html',
                controller:'boardCtrl'
            })

            .state('register', {
                url:'/register',
                templateUrl:'app/components/register/register.html',
                controller:'registerCtrl'
            })


        $urlRouterProvider.otherwise('/home');

    }
})(angular);

运行代码时出现以下错误：

Error: $injector:nomod
Module Unavailable
Module 'Hive' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Error: $injector:modulerr
Module Error
Failed to instantiate module Hive due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.2.7/$injector/nomod?p0=Hive
    at Error (native)
    at https://preview.c9users.io/amanuel2/hive/assets/dist/js/vendor.min.js:3:3596
    at https://preview.c9users.io/amanuel2/hive/assets/dist/js/vendor.min.js:3:10429
    at https://preview.c9users.io/amanuel2/hive/assets/dist/js/vendor.min.js:3:10940
    at https://preview.c9users.io/amanuel2/hive/assets/dist/js/vendor.min.js:3:14933
    at Array.forEach (native)
    at o (https://preview.c9users.io/amanuel2/hive/assets/dist/js/vendor.min.js:3:3925)
    at r (https://preview.c9users.io/amanuel2/hive/assets/dist/js/vendor.min.js:3:14873)
    at wt (https://preview.c9users.io/amanuel2/hive/assets/dist/js/vendor.min.js:3:16490)
    at r (https://preview.c9users.io/amanuel2/hive/assets/dist/js/vendor.min.js:3:9097

我完全不明白为什么会出现这些错误。我已经调试了很长时间，但不明白为什么。现在我在网站 IDE 中对所有这些进行编码：https://ide.c9.io/amanuel2/hive。帮助将不胜感激！ :)

编辑（ngMaterial 不工作 ^^）： 索引.html： 

<head>
    <meta id="meta" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="assets/dist/css/vendor.min.css" type="text/css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
    <script type="text/javascript" src="assets/dist/js/vendor.min.js"></script>



    <!-- Angular Material requires Angular.js Libraries -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>



    <link rel="stylesheet" href="global.css" type="text/css" />


    <link href="https://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>



    <script type="text/javascript" src="app/app.module.js"></script>
    <script type="text/javascript" src="app/app.route.js"></script>
    <script type="text/javascript" src="assets/dist/js/app.min.js"></script>


</head>


    <body ng-app="Hive">


      <div ui-view class="main_view">
      </div>


   <ion-tabs class="tabs-icon-top tabs-energized">

        <ion-tab title="Home" icon="ion-home" ui-sref="home">
          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Discussions" icon="ion-android-contacts" ui-sref="discussions">
          <ion-nav-view name="discussions-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Board" icon="ion-ios-list-outline" ui-sref="board">
          <ion-nav-view name="list-tab"></ion-nav-view>
        </ion-tab>


             <ion-tab title="Me" icon="ion-android-happy" ui-sref="me">
          <ion-nav-view name="profile-tab"></ion-nav-view>
        </ion-tab>

      </ion-tabs>


  </body>


</html>

app.module.js：

(function (angular) {
    'use strict';
    angular.module('Hive', [
            'ionic',
            'firebase',
            'ngMaterial'
        ]
    );

})(angular);

【问题讨论】：

  • 您似乎缺少angular.module 的第二个参数。试试angular.module('Hive', [])。如果你没有在 Angular 中传递该数组，它将尝试找到一个名为“Hive”的现有模块，而不是创建一个新模块
  • @rob 如果你看到我上面的代码，我确实有一个带有数组的参数：angular.module('Hive', [ 'ionic', 'firebase', 'ngMaterial' ] );
  • 你确定 app/*.js 文件被加载了吗？
  • 对不起，我错过了。不过，您的 app.module.js 代码永远不会被执行。你把它包装在一个永远不会被调用的函数中

标签： javascript angularjs angularjs-module


【解决方案1】：

你的app.module.js不应该是这样的吗：

(function (angular) {
    'use strict';
    angular.module('Hive', [
            'ionic',
            'firebase',
            'ngMaterial'
        ]
    );

})(angular);

你忘了传入角度对象。

【讨论】：

猜你喜欢
  • 2014-04-07
  • 2019-12-30
  • 2016-12-07
  • 2017-03-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-12-02
  • 2014-12-08
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode