Ellie Crome Ellie Crome - 2 months ago 4
AngularJS Question

AngularJS directives misunderstanding

I am trying to create a basic app with a header & main view, using directives. Initially I had the directive in a separate file, but have moved it into app.js to eliminate a problem.

I have tried a few different things:

  • <app-header>

  • Changing templateUrl to template:"Test header"

  • Chaining the directive and app.directive

My index.html:

<!DOCTYPE html>
<html lang="en" ng-app="simpleLoginApp">

<meta charset="utf-8" />
<title> Simple Login </title>

<div app-header></div>
<main role="main" ng-view></main>

<script src="resources/angular/angular.min.js"></script>
<script src="resources/angular-route/angular-route.js"></script>
<script src="app.js"></script>


My app.js:

var app = angular.module('simpleLoginApp', ['ngRoute'])

.directive('app-header', function() {
return {
templateUrl: '/header/header.html'

.config(['$routeProvider', function($routeProvider) {
.when('/login', {
templateUrl: '/login/login.html',
controller: 'LoginCtrl'




The problem is how you register your directive. When defining a directive, you should use camel case, e.g. appHeader instead of app-header. When using it in a template you should use the dashes as you've done. You can see the documentation here under the Normalization heading

In short change

.directive('app-header', function() {
  return {
    templateUrl: '/header/header.html'


.directive('appHeader', function() {
  return {
    templateUrl: '/header/header.html'