AngularJS, code.explode, Coding

Localizing Your AngularJS Apps: Update

In my previous article on Localization, Localizing Your AngularJS App, I provided a simple service and filter that allows you to provide language translations based on a translation file. Initially this worked for about 50% of our transalation needs, however once we started looking at the overall performance of our AngualrJS App it was apparent that I needed to tweak things a bit.

Continue reading

Standard
AngularJS, code.explode, Coding

Using Response Interceptors to Show and Hide a Loading Widget: Redux

In my previous post Using Response Interceptors to Show and Hide a Loading Widget I showed how to display a loading widget whenever an Ajax request started and hide it when all the requests completed by using a $http resource interceptor.

Unfortunately, I violated one of the core tenets of AngularJS’ best practices by modifying the DOM outside of a directive. I want to thank everyone who brought that to my attention and provided examples on how to clean up the code.

This post will walk through the revised code to show how to do it properly. I will also provide a second solution, that I think is even better structured, that uses a Publish/Subscribe pattern to encapsulate the whole messaging solution and keep the publishers and subscribers from having to know anything about the notification mechanism.

Continue reading

Standard
AngularJS, Coding

AngularJS Modules for Great Justice

First off I want to thank Joel Hooks of the DFW Area AngularJS Meetup Group for suggesting this topic and providing the title.

“Modules provide an excellent mechanism for cleanly dividing up our code into functional areas. Angular allows us to use modules in many ways. Let’s take a look at modules and some of the approaches we can leverage to produce cleaner more manageable code.” – Joel Hooks

So with that, let’s get started.
Continue reading

Standard
AngularJS, code.explode

Using Response Interceptors to Show and Hide a Loading Widget

AngularJS provides extension points which allow you to intercept responses to http requests before they are handed over to the application code. You can use these extension points to provide global exception handling, authentication, or any other type of pre-processing you might need in your app. In this article I’m going to show you how you can use a response interceptor to turn a loading widget on and off as your http requests are made and completed.

Continue reading

Standard
AngularJS, code.explode, Coding

Mocking Promises in Unit Tests

If you’ve spent some time writing services in AngularJS that front-end Web APIs, you have probably used the $http service. One of the prevalent code patterns that tends to develop involves calling the .then() method on the promise that is returned from the various $http methods. This in effect waits to execute code until the asynchronous request returns and the promise is resolved.

The more complicated the Web API you are interacting with, the more your controller code tends to end up with several bits of code as shown below:

    user.requestCurrentUser().then(function() {
        $scope.currentUser = user.getCurrentUser();
    });

Testing this code can be a bit problemsome for newcomers to AngularJS. This article shows a simple way to mock your services to provide similar functionality so you can unit test your controllers that contain these type of code patterns.

Continue reading

Standard
AngularJS, code.explode, Coding

What Led Me to AngularJS

I am sure many of you reading this come from an ASP.NET background or are familiar with how ASP.NET web apps work with the constant post back to the server to update data, process it and redirect the user to the next step of the process. It has worked for the past 10 years and it has worked well. But, there are better ways to interact with the server and update the user.

The growth of JavaScript, jQuery and frameworks such as Backbone, Knockout, and Ember have done an enormous amount for improving client side interaction and asynchronous communications with the business logic back-end.

That is where the app I’m maintaining is, we use ASP.NET REST based services with jQuery to manage user interaction and communicate with the back end. It works and its performance is OK, but it’s not great and it really doesn’t take advantage of today’s browser capabilities.

Continue reading

Standard
AngularJS, code.explode, Coding

Localizing Your AngularJS App

Overview

If you plan on being in the Web App development business for any amount of time, sooner or later you are going to be faced with building an app that supports multiple languages. When this time comes you’ll be faced with the localization challenge that so many developers before you have faced.

To solve this challenge some developers have built entire localization frameworks and libraries, while others have resorted to re-creating their entire site in the desired language and redirecting users based on their browser culture.

In this article, I’ll show you an easy way to use an AngularJS Service and Filter to pull localized strings from a resource file and populate the page content based on the user’s browser culture.

Continue reading

Standard
AngularJS, code.explode, Coding

Creating a Simple AngularJS Directive

