AngularJS - part 3

Create AngularJS components – Pt.3

In the last part of the tutorial we’ll complete the exercise in order to cleaned up the index.html file as much as possible.

In detail, we’ll hide the usage of the xyzPanel, moving it from index.html to the template of the xyzAccordion directive.

So far, we have used the directive in this way:

and our goal is the following:

Result

index.html

This file has no changes from the previous version, except for the new way to use the accordion (without ng-repeat)

app.js

controller.js

No differences from previous versions.

directive.js

xyzAccordion now use an HTML template. The rest of the code is the same of the previous version.

accordion.tpl.js

The Accordion template now contains the ng-repeat (previously available in index.html and now moved here).
Anyway, the ng-repeat now use the data property of the directive instead to directly bind the data model of the controller.

panel.tpl.js

No differences.

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.