I am currently working on a new app that includes both a header and main view, utilizing directives. At first, I had the directive in its own file but decided to relocate it into app.js in order to resolve an issue.
Throughout this process, I have experimented with several approaches:
<app-header>&<div=app-header>- Modifying templateUrl to template:"Test header"
- Linking the directive and app.directive together
This is what my index.html looks like:
<!DOCTYPE html>
<html lang="en" ng-app="simpleLoginApp">
<head>
<meta charset="utf-8" />
<title> Simple Login </title>
</head>
<body>
<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>
</body>
</html>
Here is a snippet from my app.js:
var app = angular.module('simpleLoginApp', ['ngRoute'])
.directive('app-header', function() {
return {
templateUrl: '/header/header.html'
};
})
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: '/login/login.html',
controller: 'LoginCtrl'
})
}]);
Lastly, here's a look at the contents of header.html:
<header>
<h1>HEADER</h1>
</header>