Simple Github API Webapp – AngularJS Style

betterThis morning I saw a post by Jake Rocheleau on DZone titled Code a Simple Github API Webapp using jQuery & Ajax. Since I’ve been working with the GitHub API lately as well as AngularJS I decided to refactor his code using AngularJS instead of jQuery. I tried to make minimal changes from Jake’s example to make comparison easy.

The results show the power of AngularJS’ data binding and separation of logic and view.  There was no need to manipulate the DOM in Javascript or output HTML from Javascript.

It’s a simple, but very nice example, so the refactor wasn’t very difficult. Removing jQuery and using AngularJS, the initial form, getting the user data and displaying it which is two calls to the GitHub API. One to get the user information and another to get a list of that users repositories.

Using AngularJS

The first step is to remove jQuery and add support for an AngularJS application. This simply requires the removal of the jQuery script include a adding a script tag including AngularJS. Then the AngularJS app needs to be initialized and an empty controller added.

<html ng-app>  Tells AngularJS to be active for this portion of the page, in this case the entire page.

<body ng-controller="GitHubCtrl">  The behavior of content under this element will be managed using the GitHubCtrl class.

The Initial Form

Next we add the <div> section where the initial form is displayed.

The input is bound to the variable named ‘username’. The AngularJS directive ng-click is added to the button, which is just a styled link and set to call getGitInfo() .  Next create the getGitInfo() function inside the controller’s scope.

When the user clicks on the “Pull User Data” button then the getGitInfo() function will be called. We’ll start to populate that in the next section.

Displaying User Information

When the user clicks on the “Pull User Data” button we can use AngularJS’ $http service to call the GitHub API. Using AngularJS’ two way data binding we can bind fields on the page directly into the JSON returned by GitHub. To do that the JSON return is just put into the local scope. Additionally we’ll use the error function to set a variable indicating a user was not found as well as one to indicate data was loaded.

The ng-show directive is used to only show the following section when $scope.loaded is true. The  {{ }} are a declarative way of specifying data binding locations in the HTML. AngularJS will automatically update this text whenever the  user  property changes.

Compare this approach to the jQuery way of doing the same thing.

Displaying The User’s Repos

Again we use AngularJS’ $http.get to retrieve the list of repositories for the user. On success we set the returned data into our $scope and set reposFound to true if the user had any repositories.

Layout is quite simple. ng-hide  and ng-show  are used to either show a message stating no repositories were found or to list them. If there are repositories we just iterate over the list of repos using ng-repeat  and create a <li> for each one.

The jQuery version has no separation of logic and view. All the HTML is output using string and DOM manipulation. The view side of the code is much harder to follow and to manipulate when making changes.

Conclusion

Here’s the original version and the AngularJS version. The AngularJS version is not only shorter it’s much easier to read and has a very nice separation of the view and the controller logic.

Live Demo

As always, full source is on GitHub

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Comments on this entry are closed.