Including files in an AngularJS App

Including files in an AngularJS App

September 14, 2015

Including a standard header or other component in Angular is pretty simple. Just use ng-include and you're all set.

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

Simply use the ng-include attribute directly in any element and your include file will plop right in. Inside the quotes, point to the location of your file that your including. The trickiest part is that you need to include single quotes inside the double quotes. This ensures that Angular doesn’t evaluate what you have inside the quotes as an expression. Instead, it will go get that file path and include that file in your view.

Also, you can use includes as an html tag as well and it would look something like this.

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

And, like most Angular directives you can also use this one as a class.

<header class="ng-include:'includes/header.html'"></header>

For all the awesome things Angular does, breaking up your html into modular components using ngInclude doesn’t get that much fanfare. But considering that this sort of thing is usually reserved for server-side code, this is extremely useful to do it right in your javascript framework. This is pretty exciting considering no server-side code is necessary in order to break up your html in to more manageable, reusable components. 🙂

Mastering CSS: Book by Rich Finelli
Mastering CSS, the Book! Flexbox, Layout, Animations, Responsive, Retina, and more!
Mastering CSS, 2nd Edition, video course by Rich Finelli
Mastering CSS, Second Edition: 47 videos on how to make websites like a boss! Flexbox, Animations, Responsive, Retina, and more!
Back to top