AngularJS Includes: Reusing HTML Like a Pro - FadiZahhar/AngularJs GitHub Wiki

The StartApp Team Embraces DRY Principles

Scene: The Quest for Reusable Components

The StartApp Task Manager app is growing fast. The client says:

“We want the header, footer, and side menu to look the same on every page—but don’t copy-paste the HTML everywhere!”

Lina (Designer): “It’s a pain to change the header in ten places every time the logo updates.”

Mike (Team Lead): “AngularJS has ng-include. It lets us reuse HTML snippets—change once, update everywhere!”

1. The Basics: Using ng-include

Let’s say you have a header in header.html:

<!-- header.html -->
<div class="w3-container w3-blue">
  <h2>StartApp Task Manager</h2>
</div>

Main Page HTML:

<div ng-app>
  <div ng-include="'header.html'"></div>
  <div class="w3-container">
    <p>Welcome to the dashboard!</p>
  </div>
</div>
  • The header file will be loaded and displayed wherever you put ng-include.

2. Reusing Sidebars and Footers

Create a sidebar (sidebar.html):

<!-- sidebar.html -->
<div class="w3-sidebar w3-light-grey w3-bar-block" style="width:150px">
  <a href="#" class="w3-bar-item w3-button">Dashboard</a>
  <a href="#" class="w3-bar-item w3-button">Tasks</a>
  <a href="#" class="w3-bar-item w3-button">Profile</a>
</div>

And a footer (footer.html):

<!-- footer.html -->
<footer class="w3-container w3-dark-grey">
  <p>© 2024 StartApp Team</p>
</footer>

Include them in your main page:

<div ng-app>
  <div ng-include="'header.html'"></div>
  <div ng-include="'sidebar.html'"></div>
  <div class="w3-container" style="margin-left:160px">
    <p>Welcome to the dashboard!</p>
  </div>
  <div ng-include="'footer.html'"></div>
</div>

3. Dynamic Includes (Switch Content)

Sara (Junior Dev): “We can also switch which file to include using an AngularJS variable!”

<select ng-model="view">
  <option value="'about.html'">About</option>
  <option value="'contact.html'">Contact</option>
</select>
<div ng-include="view"></div>
  • The included content updates as the dropdown changes.

4. Using ng-include in Real Projects

  • Keep reusable UI in separate .html files (headers, footers, navs, modals, etc.).
  • Change content once—see updates everywhere.
  • Great for modular design, even before using component-based frameworks.

5. Team Discussion: Why Use AngularJS Includes?

  • Lina: “I only update the header in one file and it’s everywhere—amazing!”
  • Sara: “This makes our code DRY (Don’t Repeat Yourself) and easy to maintain.”
  • Mike: “Clean, modular code means faster updates and fewer bugs.”

6. Full Example: Putting It Together

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AngularJS Includes Example</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="incApp" ng-controller="incCtrl">
  <div ng-include="'header.html'"></div>
  <div class="w3-row">
    <div class="w3-col m2">
      <div ng-include="'sidebar.html'"></div>
    </div>
    <div class="w3-col m10 w3-container">
      <h4>Dashboard</h4>
      <select ng-model="view">
        <option value="'about.html'">About</option>
        <option value="'contact.html'">Contact</option>
      </select>
      <div ng-include="view"></div>
    </div>
  </div>
  <div ng-include="'footer.html'"></div>
</div>
<script>
angular.module('incApp', []).controller('incCtrl', function($scope) {
  $scope.view = "'about.html'";
});
</script>
</body>
</html>

Create header.html, sidebar.html, footer.html, about.html, and contact.html in your project folder.

Key Takeaways

  • ng-include lets you break your app into reusable, maintainable HTML chunks.
  • One change updates every page—no copy-paste headaches.
  • Makes teamwork and updates easier, especially on bigger projects.

Team Conclusion

Mike: “We’re finally DRY, not drowning in duplicate code!”

Lina: “Our UI is consistent and easy to update—let’s ship it!”

Try these examples live in the [W3Schools AngularJS TryIt Editor](https://www.w3schools.com/angular/angular_tryit.asp?filename=tryangular_includes).

⚠️ **GitHub.com Fallback** ⚠️