AngularJS - Part 2

Create AngularJS components – Pt.2

In the second part of the tutorial, the xyzPanel directive just created will become a child of a new xyzAccordion directive.

Why? So far every panel was independent. But what should we do in order to manage a group of panels? And more concretely, how can we automatically close all the panels when a new one is opened?

One possible solution is:
wrap all the panels into a new directive that will expose a set of common methods, as show below.

The new accordion directive will simply expose to its children a new method, closeAll(), that will be invoked by xyzPanel before opening a new panel.

CODE

controller.js

First, the data model of the accordion should be an array of objects instead to be three different properties.

This approach has two main advantanges:
1) in index.html: we can avoid to manually create the instances of the xyzPanel directives but we can use an ng-repeat:

2) while an xyzPanel has only access to its own model, the xyzAccordion directive will have the ability to manipulate the whole data set, so it will become the right place where we can close all the panels (since it’s our goal).

index.html

Now xyzPanel is a child of the xyzAccordion directive and it is generated by the usage of an ng-repeat directive.

app.js

directive.js

DETAILS ABOUT xyzPanel DIRECTIVE

The xyzPanel directive has two main differences from the previous version:
1) we use the ‘require‘ property in order to access to all the properties and method of the xyzAccordion directive
2) when the toggle() method is invoked we call the closeAll() method available in the controller of xyzAccordion

What are the symbol “^” and “?” used in the require property?
  • “?”: means that the require is optional (not required). This is necessary in order to still use the xyzPanel as standalone directive although is not a son of an xyzAccordion.
  • “^”: is used to indicated that the required directive can be available in a parent and not only in the HTML element of the xyzPanel
And why do we use” if (ctrl)..” ?

Without this check our application would return an error when the xyzPanel is not a child of an accordion.
So, if we want to continue to use it inside an accordion but as standalone directive too we have to check if the ctrl property has been initialized.

    DETAILS ABOUT xyzAccordion DIRECTIVE

    The accordion simply expose a set of API and properties that every other child can use in order to work with the entire set of data.
    In this simple scenario we only create a closeAll() method that can be called from the children (xyzPanel) to close all the panels.

    panel.tpl.js

    There are no differences from the previous version.

    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.