The JavaScript blog.


ui angular react react-native

Angular Grid, React Native Introduction

Posted on .

Angular Grid

Angular Gird

Niall Crosby sent in Angular Grid (GitHub: ceolter/angular-grid, License: MIT), a library for managing tables of data with Angular. It supports sorting, filtering, column resizing, CSS themes, and search. There's even an example that extends the cell renderer to show a file browser view.

Like other data tables, you can specify the columns with JSON and then fetch JSON data from the server to populate the table. Here's a short Angular example that uses $http to fetch the JSON:

module.controller('tableController', function($scope, $http) {  
  var columnDefs = [
    { displayName: 'Athlete', field: 'athlete', width: 150 },
    { displayName: 'Age', field: 'age', width: 90 },
    { displayName: 'Country', field: 'country', width: 120 },
    { displayName: 'Year', field: 'year', width: 90 },
    { displayName: 'Total', field: 'total', width: 100}

  $scope.gridOptions = {
    columnDefs: columnDefs,
    rowData: []

      $scope.gridOptions.rowData = res.data;

There are more examples available in the documentation for Angular Grid.

React Native Introduction Tutorial

John Wu has written an introduction to using React Native with iOS apps. It includes details on how to use it with CocoaPods, and how to wire up the JavaScript view code.

If you're new to Objective-C and just want to get React Native up and running, then this should help because it walks through all of the necessary setup details. Installing CocoaPods isn't too hard (it's an Objective-C package manager), so as long as you can compile and run basic iOS apps you should be good to go. There's also a sample application on GitHub.


angular typescript

Angular 2 and TypeScript, Comparing Angular 1.x and 2.0

Posted on .

Angular 2 is Built on TypeScript

There's a post on the msdn blog that says Angular 2.0 is built with TypeScript. This is a big step, but there is a precedent for it -- an earlier Angular blog post mentioned the AtScript project that resulted in a collaboration between Microsoft and the Angular team.

This partnership has been very productive and rewarding experience for us, and as part of this collaboration, we're happy to announce that Angular 2 will now be built with TypeScript. We're looking forward to seeing what people will be able to do with these new tools and continuing to work with the Angular team to improve the experience for Angular developers.

Now AtScript development has been abandoned in favour of TypeScript, what does this mean for Angular developers? There's a TodoMVC TypeScript Angular 2.0 example project on GitHub, which uses JavaScript for the main code. To use it, you'll need to download the new Angular 2.0 code separately.

Hopefully this shift will result in a more future-proof Angular, but it's hard to tell if switching to TypeScript now is a good idea, given the interest in ES6 and ES7.

Comparing Angular 1.x and 2.0

In case you're excited/worried/apathetic about the previous news, Shawn McKay sent in a post that compares angular 2.0 with 1.x:

Angular 2.0 looks fantastic. It's not ready yet, but you can play around with it today. Checkout the GitHub for more. There are also some examples available, such as ng2do.

The post explains how to set up Angular 2.0 and outlines the major new features. If you're also working with React, then you might want to read more about the new DOM handling:

"2.0: In many ways, Angular 2.0 seems to handle DOM style manipulation with something similar to React.js's virtual DOM, which they referred to in a recent presentation as the "view". In response to a recent question about 'Angular Native?', Misko mentioned that this View could be run on a web worker or even potentially on native."


libraries browser modules websockets authentication angular

angular-oauth2, angular-websocket

Posted on .


angular-oauth2 (GitHub: seegno/angular-oauth2, License: MIT, npm: angular-oauth2, Bower: angular-oauth2) by Rui Silva at Seegno is an AngularJS OAuth2 client module that uses ES6 internally. The author has kindly released it on npm and Bower, so it should be easy to quickly try it out.

To use it, you have to configure OAuthProvider with the server's base URL, and then the client ID and secret. Then you can request access and refresh tokens as required. The error handling is nice because you can hook into error events on $rootScope.$on('oauth:error'.

I've written a few browser extensions that use OAuth, and this seems ideal for that kind of work. It will also be useful for your Angular single page web apps.


PatrickJS (Patrick Stapleton) sent in angular-websocket (GitHub: gdi2290/angular-websocket, License: MIT, npm: angular-websocket, Bower: angular-websocket), which is a WebSocket library for AngularJS 1.x. It works by providing a factory, $websocket, that you can use to stream data between the server and your Angular app.

The API is modeled around the standard WebSocket API:

angular.module('YOUR_APP', [  
  'ngWebSocket' // you may also use 'angular-websocket' if you prefer
//                          WebSocket works as well
.factory('MyData', function($websocket) {
  // Open a WebSocket connection
  var dataStream = $websocket('wss://website.com/data');

  var collection = [];

  dataStream.onMessage(function(message.data) {

  var methods = {
    collection: collection,
    get: function() {
      dataStream.send(JSON.stringify({ action: 'get' }));

  return methods;
.controller('SomeController', function(MyData) {
  $scope.MyData = MyData;

In this example you would use MyData in the corresponding markup. Patrick's example uses ng-repeat to iterate over the data.

The project includes browser tests and a build script. It doesn't have any fallback for browsers that don't support WebSockets, so it's a pure WebSocket module rather than something like Socket.IO.


libraries testing angular scripts

ngTestHarness, call-n-times, modern.IE Automation

Posted on .


David Posin sent in ngTestHarness, a test harness for Angular scopes, controllers, and providers. It helps to reduce the amount of boilerplate needed for dependency injection during testing.

By default it loads the ng, ngMock, and ngSanitize modules. By using the ngHarness API, tests can be as simple as:

describe('Test the note-editor directive', function() {  
  var harness = new ngHarness(['noteEditor']);

  it('Adds the container div', function() {
    expect(harness.compileElement('<my-note></my-note>').html()).toBe('<div class="editor-container"></div>');

The ngHarness object manages the required dependency injections for each test context. The API documentation covers the ngTestHarness class and each method that it implements.

David notes that the project was the result of work at Team Titan at Gaikai, owned by Sony Entertainment.


call-n-times by Shahar Or (GitHub: mightyiam/call-n-times, License: MIT, npm: call-n-times) came about when the author was trying to make test code cleaner. Given a function, this module will synchronously run it the specified number of times:

var assert = require('assert');  
var call = require('call-n-times');

function logAndReturn() {  
  return 'foo';

var returns = call(logAndReturn, 3);  
assert.equal(returns.length, 3);  
assert.equal(returns[0], 'foo');  

Shahar wondered if there's a built-in JavaScript way to do this, something closer to how it would work if you used an array and forEach. Does anyone know?

modern.IE, VirtualBox, Selenium

I expect many readers use modern.IE for testing. Wouldn't it be nice if you could quickly create new instances so you can trash old ones, or use them as part of a test suite? Denis Suckau sent in a script called mkvm.sh (License: MIT) for automatically creating VirtualBox virtual machines with Modern IE Windows images. It's a shell script that supports various configuration options, like the Selenium and Java environmental variables, VM memory usage, and so on.

The readme has details on how to configure it, and the background behind the project:

As the modern.ie-Machines refuses to run more than 30-90 Days (at least for more than an hour) we remove the machines on a regular basis and recreate the original Appliance with all changes needed to run Selenium.

Use it with your favored test runner (maybe Karma or Nightwatch.js) to automate JavaScript tests in real browsers on your own Selenium Grid. Other WebDriver language bindings (Python, Java) should work as well.

If you wanted to install IE 6, then you could run mkvm.sh VMs/IE6\ -\ WinXP.ova. It also supports deleting a VM, so you can delete and recreate IE 6 with mkvm.sh VMs/IE6\ -\ WinXP.ova --delete "IE6 - WinXP".


games angular firebase

Wordchain: An AngularJS/Firebase Word Game

Posted on .


Wordchain (GitHub: sonnylazuardi / wordchain, License: MIT) by Sonny Lazuardi is a multiplayer word game made with Firebase, AngularJS, the Google Dictionary API, and the Wikitionary API. It allows you to sign in with Facebook, and complete words in a crossword-like manner.

The code is all modular, dependency-injected Angular classes, so it's fairly easy to see how it fits together. The main game logic is in js/controllers.js. Here's the dictionary API search:

$scope.search = function() {
  $.get('https://www.googleapis.com/scribe/v1/research?key=AIzaSyDqVYORLCUXxSv7zneerIgC2UYMnxvPeqQ&dataset=dictionary&dictionaryLanguage=en&query='+$scope.word, function(data) {
    $scope.definitions = data.data[0].dictionary.definitionData;
  }, 'jsonp');

The readme has some details on running it locally, once you've got set up with Firebase.