One of the core features of AngularJS is the ability to extend the HTML Syntax with directives. Directives allow you to componentize segments of HTML into a single tag that can be re-used throughout your AngularJS app. So instead of repeating the following HTML all over your code:

    <div class="row-fluid" ng-repeat="adjunct in adjuncts | filter:search | orderBy:'name'">
        <div class="span1">{{adjunct.Name}}</div>
        <div class="span1">{{adjunct.Type}}</div>
        <div class="span1">{{adjunct.Use}}</div>
        <div class="span1">{{adjunct.Time}}</div>
        <div class="span1">{{adjunct.Amount}}</div>
        <div class="span1">{{adjunct.UseFor}}</div>
        <div class="span1">{{adjunct.Notes}}</div>
        <div><a href="#/editadjunct/{{adjunct._id.$oid}}"><i class="icon-pencil"></i></a></div>
    </div>

With a directive you can use the following HTML:

    <div data-display-adjunct class="row-fluid" ng-repeat="adjunct in adjuncts | filter:search | orderBy:'name'">

Now anywhere where you would use the above HTML, you can use the directive instead and be consistent across you entire site. This also saves you time when changes are required. If the amount of data that needs to be displayed changes you only need to update the directive and your done. You don’t have to hunt around your HTML files looking for every occurrence to change.

Directives allow you to not only specify what data from your app to bind to, but they can also handle the work of transforming the data into different formats, removing that responsibility from your controller, helping you to keep to the single responsibility principle.

If you apply this simple principle on bigger scales, directives can be used to build rich components that bind to your app’s data and reduce the amount of HTML you need to create across your entire site.

In this article, I’m going to show you how to write a simple directive that generates an image tag with a user’s avatar from the Gravatar site, http://en.gravatar.com/

Continue reading

Standard
Raspberry Pi
Early Adopter

The RaspberryPi Single Board Computer for only $35?

I was watching my weekly geek fest videos when on The Ben Heck Show comes a commercial for a new credit card sized computer called the Raspberry Pi that was developed using a Broadcom  BCM2835 System-On Chip running Linux. Below are the specifications for the board:

Raspberry Pi

 

Raspberry Pi Linux Specs

  • SoC Broadcom BCM2835 (CPU, GPU, DSP, and SDRAM)
  • CPU: 700 MHz ARM1176JZF-S core (ARM11 family)
  • GPU: Broadcom VideoCore IV, OpenGL ES 2.0, 1080p30 h.264/MPEG-4 AVC high-profile decoder
  • Memory (SDRAM): 256 Megabytes (MiB)
  • Video outputs: Composite RCA, HDMI
  • Audio outputs: 3.5 mm jack, HDMI
  • Onboard storage: SD, MMC, SDIO card slot
  • 10/100 Ethernet RJ45 onboard network
  • Storage via SD/ MMC/ SDIO card slot

What is amazing is that this board looks to have enough power to do full 108op playback. The team over at OpenELEC have already ported a version of thier software to the device and the video demonstration looks amazing!

Granted the device does not have a lot of memory so you’re not going to be running games on it or using it to do massive computing tasks, but I thik the Raspberry Pi Foundation has come up with the perfect general purpose computer that can be used in all sorts of consumer devices. Add a large enough SD Card, an enclosure, a phone charger and a bluetooth adapter and you have the makings of a set top box for well under $100.

So in the spirit of being on the leading edge of technology, I’ve pre-order one to give it a spin and see just what it’s capable of. I’ll post more once I get the device in.

In the meantime if your curious you can check the Raspberry Pi out at http://www.element14.com/community/groups/raspberry-pi?ICID=hp_raspberry

Standard
GuruPlug Kit
Early Adopter, Lifestyle

A $100 Brick?

Yesterday I received my new GuruPlug Server from GlobalScale Technologies and being the “Head First” type of person I am, I went out to their wiki and started running through their “Newbie Getting Started Instructions” and promptly bricked my device!

It turns out that the “Newbie Getting Started Instructions” were for a totally different device with a totally different Linux distribution. So now I’m faced with waiting for GlobalScale Technologies to send me their JTag Serial adapter so I can re-flash the device back to it’s factory settings and start all over again!

Continue reading

Standard