Discitur Project

Among the many positive aspects of this sprint, one of those that has increased my appreciation of Angular framework more than others was the creation of a textbox with autocomplete feature. Schematizing brutally the feature flow, I can identify four main steps:

1. The user begins to type the letters of the required field

2. to each letter entered a request is made to a search service

3. the search service returns the JSON object values ​​that contain the letters entered

4. the array of returned data values ​​is rendered as a combobox

 

The functionality, even if small, is a vertical component that runs through all layers of the architecture. In the framework with which we normally work (ASP.NET Web Forms, Custom Web Architectures, or in the past JSP, JSF), this component can be quite complicated to implement. This type of functionality, seemingly simple and quite complex in practice, are the typical “traitor” features: they are usually underestimaded because we do not enter so deep in detail, in the estimation phase (at least the first few times ) and punctually the “burned” is definitely higher than the “earned”.

In Angular + WebAPI , realize the feature was instead very simple. Here are the steps in detail:  

1) Use of Angular-ui Bootstrap

In Angular Bootstrap library exists a component (directive) for rendering this feature: the Typeahead.

the component can be configured for binding promises, as result of backend service (common $http or $resource). here an example:

 

The controller contains the fields for linked object model and the methods to call server-side service:

 

2) Use of standard Angular Service for calling server-side service

Nothing new. Cleaning the code, remains:

 

2) WebApi 2 + Entity Framework 6

The realization of this service was … simple:

4) Bootstrap Theming (to complete)

For rendering and the final effect I’m leaning to one of the available themes Bootstrap 3. The effect is very pleasant:

In this component everything was pretty easy (unsurprisingly). Surely the Angular Bootstrap directive has the most important role because it does most of the work. Who develops a bit knows that it is better to try to find what we need, if someone else has already done it (better) before us.

Don’t reinvent the wheel Americans say.