0

I am trying to set a header across all my pages, I am using AngularJS here is my current setup:

In my html I have:

 <html ng-app="webApp">
<script src="/vendor/angular.min.js"></script>
<script src="/controller.js"></script>

<head>
    <title>Home</title>
</head>

<body>
    <!-- Header -->
    <div ng-controller="HeaderCtrl">
        <div ng-include src="header.url"></div>
        <script type="text/ng-template" id="header.html"></script>
    </div>
    <!-- /Header -->

for my controller I have this:

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

function HeaderCtrl($scope) {
    $scope.header = {name: "header.html", url: "/assets/headerFooter/header.html"};
}

but it keeps saying that my HeaderCtrl is not defined and it is not a function. I am fairly new at Angular so I am kind of confused on why is doesn't seem to want to work for me. I used this question as reference to get an idea setup: How to have a common header shared by all webpages in AngularJS?

Maybe I am misreading it and it's just obvious to me right now since I am very very tired. Just wanted to get this working before bed...

Thanks ahead of time.

Community
  • 1
  • 1
dhershman
  • 341
  • 2
  • 12

1 Answers1

0

Its because your angular module 'webApp' does not know of the controller 'HeaderCtrl'. You will need to add this

webApp.controller('HeaderCtrl', HeaderCtrl);

Example: http://jsfiddle.net/h2mku6L2/1/

Note: I commented out some parts since i dont have header.html file. It should be safe to uncomment the JS & HTML

RSquared
  • 1,168
  • 9
  • 19