Using AngularJS to Develop Copper Cable Configurator

The client of vteam #167 is working as a technology reseller, providing fiber and component resale solutions to their customers. In order to quote the specs and cost of different types of cables to their customers the client is already using a web based custom configurator tool.

Previous configurators were capable of handling Fiber and MTP items. A few months back the need arose to build a similar tool that would be able to handle copper cable items as well. The requirements of the tool were as follows:

  • Front-end compatibility with current configurator tools
  • UI area with options matrix to view lists of all available categories under component settings
  • Item list UI with a range of items available in all lengths
  • Stock indicator for all vendors associated with items
  • Common cart, for adding items, which should work with previous configurators
  • Pricing and cost calculators based on specific customers receiving quotes
  • Item search filters for specific categories

To implement the mentioned requirements, vteam #167 decided to use AngularJS for front-end manipulation with a custom PHP MVC structure. vteams engineers (Ali Khan and Basit Munir) kept the front-end simple and avoided any server side embedded scripts. They also Implemented a two way data binding (Server Front-end) using AngularJS place holders and directives. These Angular controllers were used with JSON communication model and integrated with server side business logics (custom PHP). Adjustments were then made to the previous configurator’s pricing and cart engine to manage copper items within the same cart. Finally the developers integrated local database inventory settings with Netsuite CRM.


Following the addition of the newly developed configurator module the client was able to quote the complete range of copper cable items to their customers, combined with Fiber and MTP items as well. This feature was moved to the live server after testing.