CODEWITHSUNDEEP
angularjsangularjs-ng-include
Jason Spick
Jason Spick

Reputation: 6088

Why is ng-include not showing anything?

I have an index file that is using ng-include to bring in the header. here is my index file:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>{{page.title}}</title>
        <link rel="stylesheet" href="../dist/libs/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="../dist/libs/bootstrap/dist/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="../dist/libs/animate.css/animate.min.css">
        <link rel="stylesheet" href="../dist/libs/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../dist/styles/style.min.css">
        <script src="../dist/libs/jquery/dist/jquery.min.map"></script>
        <script src="../dist/libs/bootstrap/dist/js/bootstrap.min.map"></script>
        <script src="../dist/libs/angular/angular.min.js"></script>
        <script src="../dist/libs/angular-route/angular-route.min.js"></script>

        <script src="../dist/js/controllers.min.js"></script>
        <script src="../dist/js/routes.min.js"></script>
        <script src="../dist/js/app.min.js"></script>
    </head>
    <body ng-app="praxis">
        <div ng-include="partials/header.html"></div>
        <div ng-view></div>
    </body>
</html>

I am not getting any errors and my controller is loading my ng-view.

here is the header file:

<div id="preloader">
    <div id="status"> </div>
</div>
<div id="sb-site">
    <div class="boxed">
        <header id="header-full-top" class="hidden-xs header-full">
            <div class="container">
                <div class="header-full-title">
                    <h1 class="animated fadeInRight">Code<span>.<strong>Praxis</strong></span></h1>
                </div>
            </div>
        </header>
    </div>
</div>

does the path need to based off of where the app is running or where the index file is located?

Upvotes: 3

Views: 8002

Answers (3)

Mukund Kumar
Mukund Kumar

Reputation: 23181

ng-include evaluates angular expression to URL. If the source is a string constant, make sure you wrap it in single quotes, e.g. src="'myPartialTemplate.html'" so your code should be:

<div ng-include="'partials/header.html'"></div>

see in detail

Upvotes: 1

user3592436
user3592436

Reputation: 461

I think you must write it like this:

<div ng-include src="'partials/header.html'"></div>

With the src attribute.

Upvotes: 0

dfsq
dfsq

Reputation: 193251

You should provide a string in your case, note single quotes around filepath:

<div ng-include="'partials/header.html'"></div>

From documentation:

angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in single quotes, e.g. src="'myPartialTemplate.html'".

Upvotes: 8

Related Questions