Creating Modals in AngularJs

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

The implementation:

index.js

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 module.exports declaration.

directive.js

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 index.js.

Something to note is that we are using the slightly different as syntax, using this in favor of $scope.

controller.js

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 <NpsFormOverlay></NpsFormOverlay> tags.

My thoughts:

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.

With this also being a component, I could easily rewrite/test this component using React or any other popular JavaScript or CSS library without affecting the rest of our frontend Angular codebase.