My first steps with AngularJS

angularjsWe need a composition layer for the GUI. It should combine the data from multiple services into one interactive web page. AngularJs comes to mind.

As a proof of concept I decided to create a simple web page. The page requests data from a REST service and displays this in a type-ahead search box. Below is the code I created.

<div class="container body-content" ng-app="searchdemo">
   <div class="container-fluid" ng-controller="TypeaheadCtrl">
       <h4>Search</h4>
       <input type="text"
              ng-model="selectedVariable"
              placeholder="search for variable"
              uib-typeahead="var as var.Name for var in variables($viewValue)" 
              typeahead-loading="loading" 
              typeahead-no-results="noResults" 
              typeahead-min-length="3"
              class="form-control"/>
       <i ng-show="loading" class="glyphicon glyphicon-refresh"></i>
       <div ng-show="noResults">
          <i class="glyphicon glyphicon-remove"></i> No Results Found
       </div>
   </div>
</div>

The angular controller seemed to work, but no type-ahead.

Robbert looked at my code, hummed, clicked with the mouse and pointed me in the right direction. We changed the handler for the $http.get from “success” to “then”, because of the “promise” pattern (thanks Robbert)

angular.module('searchdemo', ['ui.bootstrap'])
       .controller('TypeaheadCtrl', function ($scope, $http) {
          $scope.result = new Array ({ Name : 'test' });
          $scope.variables = function (filter) {
             return $http.get("http://localhost:2305/api/relatie/" + filter)
                .then(function (response) {
                   console.debug("response received ", response);
                   return response.data;
                });
    };
});

Looks like I’ll be diving deeper into AngularJs the next days. Good times ahead 😉

About erictummers

My work as a recruited developer changes almost every month. I like challenges and sharing the solutions with others. On my blog I’ll mostly post about my work, but expect an occasional home project, productivity tip and tooling review.
This entry was posted in Development and tagged . Bookmark the permalink.

2 Responses to My first steps with AngularJS

  1. jokelab says:

    No problem 😉

    Date: Mon, 7 Dec 2015 16:03:16 +0000 To: jokelab@hotmail.com

  2. Pingback: Multiple service calls as data for AngularJs | .NET Development by Eric

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s