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
– Vucko, Commented Dec 21, 2014 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
– dericcain, Commented Dec 21, 2014 at 22:18
You can accept @simpe answer, he posted the same thing. Cheers :) — Vucko
– Vucko, Commented Dec 21, 2014 at 22:23

Community · Accepted Answer · 2017-05-23 12:28:27Z

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, 2017 at 12:28

CommunityBot

11 silver badge

answered Dec 21, 2014 at 22:18

simeg

1,8792 gold badges27 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

AngularJS ng-include not working

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related