ng-include not working for angularJS

Question

I was trying to repeat what was done in angular template at https://www.coursera.org/learn/angular-js/supplement/aVtFp/exercise-instructions-angular-templates. However, something has gone wrong and I couldn't figured out what it is.

It just looks like

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>

and 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>

They are in the same folder. And I am using "''". Thanks for the help!

basically menu.html is the template and index.html is the header and footer. i am using <ng-include src="'menu.html'"></ng-include> to insert menu into index — Suicide Bunny
– Suicide Bunny, Commented Oct 31, 2016 at 3:44

Saif Al Falah · Accepted Answer · 2016-11-04 23:57:32Z

1

Try running it on a server. It should work. Use Brackets like the instructor is doing.

The reason why you're not getting anything loaded is because you are facing an XMLHttpRequest problem, your browser cannot load cross-origin requests.

answered Nov 4, 2016 at 23:57

Saif Al Falah

3585 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Suicide Bunny Over a year ago

Thanks for the answer! You mean the gulp/grunt server?

Suicide Bunny Over a year ago

thanks. i saw another thread at coursera.org/learn/angular-js/discussions/all/threads/…

Collectives™ on Stack Overflow

ng-include not working for angularJS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related