AngularJS ng-include not working

Question

I am trying to learn AngularJS. I have a navigation setup as a view and I cannot get it to display. When I look in the inspector i see .

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>The ToDo List</title>

    <script type="text/javascript" src="assets/js/lib/angular.min.js"></script>
    <script type="text/javascript" src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
    <script type="text/javascript" src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
    <script type="text/javascript" src="assets/js/lib/angular-route.min.js"></script>
    <script type="text/javascript" src="assets/js/lib/angular-animate.min.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/controllers/activetaskscontoller.js"></script>


</head>
<body>
    <div class="navigation" ng-include="views/nav.html"></div>

Here is my app.js

var myApp = angular.module('myApp',
    ['ngRoute', 'firebase', 'appControllers']);

var appControllers = angular.module('appControllers', ['firebase']);

myApp.config(['$routeProvider',function($routeProvider) {
    $routeProvider.
        when('/active-tasks', {
            templareUrl: 'views/active-tasks.html',
            controller: 'ActiveTasksController',
        }).
        when('/completed-tasks', {
            templareUrl: 'views/completed-tasks.html',
            controller: 'CompletedTasksController',
        }).
        otherwise({
            redirectTo: '/active-tasks'
        });
}]);

Try `ng-include="'views/nav.html'"` (notice the additional quotes) — Vucko, Dec 21 '14 at 22:16
@Vucko You are correct! That was easy. If you make it the answer I will mark it correct. Thanks for your help! — dericcain, Dec 21 '14 at 22:18
You can accept @simpe answer, he posted the same thing. Cheers :) — Vucko, Dec 21 '14 at 22:23

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

ng-include is expecting a string and not a path.

Try changing to this:

<div class="navigation" ng-include="'views/nav.html'"></div>

You can read more about the subject here: AngularJS ng-include does not include view unless passed in $scope

edited May 23 '17 at 12:28

Community

1
1

answered Dec 21 '14 at 22:18

simeg

1,889
2
26
34

AngularJS ng-include not working

1 Answers1