Introduction: angular JS tools angular-smarty and AngularJS that can automatically complete the UI

Introduction: angular JS tools angular-smarty and AngularJS that can automatically complete the UI

We recently added an Automatic completion function (Smarty) for our forum on the homepage asking for a professional profile. This is a very useful feature because it helps us navigate users to what they really want. It is very interesting and also built with AngularJS!

We hope that Smarty can:

1. The user's given input (a prefix) automatically provides suggestions after an HTTP request
2. Display a recommended drop-down list
3. Updated upon user input
4. Fast enough to keep up with user input
5. Navigation is intuitive and can be disabled
6. Reusable

I have no experience in AngularJS in the past. This project is an entry-level project for me to use this framework. It actually became a valuable learning experience, and I found that many aspects of this framework can be used for reference and meet the requirements listed above. Of course, there are still some questions in the learning process!

Fun Of AngularJS

What I like most about Angular is how it is broken down into concepts with clear purposes. Smarty is widely used in two concepts: Directives and Services. Directive and DOM are bound together to manage interaction with elements. Services provide independent reusable logic for Controller and Directive through dependency injection.

Angular provides many built-in direve VE and services. We have used multiple of them in this project.

To display the suggestions (see requirement 2), we use the ngIf and ngRepeat commands to display and fill in the suggestions list with conditions.

To update the recommended content when the user inputs (see requirement 3 ), the ngModel command is used to bind the request for the input element on the $ scope prefix variable to the $ watch method on the Scope in two directions to listen for changes in the prefix.

One thing we need to consider is that the update speed of the Automatic completion function may not keep up with the user's input speed (see requirement 4 ). Because whenever the prefix value changes, Smarty sends an HTTP request (through the built-in $ http Service ). We decided to use $ http's optional configuration parameters ($ http. get (requestUrl, {cache: true}) to cache the results. This is a simple way to improve performance.

We also wrote custom ctive VE and Service to meet our specific needs:

SmartySuggestor Service: smartySuggestor provides a getSmartySuggestions () function that accepts the User-Generated prefix as its parameter and automatically recommends that you access Our backend suggestor Service through an http request. (See requirement 1 ).

SmartyInput Directive: one challenge we face is to define all possible interactions between a user and the drop-down list and write test cases to ensure that during and after development, these functions are complete. We use a Directive (smartyInput) to include all possible interactions between the user and the drop-down list (see requirement 6). At the same time, we use the built-in ng-mouseover and ng-click commands (Directive) to define the interaction between the drop-down list and mouse events.

As I mentioned earlier, one of the challenges we face is to ensure that we do not destroy the possible interaction between all users and the drop-down list. To track these user interactions and ensure that we do not destroy them during development, we use the Jasmine testing framework. Jasmine works with this angular-mocks to help us write test cases containing descriptions for smarty, for example, we can write "the external click should disappear" ("shocould disappear on outside click") for the drop-down list "), you can enter "shocould, on enter, fill with the appropriate value" for the input in the request form ").

Learning Summary

Although the simple and practical AngularJS framework can be easily understood by me, it does take some time to learn. The BIND directive and promise in the isolation scope are two difficult topics in my learning process. When I research the isolation scope, I find that I am very eager to see more examples about how people use different bindings in their projects, so here is an example for each binding type.
=: Bidirectional data binding between local and parent scopes

Controller:
 

$scope.selected = -1;

HTML:
 

<input type="text" smarty-input index="selected">

SmartyInput command:
 

scope: {index: "=", ...}

The SmartyInput bidirectional binding directive binds the selected in the Controller scope to the index in the Command scope, so that the selected index in the index (recommended list) the interaction between the Change result and the command (for example, the user's up/down arrow) in will be propagated to the Controller.

&: One-Way Data Binding between local and parent scopes

Controller:
 

$scope.setSelected = function(newValue) {...};

HTML:
 

<input type="text" smarty-input select="setSelected(x)">

SmartyInput command:
 

scope: {select: "&", ... }...scope.select({"x": parseInt(scope.index) + 1});

The SmartyInput directive binds the setSelected () function in the Controller scope to the select () function in the Command scope, so that the directive can be used without changing the setSelected () function.
@: Bind the computing expression to the local scope

Controller:
 

$scope.prefix = ""

HTML:
 

<div smarty-suggestions prefix="{{prefix}}">

SmartySuggestions directive:
 

scope: {prefix: "@", ...}

The value of prefix can be displayed in the recommended menu through the SmartySuggestions directive. Therefore, the calculated expression {prefix} is used here }}. This binding method is more commonly used in multiple complex expressions, such as: next-index = "{selected + 1 }}".

Promises

Promise is a technology used to execute asynchronous tasks. A promise has a method named then (). This method is used as a parameter of the executed callback function during promise execution. When the asynchronous task is completed, promise will send a message to the callback function. When the changes are detected in the prefix entered by the user, promise will appear in the Smarty code, and then we will use $ http to execute a GET request, used to update the list of suggestions displayed to users.

This process looks like this:

When $ scope. $ watch registers a change in the value of $ scope. prefix (bound to the UI input page), getSmartySuggesction () is called ().
 

var promise = smartySuggestor.getSmartySuggestions($scope.prefix);promise.then(function(data) {  $scope.suggestions = data;});

In getSmartySuggesctions (), $ http. get returns a promise that participates in the server response.
 

function getSmartySuggestions(prefix) {  requestParams["query"] = escape(prefix.toLowerCase());  var promise = $http.get(requestUrl(),    {      params: requestParams,      cache: true    }  ).then(function(response) {    return response.data.slice(0, 5).map(function(item) {      return item.Name;    });  });  return promise;}

The server response looks like this:

[{"ID":13,"Name":"Portrait Photography"},{"ID":24,"Name":"Commercial Photography"},{"ID":21,"Name":"Pet Photography"},{"ID":16,"Name":"Event Photography"},{"ID":26,"Name":"Headshot Photography"}]

Next, we will call the then () method in promise and pass it in the response callback of the parsing server. The then () method returns a new promise, which processes parsed responses and stores them in the promise returned by getSmartySuggestions.

The parsed response looks like this: ["Portrait Photography", "cicial Photography", "Pet Photography", "Event Photography", "Headshot Photography"].

Finally, return to $ scope. $ watch. We call the then () method in promise and assign these resolved responses to the suggestions variable.
 

var promise = smartySuggestor.getSmartySuggestions($scope.prefix);promise.then(function(data) {  $scope.suggestions = data;});