Asset URL generator using AngularJS

To get experience developing with AngularJS, I came up with a simple application that will dynamically generate asset URLs based on selecting from three drop-down menus. The idea came out of finding a faster way to create custom URLs with query strings for a work client’s product page.

AngularJS was chosen for a few reasons. An AngularJS app can be created quickly, no files to install. AngularJS uses the MVC design principle, which keeps the code organized and easier to debug. The data is separate from the controller functions and formatted as a Javascript object, it thereby can be customized and updated with little effort.

Here is a brief overview of how the asset url generator works:

  • The dropdown menu text and values are loaded from the model data inside the controller using a ‘ng-options’ directive.
  • The generateUrl function dynamically creates a url using the selected values from the three dropdown menus via a ng-model directive.
  • To prevent errors, all three dropdown menus have to be selected in order for the ‘Generate URL’ button to be active. A ‘ng-disabled’ directive was used to accomplish this, by checking if the previous dropdown menu has a value using a data binding.
  • There are two custom filters with the capability to show only dropdown sections and asset names who belong to the same category.

It’s a testament of how powerful a framework AngularJS by using just the basics I was able to create a useful and time-saving app. You can check out the app here.

Matthew Dailey

Web developer, photographer, and Photoshop user.