Question

我正在尝试通过为html页面使用多个模块来学习角度。一个用于路由的模块和用于显示内容的其他模块。

例如，这里我在app.js中有3个模块。我有路由的routeApp，用于显示内容的comentUpp。和combineApp结合一切。

var routeApp = angular.module('routeApp',['ngRoute']);
routeApp.config(function($routeProvider){
  $routeProvider
    .when('/', {
      templateUrl : 'views/comment.php',
    });
});
var commentUpp = angular.module('commentUpp',['mainCtrl', 'commentService']);
var combineApp = angular.module('combineApp',['routeApp','commentUpp'])

在index.php中，我喜欢这样：

<!DOCTYPE html>
    <html ng-app="combineApp" >
    <head>
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

      <!-- SPELLS -->
      <!-- load angular and angular route via CDN -->
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-resource.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.min.js"> </script>
     <script src="js/app.js"></script>


      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    </head>
    <body  >

        <!-- HEADER AND NAVBAR -->
        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Angular Routing Example</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                    <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main" >
          <div ng-view></div>

        </div>

    </body>
    </html>

正如您所看到的，我正在尝试将comments.php注入index.php。下面是我的评论.php

<html>
<div ng-controller="mainController">
    <div class="col-md-8 col-md-offset-2">

      <!-- PAGE TITLE =============================================== -->
      <div class="page-header">
          <h2>Laravel and Angular Single Page Application</h2>
          <h4>Commenting System</h4>
      </div>

      <!-- NEW COMMENT FORM =============================================== -->
      <form ng-submit="submitComment()"> <!-- ng-submit will disable the default form action and use our function -->

          <!-- AUTHOR -->
          <div class="form-group">
              <input type="text" class="form-control input-sm" name="author" ng-model="commentData.author" placeholder="Name">
          </div>

          <!-- COMMENT TEXT -->
          <div class="form-group">
              <input type="text" class="form-control input-lg" name="comment" ng-model="commentData.text" placeholder="Say what you have to say">
          </div>

          <!-- SUBMIT BUTTON -->
          <div class="form-group text-right">
              <button type="submit" class="btn btn-primary btn-lg">Submit</button>
          </div>
      </form>

      <!-- LOADING ICON =============================================== -->
      <!-- show loading icon if the loading variable is set to true -->
      <p class="text-center" ng-show="loading"><span class="fa fa-meh-o fa-5x fa-spin"></span></p>

      <div class="comment" ng-hide="loading" ng-repeat="comment in comments">
          <h3>Comment #{{ comment.id }} <small>by {{ comment.author }}</h3>
          <p>{{ comment.text }}</p>

          <p><a href="#" ng-click="deleteComment(comment.id)" class="text-muted">Delete</a></p>
      </div>

  </div>
</div>

</html>

出于某种原因显示

未捕获错误：[$ injector：modulerr] http://errors.angularjs.org/1.6.3/ $ injector / modulerr？p0 = combineApp＆amp; p1 =错误... ogleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.6.3％2Fangular.min.js％ 3A22％3A179）

关于如何解决此问题的任何想法？感谢

Answer 1

你不需要一个单独的模块来注入mainCtrl和commentService，你需要将commentService注入你的mainCtrl，

 var commentUpp = angular.module('commentUpp',[]);

然后

var combineApp = angular.module('combineApp',['routeApp','commentUpp'])

AngularJS - 未捕获错误：[$ injector：modulerr]尝试组合模块时

1 个答案: