Question

我一直在尝试将角度注入到我的应用程序中时出错。我收到一条错误Error: $injector:modulerr Module Error。以下是我的代码：

管理员-的index.html：

<!DOCTYPE html>
<html lang="en" ng-app="app" class="no-js" ng-jq> <!--<![endif]-->
<head>
    <meta charset="UTF-8">
    <title>AdminLTE 2 | Dashboard</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- Bootstrap 3.3.2 -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- Font Awesome Icons -->
    <link href="../components/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <!-- Ionicons -->
    <link href="../bower_components/ionicons/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
    <!-- Theme style -->
    <link href="../bower_components/adminlte/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css"/>
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link href="../bower_components/adminlte/dist/css/skins/skin-blue.min.css" rel="stylesheet" type="text/css"/>
    <!--<link rel="stylesheet" href="../bower_components/html5-boilerplate/css/normalize.css">-->
    <!--<link rel="stylesheet" href="../bower_components/html5-boilerplate/css/main.css">-->
    <link rel="stylesheet" href="admin-app.css">
    <link rel="stylesheet" href="reportview/report-view.css">
    <script src="../bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <script>
        var locale = 'zh-CN';
        document.write('<script src="../bower_components/angular-i18n/angular-locale_'+locale+'.js"><\/script>');
    </script>
    <![endif]-->
</head>
<body class="skin-blue">
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header">

        <!-- Logo -->
        <a ng-click="$event.stopPropagation()" class="logo"><b>ZAN Admin</b></a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="left-side main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">


            <!-- search form (Optional) -->
            <form action="#" method="get" class="sidebar-form">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="Search..."/>
              <span class="input-group-btn">
                <button type='submit' name='search' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
                </div>
            </form>
            <!-- /.search form -->

            <!-- Sidebar Menu -->
            <ul class="sidebar-menu">
                <li class="header">Header</li>
                <!-- Optionally, you can add icons to the links -->
                <li class="treeview">
                    <a href="#"><i class="fa fa-circle-o"></i>Report Views<i class="fa fa-angle-left pull-right"></i> </a>
                    <ul class="treeview-menu" ng-cloak>
                        <li ng-repeat="dsm in dsmeta">
                            <a ng-href="admin-index.html#/admin/reportview/{{dsm.name}}">{{dsm.name}}</a>
                        </li>
                    </ul>
                </li>

            </ul><!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" ng-view>
        <!-- Content Header (Page header) -->
    </div><!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer class="main-footer" ng-controller="AdminSyncConsole">
        <!-- To the right -->
<!--         <div class="pull-right hidden-xs">
            Anything you want
        </div> -->
        <!-- Default to the left -->
        <!-- <strong>Copyright &copy; 2015 <a href="#">Company</a>.</strong> All rights reserved. -->
        <!-- Apply any bg-* class to to the info-box to color it -->
        <div class="info-box bg-green">
          <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
          <div class="info-box-content">
            <span class="info-box-text">Current Sync Status</span>
            <span class="info-box-number">{{syncStatus}}</span>
            <!-- The progress section is optional -->
            <div class="progress">
              <div class="progress-bar" style="width: 70%"></div>
            </div>
            <span class="progress-description">
              70% Increase in 30 Days
            </span>
          </div><!-- /.info-box-content -->
        </div><!-- /.info-box -->

        <div class="box box-solid box-default">
          <div class="box-header">
            <h3 class="box-title">Sync Sessions</h3>
          </div>
            <div class="box box-default collapsed-box">
              <div class="box-header with-border">
                <h3 class="box-title">Expandable</h3>
                <div class="box-tools pull-right">
                  <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
                </div><!-- /.box-tools -->
              </div><!-- /.box-header -->
              <div class="box-body">
                The body of the box
              </div><!-- /.box-body -->
            </div><!-- /.box -->
        </div>
    </footer>

</div><!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.1.3 -->
<script src="../bower_components/adminlte/plugins/jQuery/jQuery-2.1.3.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>

<script src="../bower_components/adminlte/plugins/fastclick/fastclick.min.js"></script>
<!-- build:js ../minjs/angular.js -->
<!-- angular dependencies -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/angular-translate/angular-translate.min.js"></script>
<script src="../bower_components/angular-translate-loader-partial/angular-translate-loader-partial.min.js"></script>
<script src="../bower_components/angular-touch/angular-touch.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<!-- endbuild -->
<!-- AdminLTE App -->
<script src="../bower_components/adminlte/dist/js/app.js" type="text/javascript"></script>
<script src="../bower_components/angular-translate/angular-translate.js"></script>
<script src="../bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<!-- build:js ../minjs/z-ui.js -->
<script src="../js/z-ui.js"></script>
<!-- endbuild -->
<script src="../bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="reportview/reportview.js"></script>
<script src="../translation/translate.js"></script>
<script src="admin-app.js"></script>
<script src="../components/util/report-view-service.js"></script>
</body>
</html>

管理员-app.js：

'use strict';

var baseSyncUrl = "../api/rest/{{path.version}}/syncsessions";
var getSyncSessionsReq  = {method: "GET", url: baseSyncUrl, params: {targetSystemType:{}, pageSize: ""}, path: {version: "v1"}};

// Declare app level module which depends on views, and components
var app = angular.module('app', ['z.components']);
app.controller('AdminSyncConsole', ['$scope', '$http', 'RESTCaller', function ($scope, $http, RESTCaller) {
    $scope.syncStatus = "Completed";
    $scope.syncSessions;
    //REST API to get the sync sessions
    $scope.getSyncSessions = function() {
        var req = getSyncSessionsReq;
        var targetSystem = {'id': '1', 'type': 'SPOTLIGHT', 'description': 'Spotlight'};
        req.params.targetSystemType = targetSystem;
        //Page size is not necessarily required
        // req.params.pageSize = 
        var data = RESTCaller.getConfig(req);
        data.then(function(result){
            if(result) {
                console.log("Result: ", result);
            }
        });  
    }
    //Getting the sync sessions
    console.log("Hi");
    $scope.syncSessions = $scope.getSyncSessions();
    //Call REST API to get the sync status
}]);

我很困惑为什么会这样。我没有任何其他问题将angular.min.js注入到我的其他文件中，我似乎无法确定错误的来源，因为它只是抱怨angular.min.js。我已经检查过，我的ng-app似乎是正确的，z.components来自另一个来自我已经包含的名为../js/z-ui.js的文件的模块。 RESTCaller也来自z-ui.js文件。任何帮助，将不胜感激。谢谢！

Answer 1

我认为您应该检索此模块而不是创建，但我不知道您在做什么

请注意，使用angular.module（＆＃39; myModule＆＃39;，[]）将创建模块myModule并覆盖任何名为myModule的现有模块。使用angular.module（＆＃39; myModule＆＃39;）来检索现有模块。

此外：

传递一个参数检索现有的angular.Module，而传递多个参数会创建一个新的angular.Module

正如你所说：

我已经检查过，我的ng-app似乎是正确的，z.components来自另一个来自我已经包含的文件的模块，名为../ js / z-ui.js。

您是否使用了所有这些文件？

<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-resource/angular-resource.min.js"></script>
<script src="../bower_components/angular-translate/angular-translate.min.js"></script>
<script src="../bower_components/angular-translate-loader-partial/angular-translate-loader-partial.min.js"></script>
<script src="../bower_components/angular-touch/angular-touch.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>

角度注射器错误

1 个答案: