2016-04-24 5 views
0

私はangular.jsを使ってページを設定していますが、angle-ui-routerを使っています。把握していないようだ。私は適切なCDNのを必要としていたと私は私が正しくセットアップの角度を持っていますが、エラーに実行しています信じている:

> angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=portfolioApp&p1=Err…oudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.5%2Fangular.min.js%3A21%3A19) 

次のように私のapp.jsがある:

> angular.module('portfolioApp', ['ui.router','ui.bootstrap']).config(['$stateProvider','$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) 
>{$urlRouterProvider.otherwise('/'); 
> $stateProvider 
>  .state('main', { 
>  url: '/', 
>  views: { 
>   '/': { 
>   templateUrl: '/views/main.html' 
>   } 
>  } 
>  }); $locationProvider.html5Mode({ 
>  enabled: true, 
>  requireBase: false 
> }); 
>}]); 

内に位置しています私のindex.htmlファイル私のアプリのメインフォルダ:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Tammer Galal</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script> 
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script> --> 
    <script src="/js/app.js"></script> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="/style/style.css"> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/darkly/bootstrap.css"> 
    </head> 
    <body ng-app='portfolioApp' class="portfolioBody"> 
    <div class="bs-component"> 
     <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html">Home</a> 
      </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
       <a href="repo.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Github Repositories<span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="repo.html">Repos</a></li> 
       </ul> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </nav> 
    </div> 
    <div ui-view><div> 
    <!-- <footer class="footer"> 
     <div class="container"> 
     <p class="text-muted">Place sticky footer content here.</p> 
     </div> 
    </footer> --> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    </body> 
</html> 

私はの範囲内である私がpartial-home.html命名した部分の基本的な家をロードしようとしていますディレクトリパス。

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-xs-12 text-center"> 

    </div> 
    <div class="col-xs-12 text-center"> 
     <img class="img-rounded me" id="firstPicture" src="/img/me.jpg"> 
    </div> 
    <div class="col-xs-12 text-center"> 

    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-4 col-md-4"> 
     <div> 
     <h3 class="siteHeader"><strong>Rock Paper Scissors!</strong></h3> 
     <a href="rps.html"><img class="img-rounded" id="rpsPic" src="/img/rps.jpg"></a> 
     <p class="siteDescrip">Play a game of Rock, Paper, Scissors! Created utilizing: <br /><strong>HTML, CSS3, Javascript, and jQuery</strong></p> 
     </div> 
    </div> 
    <div class="col-sm-4 col-md-4"> 
     <h3 class="siteHeader"><strong>Face Check</strong></h3> 
     <a href="http://face-check.herokuapp.com/"><img class="img-rounded" id="faceCheckPic" src="/img/faceCheckPic.jpg"></a> 
     <p class="siteDescrip">A facial and emotional recognition app Created utilizing: <br /><strong>HTML, CSS3, Javascript, jQuery, AJAX, and 3 APIs</strong><br /><strong>Co-Creators: Long Phan and Evan Bates</strong></p> 
    </div> 
    <div class="col-sm-4 col-md-4"> 
     <h3 class="siteHeader"><strong>RU Fly?</strong></h3> 
     <a href="http://rufly2.herokuapp.com/"><img class="img-rounded" id="faceCheckPic" src="/img/rufly.jpg"></a> 
     <p class="siteDescrip">RU Fly is a Rutgers Web Flyer, where students can add their favorite restaurants and leave reviews, so everyone knows the best place to eat! Adding upcoming events soon!<br /><strong>HTML, CSS3, Javascript, Node.js, MySQL, Sequelize, Express, JawsDB</strong></p> 
    </div> 
    </div> 
</div> 

私は本当にそれは私が間違って行っているとゼロから始める考えていますが何であるかを把握することはできません。どんな助けでも大歓迎です。

+1

'ng-app'属性で' body'要素に 'ng-strict-di'を追加してください。 'ng-strict-di'はDependency Injectionを強制し、依存関係が適切に供給されていないという詳細なエラーを表示します。しかしそれを見るだけで、私はそれが問題である 'ui.bootstrap'であると推測します。 – Claies

+0

が ''に変更され、同じコンソールログエラーが発生しています。 'ui-bootstrap'を削除して2分後にチェックインします。 ***アップデート*** 'ui-bootstrap'を削除すると問題が解決しました!どうもありがとうございます。 – Tammerg

+1

問題を再現するためのクイックプランナーを作成すると、私の疑惑が確認されます。 angular.min.jsの代わりにangular.jsに変更すると 'Error:[$ injector:nomod]モジュール 'ui.bootstrap'は利用できません! ' – Claies

答えて

0

このエラーを再現しようとしました。すべて正常に動作しますが、アプリ 'portfolioApp'に 'ui.bootstrap'モジュールを追加すると、同じエラーメッセージが表示されます。また、あなたの 'index.html'に 'ui.bootstrap'モジュールの参照がありません。 'ui.bootstrap'を削除するか、このモジュールのリファレンスを 'index.html'に追加してください。

関連する問題