A single-page tribute to Chris Cornell, covering Soundgarden, Temple of the Dog, Audioslave, and his solo work — built to practice AngularJS custom directives.
Note
Archived and no longer maintained, kept as a record of the work. Unlike the other projects from this era, it calls no third-party data API, so it still renders as built. The embedded YouTube players depend on those videos remaining available.
The whole page is one repeated custom directive. bandController holds an array
of four band objects — description, pull quote, album list, image, and an
embedded video — and index.html repeats a <bands> element over it:
<bands ng-repeat="info in band" info="info"></bands>js/directives/bands.js declares the directive as element-restricted with an
isolate scope (info: '=') and points at js/directives/bands.html for the
template. Each section on the page is that one template rendered against a
different object — adding a band means adding an array entry, not writing markup.
Video URLs run through $sce.trustAsResourceUrl in the controller, since
Angular's contextual escaping otherwise blocks an interpolated iframe src.
| File | Role |
|---|---|
js/app.js |
Module definition |
js/controllers/bandController.js |
The band data |
js/directives/bands.js |
Directive definition |
js/directives/bands.html |
Per-band template |
stylesheet.less / .css |
Styles (LESS source and compiled output) |
Built with AngularJS 1.6.6, Bootstrap 3.3.7, and jQuery 3.2.1 (CDN).
No build step. Serve the folder — file:// won't work, because the directive
fetches its template over HTTP:
python3 -m http.server 8000 # then open http://localhost:8000Kept as-is rather than modernized. Linked from the archived version of my original portfolio; my current portfolio is here.