AngularJS - Part 1

Create AngularJS components – Pt.1

In this article we’ll create an accordion panel in order to understand how to write reusable directives in AngularJS.
The real purpose of the exercise (divided into three steps) is the creation of nested directive and the usage of controllers inside them.

TOPICS

  • create reusable components in AngularJS
  • scope isolation and bidirectional binding (“=”);
  • link function;
  • nested directives
  • use a controller inside directives
  • “required” property

GOAL

The final result (available in the 3rd part of this tutorial) will be creation of a simple Accordion directive that can be used in the following way:

Output (animated gif):
DemoAccordion

FIRST STEP: CREATE A COLLAPSABLE PANEL

The first step of the exercise is the creation of a simple directive to manage a collapsable panel, named xyzPanel.
This component will work as standalone directive but will become part of our accordion directive too, representing one of its panels, usually called accordion groups.

The following is the complete code in a JSFiddle. Use the “Result” Tab to try the demo:

CODE

Since the jsFiddle contains a modified version of the script in order to run in it, you will find the complete source code below with some additional notes.

index.html

The file index.html includes the AngularJS framework, Bootstrap CSS and all the necessary Javascript files.
Whole the application is managed by a controller named AppCtrl and we also add three instances of a custom directive named < xyz-panel >.
Each directive represents a collapsable panel and accept only one parameter: item, that contains its data model.

app.js

This file simply creates the main application module.

controller.js

The controller contains the data model used by the collapsable panels.
Every data model must contains an object with title and content, since they will be used by the directive template to populate the title and the body of the panel.

directive.js

The xyzPanel directive has an isolated scope and accept just one parameter, item, that will support two-way binding, since is marked with the “=” symbol.
It uses a custom template, panel.tpl.html, that represents the layout of the directive and a link function, where we defines the toggle() method.
This method will be called from the directive template when the user clicks on the title of the panel and it will simply set the property opened of the model to true and false, in order to show or hide its body.

templates/panel.tpl.html

The template of the directive is a simple Bootstrap panel.
The toggle() method is called every time the user clicks the header.
The body is shown when the item has the opened property set to true.

VIDEO TUTORIAL (Italian only)

In the following video (available in italian only) I reproduce 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.