AngularJS directives – the basics

This snippet show you how to split an HTML file in multiple components using AngularJS directives.

Basically we want to obtain a clean HTML with only two components: a navbar and a profile-panel:

The result is the following output:
angularjs-directive-basics-result

INITIAL CODE

The initial source code we have to split in directives is the following:

index.html

app.js

controller.js

FINAL SOURCE CODE

And that’s the final source code in which we split the original HTML in two main directives.

index.html

directive.js

templates/navbar.tpl.html

templates/profile.tpl.html

Note: app.js and controller.js are not changed!

VIDEO TUTORIAL (Italian only)

In the following video (available in italian only) you can see all the necessary steps in order to complete the exercise.


Fabio Biondi

I am an italian developer with over 10+ years of experience in developing custom user interfaces and interactive applications for any screen and device using the latest web technologies - HTML5, SVG, Canvas, ES2015, CSS3 - the latest libraries - React, AngularJS, D3.js, CreateJS - and many other tools - Gulp, WebPack, LESS/SASS but also Sketch, Balsamiq, PS and AI.