title: AngularJS - Uncaught Error: [$injector:modulerr] when trying to combine modules
body: <p>I'm trying learn angular by using multiple modules for a html page. One module for routing and the others for displaying content. </p>
  
  <p>For example, here i have 3 modules in app.js. I have routeApp for the routes, comentUpp for displaying content. and combineApp to combine everything.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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'])</code></pre>
  </div>
  </div>
  </p>
  
  <p>and in index.php i have it like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html ng-app="combineApp" &gt;
      &lt;head&gt;
        &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /&gt;
        &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /&gt;
  
        &lt;!-- SPELLS --&gt;
        &lt;!-- load angular and angular route via CDN --&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"&gt;&lt;/script&gt;
       &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-resource.min.js"&gt;&lt;/script&gt;
       &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.min.js"&gt; &lt;/script&gt;
       &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
  
        &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body  &gt;
  
          &lt;!-- HEADER AND NAVBAR --&gt;
          &lt;header&gt;
              &lt;nav class="navbar navbar-default"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;a class="navbar-brand" href="/"&gt;Angular Routing Example&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;ul class="nav navbar-nav navbar-right"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#about"&gt;&lt;i class="fa fa-shield"&gt;&lt;/i&gt; About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#contact"&gt;&lt;i class="fa fa-comment"&gt;&lt;/i&gt; Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
  
          &lt;!-- MAIN CONTENT AND INJECTED VIEWS --&gt;
          &lt;div id="main" &gt;
            &lt;div ng-view&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see i'm trying to inject comment.php into index.php.
  below is my comment.php</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;html&gt;
  &lt;div ng-controller="mainController"&gt;
      &lt;div class="col-md-8 col-md-offset-2"&gt;
  
        &lt;!-- PAGE TITLE =============================================== --&gt;
        &lt;div class="page-header"&gt;
            &lt;h2&gt;Laravel and Angular Single Page Application&lt;/h2&gt;
            &lt;h4&gt;Commenting System&lt;/h4&gt;
        &lt;/div&gt;
  
        &lt;!-- NEW COMMENT FORM =============================================== --&gt;
        &lt;form ng-submit="submitComment()"&gt; &lt;!-- ng-submit will disable the default form action and use our function --&gt;
  
            &lt;!-- AUTHOR --&gt;
            &lt;div class="form-group"&gt;
                &lt;input type="text" class="form-control input-sm" name="author" ng-model="commentData.author" placeholder="Name"&gt;
            &lt;/div&gt;
  
            &lt;!-- COMMENT TEXT --&gt;
            &lt;div class="form-group"&gt;
                &lt;input type="text" class="form-control input-lg" name="comment" ng-model="commentData.text" placeholder="Say what you have to say"&gt;
            &lt;/div&gt;
  
            &lt;!-- SUBMIT BUTTON --&gt;
            &lt;div class="form-group text-right"&gt;
                &lt;button type="submit" class="btn btn-primary btn-lg"&gt;Submit&lt;/button&gt;
            &lt;/div&gt;
        &lt;/form&gt;
  
        &lt;!-- LOADING ICON =============================================== --&gt;
        &lt;!-- show loading icon if the loading variable is set to true --&gt;
        &lt;p class="text-center" ng-show="loading"&gt;&lt;span class="fa fa-meh-o fa-5x fa-spin"&gt;&lt;/span&gt;&lt;/p&gt;
  
        &lt;div class="comment" ng-hide="loading" ng-repeat="comment in comments"&gt;
            &lt;h3&gt;Comment #{{ comment.id }} &lt;small&gt;by {{ comment.author }}&lt;/h3&gt;
            &lt;p&gt;{{ comment.text }}&lt;/p&gt;
  
            &lt;p&gt;&lt;a href="#" ng-click="deleteComment(comment.id)" class="text-muted"&gt;Delete&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>for some reason it shows </p>
  
  <blockquote>
    <p>Uncaught Error: [$injector:modulerr] <a href="http://errors.angularjs.org/1.6.3/" rel="nofollow noreferrer">http://errors.angularjs.org/1.6.3/</a>$injector/modulerr?p0=combineApp&amp;p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.3%2Fangular.min.js%3A22%3A179)</p>
  </blockquote>
  
  <p>any idea on how to fix this? thanks</p>