Modals have been a point of contention with me since I first started developing for the web. For the most part, my attempts to write a custom modal have been swallowed up with a magical Bootstrap implementation that includes a little jQuery sprinkled in.
My most recent task was to convert a quick survey pop up into a modal that required me to build that reusable magic on my own.
Our frontend stack at Bloc involves a Rails API and Angular 1.2.x. It is very apparent that Angular 2 is a rethink and refactoring of Angular, which is causing a lot of companies to rethink the way they are implementing Angular.
Knowing this, all new Angular code for Bloc has been sectioned off into a folder called
components, separate pieces of code that could work on their own.
The path to doing this is using Angular Directives to display a reusable modal. The file structure for this directive includes the following files:
NpsOverlayForm/ achievement_nps.gif controller.js directive.js index.js style.css.sass template.html
index.js is the platform to create your Angular module and to be added your in
ng-app-init.js file for easy access in your file structure.
This file includes a call to the directive and exports the entire component as it's own
NpsFormOverlay with the
Similar to the
index.js, the directive collects the work from the controller, stylesheet, and template as it's own and gets required as you recall in the
Something to note is that we are using the slightly different as syntax, using
this in favor of
assets and template.html
Stylesheets and Templates can live inside your directive like a beautiful component. Nothing really different here other than the placement of these files, but just know they live in the directive component and not the normal template and asset folders.
Rendering this wherever
Finally the way to implement this modal directive only requires using the Angular directive syntax of a custom
What I like about this modal implementation is that it mirrors the popularity of Web Components, and this enables us to upgrade portions of our Angular code component by component if need be.