CODEWITHSUNDEEP
phpangularjsangularjs-ng-include
Sunil Pachlangia
Sunil Pachlangia

Reputation: 2061

How to add header on every page in Angular js

I'm trying to include an html page (like header), but I can't get the include to work. I want to create a page like header and footer, and want these pages to include on every html page in application just like we do in PHP. We create a page and include it using include or require.

Like if i have these lines of code 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular Demo</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css.map">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src="js/jquery-2.1.4.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
</head>

Now i want to include these line on every HTML page.I don't want to write these lines on every page.

Is it possible to do this in Angular js using ng-include or something else.

I have tried this

<div ng-include src="'include/header.html'"></div>

If i use ng-include it only include some piece of code in div. But how can i use it like header and footer to include on every page.

Upvotes: 2

Views: 4000

Answers (3)

awimley
awimley

Reputation: 712

Generally angularJS handles this kind of behavior with directives. Example header directive HTML:

<div id="banner" class="page-header">
  <div class="row text-center">
    <div class="col-lg-10"></div>
    <h3> {{ content.title }} </h3>
    <small>{{ content.strapline }}</small>
  </div>
</div>

Example header directive javascript file: 

(function () {
  angular
    .module('flightApp')
    .directive('pageHeader', pageHeader);

  function pageHeader () {
    return {
      restrict: 'EA',
      scope: {
        content : '=content' 
      },
      templateUrl: '/common/directives/pageHeader/pageHeader.template.html'
    };
  }
})();

You need to include this in your index file. You don't need to include the HTML, the JS in the directive will reference your HTML file, so just add this to your index.html: 

<script src="/common/directives/pageHeader/pageHeader.directive.js"></script>

I'm passing in the content attribute on html. This can be bound to parent scope variables like this: 

<page-header content="vm.header"></page-header>

Where in your parent controller you define the vm.header variable: 

vm.header = {
      title : 'Flight App (angular edition!)',
      strapline: ''
    };

And now you have a reusable generic header element! You can define headers or footers this way in a single line, and you can make the content vary based on where the directive is and what is using it. If you have any issues using this, just let me know. Directives are somewhat confusing at first but become a very powerful tool when you get familiar with AngularJS.

Upvotes: 0

ArslanW
ArslanW

Reputation: 353

Try ng-view and routeProvider to populate the ng-view. As shown here:

http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/

So in general what will happen is that you will have a index.html it will have some static part and some dynamic html part of the code. The static part will be your header and footer and the dynamic part will be controlled by the ng-view and routeProvider.

The static part will remain the same throughout every page.

Upvotes: 1

Aaron
Aaron

Reputation: 24812

For general templating you should use ngRoute & ngView : have an html page laying your base site include a view that ngRoute populates with specific content depending on the url.

Upvotes: 1

Related Questions