2016-10-31 21 views
0

角度テンプレートで行われたことをhttps://www.coursera.org/learn/angular-js/supplement/aVtFp/exercise-instructions-angular-templatesで繰り返そうとしていました。しかし、何かが間違っていて、それが何であるか分かりませんでした。ng-includesはangularJSのために働いていません

は、それだけに見えるmenu.html

<div class="container"> 
    <div class="row row-content" ng-controller="MenuController "> 
     <div class="col-xs-12"> 
      <ul class="nav nav-tabs" role="tablist"> 
       <li role="presentation" 
       ng-class="{active:isSelected(1)}"> 
       <a ng-click="select(1)" 
       aria-controls="all menu" 
       role="tab">The Menu</a></li> 
       <li role="presentation" 
       ng-class="{active:isSelected(2)}"> 
       <a ng-click="select(2)" 
       aria-controls="appetizers" 
       role="tab">Appetizers</a></li> 
       <li role="presentation" 
       ng-class="{active:isSelected(3)}"> 
       <a ng-click="select(3)" 
       aria-controls="mains" 
       role="tab">Mains</a></li> 
       <li role="presentation" 
       ng-class="{active:isSelected(4)}"> 
       <a ng-click="select(4)" 
       aria-controls="desserts" 
       role="tab">Desserts</a></li> 
      </ul> 
      <div class="tab-content"> 
      <ul class="media-list tab-pane fade in active"> 
      <ul class="media-list"> 
      <li class="media" ng-repeat="dish in dishes | filter:filtText"> 
       <div class="media-left media-middle"> 
        <a href="#"> 
        <img class="media-object img-thumbnail" 
        ng-src={{dish.image}} alt="Uthappizza"> 
        </a> 
       </div> 
       <div class="media-body"> 
        <h2 class="media-heading">{{dish.name}} 
        <span class="label label-danger">{{dish.label}}</span> 
        <span class="badge">{{dish.price | currency}}</span></h2> 
        <p>{{dish.description}}</p> 
       </div> 
      </li> 
     </ul> 
     </div> 
     </div> 
    </div> 
</div> 

とのindex.html

よう

<!DOCTYPE html> 
<html lang="en" ng-app="confusionApp"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head 
     content must come *after* these tags --> 

    <title>Ristorante Con Fusion</title>  
     <!-- Bootstrap --> 
<!-- build:css styles/main.css --> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet"> 
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="styles/bootstrap-social.css" rel="stylesheet"> 
    <link href="styles/mystyles.css" rel="stylesheet"> 
<!-- endbuild --> 

    <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 

<body> 
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"> 
        <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="#/"><img src="images/logo.png" height=30 width=41></a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#/"> 
         <span class="glyphicon glyphicon-home" 
         aria-hidden="true"></span> Home</a></li> 
        <li><a href="#/aboutus"> 
         <span class="glyphicon glyphicon-info-sign" 
         aria-hidden="true"></span> About</a></li> 
        <li><a href="#/menu"> 
         <span class="glyphicon glyphicon-list-alt" 
         aria-hidden="true"></span> 
         Menu</a></li> 
        <li><a href="#/contactus"> 
        <i class="fa fa-envelope-o"></i> Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav>   

    <header class="jumbotron"> 

     <!-- Main component for a primary marketing message or call to action --> 

     <div class="container"> 
      <div class="row row-header"> 
       <div class="col-xs-12 col-sm-8"> 
        <h1>Ristorante con Fusion</h1> 
        <p style="padding:40px;"></p> 
        <p>We take inspiration from the World's best cuisines, and create 
        a unique fusion experience. Our lipsmacking creations will 
        tickle your culinary senses!</p> 
       </div> 
       <div class="col-xs-12 col-sm-2"> 
       <p style="padding:20px;"></p> 
       <img src="images/logo.png" class="img-responsive"> 
       </div> 
       <div class="col-xs-12 col-sm-2"> 
       </div> 
      </div> 
     </div> 
    </header> 

    <ng-include src="'menu.html'"></ng-include> 

    <footer class="row-footer"> 
     <div class="container"> 
      <div class="row">    
       <div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1"> 
        <h5>Links</h5> 
        <ul class="list-unstyled"> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">About</a></li> 
         <li><a href="#">Menu</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </div> 
       <div class="col-xs-6 col-sm-5"> 
        <h5>Our Address</h5> 
        <address> 
         121, Clear Water Bay Road<br> 
         Clear Water Bay, Kowloon<br> 
         HONG KONG<br> 
         <i class="fa fa-phone"></i>: +852 1234 5678<br> 
         <i class="fa fa-fax"></i>: +852 8765 4321<br> 
         <i class="fa fa-envelope"></i>: 
         <a href="mailto:[email protected]"> 
         [email protected]</a> 
        </address> 
       </div> 
       <div class="col-xs-12 col-sm-4"> 
        <div class="nav navbar-nav" style="padding: 40px 10px;"> 
         <a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a> 
         <a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a> 
         <a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a> 
         <a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a> 
         <a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a> 
         <a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a> 
        </div> 
       </div> 
       <div class="col-xs-12"> 
        <p style="padding:10px;"></p> 
        <p align=center>© Copyright 2015 Ristorante Con Fusion</p> 
       </div> 
      </div> 
     </div> 
    </footer> 

<!-- build:js scripts/main.js --> 
    <script src="../bower_components/angular/angular.min.js"></script> 
    <script src="scripts/app.js"></script> 
    <script src="scripts/controllers.js"></script> 
    <script src="scripts/services.js"></script> 
<!-- endbuild --> 

</body> 

</html> 

enter image description here

enter image description here

これらは同じフォルダにあります。そして私は "" '"を使用しています。 助けてくれてありがとう!

+0

基本的にmenu.htmlはテンプレートで、index.htmlはヘッダーとフッターです。私はを使ってインデックスにメニューを挿入します –

答えて

1

サーバーで実行してください。それは動作するはずです。インストラクターのようにブラケットを使用します。

何もロードされていないのは、XMLHttpRequestの問題が発生しているため、ブラウザがクロスオリジン要求をロードできないためです。

+0

答えをありがとう!あなたはギャルプ/グラントサーバーを意味しますか?ありがとう。 –

+0

別のスレッドがhttps://www.coursera.org/learn/angular-js/discussions/all/threads/rWCY3qGmEeWF6gpqp4BTmQにあります –

関連する問題