角度モジュールがロードされるのを助ける必要があります：キャッチコピーエラー：[$ injector：modulerr]

角度モジュールを起動しようとしていますが、なぜ動作しないのかわかりません。すべてのコントローラー、モジュール、および指令は私にとっては大丈夫です。問題がindex.htmlページにすべてのものがロードされているかのように感じられます。だれかが問題であるかもしれないという考えを持っていますか？私はこれまで同様の質問をしましたが運はありませんでした。

index.htmlを

<!doctype html> 
    <html lang="en" ng-app="application"> 
    <head> 
     <meta charset="utf-8"> 
     <title>My Portfolio</title> 
     <link rel="stylesheet" href="styles/main.css"/> 
     <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/> 

     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
     <script src="bower_components/jquery/dist/jquery.min.js"></script> 
     <script src="bower_components/angular-route/angular-route.min.js"></script> 
     <script src="bower_components/angular-loader/angular-loader.min.js"></script> 
     <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 
     <script src="scripts/module.js"></script> 
     <script src="scripts/controllers/mainHeroController.js"></script> 
     <script src="scripts/directives/mainHero.directive.js"></script> 
    </head> 

    <body ng-app="webApp"> 
     <nav id="main-navbar" class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#">My Portfolio</a> 
      </div> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Page 1</a></li> 
       <li><a href="#">Page 2</a></li> 
       <li><a href="#">Page 3</a></li> 
      </ul> 
      </div> 
     </nav> 
      <div id="main-jumbotron" class="jumbotron container-fluid"> 
      <div class="row"> 
       <div class="col-md-4"> 
        <img id="profile-pic" src="images/ProfilePic.jpg"/> 
       </div> 
       <div class="col-md-8"> 
        <h1 class="display-3">Hello world!</h1> 
         <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> 
         <hr class="m-y-2"> 
         <p>It uses utility classes for typography and spacing to space content out within the larger container.</p> 
         <p class="lead"> 
         <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a> 
        </p> 
       </div>  
      </div> 
      </div> 
     <div id="container1"> 
      <mainHero></mainHero> 
     </div> 
     <div id="container2"> 
      Container 2 
     </div> 
    </body> 
    </html>

module.js

(function() 
    { 
     'use strict' 

     angular 
      .module('webApp', []) 


    })();

mainHero.js

(function mainHeroDirective() 
     { 

     'use strict' 

     angular 
      .module('webApp') 
      .directive('mainHero', mainHero); 

     mainHero.$inject = []; 

     function mainHero() 
     { 
      var directive = 
       { 
        restrict: 'E', 
        controller: 'MainHeroController', 
        //controllerAs: 'mainHero', 
        scope: {}, 
        template: 'Directive works!' 
       } 

     } 
    })();

mainHeroController.js

(function mainHeroController() 
     { 

     'use strict' 

     angular 
      .module('webApp') 
      .controller('MainHeroController', MainHeroController); 

     mainHeroController.$inject = []; 

     function MainHeroController() 
      { 
       alert('works!'); 
      } 

    })()

出典

2016-09-10 Kode_12

エラーが実際にあなたの文書の先頭に残っている「NG-アプリ」によって引き起こされる：

<html lang="en" ng-app="application">

あなたはから（一種の）言うことができますエラーのURL：

http://errors.angularjs.org/1.5.8/ $ injector/nomod？ p0 =アプリケーション

あなたのディレクティブがどのように定義されているかには別の問題がありました。何も返されず、コントローラのタイプミスもあります。

私はcodepenし、それをコピーして、それらのエラーを修正：

http://codepen.io/anon/pen/ZpbZRJ

はそれが役に立てば幸い！

出典

2016-09-10 00:59:24

私の目の前に！うん、ありがとう！ –

角度モジュールがロードされるのを助ける必要があります：キャッチコピーエラー：[$ injector：modulerr]

答えて

関連する問題