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