AngularJS Wikipedia Search App – Part One

Build a Wikipedia Search App With AngularJS

Part One – Get Output

In the previous post, I showed how to make unauthenticated API requests to the Wikipedia API.

In this tutorial, I’m going to rebuild the Wikipedia Search App using AngularJS.

Here’s what we’re going to start with:

// app.js

(function(){
  'use strict';

  angular.module('wikipediaApp', [])
  .constant('API_PATH', 'https://en.wikipedia.org/w/api.php')
  .controller('SearchController', SearchController);

  SearchController.$inject = ['$scope', '$http', 'API_PATH'];
  function SearchController($scope, $http, API_PATH){

  }

})();

There are a few things to note.

  • All of the code is wrapped inside a function: (function() {...} )();. This is called an IIFE.

    This is used often in JavaScript, and is recommended to prevent variables being accessed from outside their scope.
  • I’m also using the 'use strict'; directive here.

    Strict Mode will throw errors that would have otherwise been ignored, for example, when declaring global variables.
  • Then we declare the Angular app itself, a constant to hold the base API path, and the controller to handle the logic.
  • With each Angular module, it’s recommended to inject the services and modules that it depends on.

    Dependency injection will protect your Angular app from minification.

    Here, we’re injecting the Angular services $scope and $http, as well as our constant, API_PATH, into our controller.

The HTML

Next we’ll set up the index.html file.

I’ll be using the stylesheet and index file from the Wikipedia App referenced in How the #$@& Do I Use an API?!, with a few modifications.


// index.html

<html ng-app="wikipediaApp">
<head>...</head>
<body ng-controller="SearchController as ctrl">
...

 <div class="search">

  <button id="search" class="btn center-block"
  ng-click="search.state = !search.state">
  Search
  </button>

  <div class="search-container" ng-if="search.state">
   <form>
    <span class="col-xs-10 col-xs-offset-1 form-group">

     <input ng-model="searchTerm"
     id="searchbox" class="searchbox form-control" type="text"
     name="query" placeholder="Search Wikipedia">

    </span>

    <button ng-click="ctrl.search(searchTerm)"
    id="submit" class="fa fa-chevron-right" aria-hidden="true">
    </button>

   </form>
  </div><!-- .search-container -->

  <table class="search-results table table-striped table-hover table-responsive">
   <tbody>

   // Our data will go here

   </tbody>
  </table>
 </div><!-- .search -->

...

<script src="lib/jquery.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>

You can view the full code for the (completed) app here.

  1. First we declare our Angular app wikipediaApp on the opening html tag.
  2. Next we declare the controller, SearchController, on the body tag using Controller As syntax
  3. In the original app, the show/hide of the search box was a jQuery event. Here we’re using the Angular directives ng-click and ng-if for show/hide handling.
  4. We set ng-model=searchTerm on the input box so we can use its content in our Angular app.
  5. Two things here:
    • I replaced the <span> and <i> with <button> so that the search will be triggered by hitting Enter.
    • We set ng-click to call our search function using the text from our input box.

The JavaScript

For the sake of simplicity, I’ll be using jQuery for the actual API call.

In later posts, I’ll cover CORS and cross-origin HTTP requests.

The first goal when writing any code is to simply get output.

This is especially true if you’re learning a new language or skill.

You really don’t want to write a hundred lines of code only to find out that most basic functionality has errors.

It’s always best to work incrementally, breaking down your app or program into its most simple parts.

SearchController.$inject = ['$scope', '$http', 'API_PATH'];
function SearchController($scope, $http, API_PATH){
  this.search = function(){
    $.getJSON(API_PATH + '?action=opensearch&callback=?&suggest=true&search=' + this.searchTerm, function(json){
      console.log(json);
    });
  };
}

I’ve basically copied the jQuery directly from the earlier and modified it to use the text from our input box.

In our HTML, the model is ctrl.searchTerm, so we can reference it from within the controller using this.searchTerm.

Here we are just logging the output to the console.

Type something in, and hit Enter.

You should see output like this:

angularjs wikipedia search app

Yay!

If it didn’t work…then you’re on your own.

(Joking)

I always recommend that if you run into problems to Google that Shit, but feel free to ping me @kimberlythegeek if you have any questions.

[Continued in Part Two]

You can view the code for the (completed) app on my GitHub repository, and a live example on GitHub Pages.

Syntax Highlighting by EnlighterJS

About the Author

Kimberly is a software engineer, and currently works as a Test Engineering Intern for Mozilla.

While she always enjoys learning new technologies, her current focus is python, and when she has free time (she doesn't), Angular & Node.

When not coding, Kimberly spends time with her three young boys in Durango, CO.


One Reply to “AngularJS Wikipedia Search App – Part One”

Comments are closed.