Electronic eyes

Electronic eyes

Fun!

Print angular module dependencies

Here is a simple function to print angular module dependencies:

    angular.__moduleDependencies__ = function (moduleName, indent, nonlast, seen) {
        var module, suffix;
        indent = indent || '';
        seen = seen || [];
        suffix = (indent === '' ? '' : (nonlast ? '├─ ' : '└─ '));
        if (seen.indexOf(moduleName) !== -1) {
            console.log(indent + suffix + moduleName + ' ^');
            return;
        }
        seen.push(moduleName);
        module = angular.module(moduleName);
        if (angular.isDefined(module)) {
            console.log(indent + suffix + moduleName);
            angular.forEach(module.requires, function(requiredModuleName, key){
                var requiredMod = angular.module(requiredModuleName);
                if (angular.isDefined(requiredMod)) {
                    
                    angular.__moduleDependencies__(requiredModuleName,
                        indent + '| ', key < (module.requires.length - 1), seen);
                } else {
                    console.error(indent + requiredModuleName);
                }
            });
        } else {
            console.error(indent + suffix + moduleName);
        }
    };

Usage

angular.__moduleDependencies__('todomvc')

for AngularJS • TodoMVC

Output

todomvc
 | ├─ ngRoute
 | | └─ ng
 | | | └─ ngLocale
 | └─ ngResource
 | | └─ ng ^

POM 360

Checkout the cool implementation of automatic textarea resize in (POM360.js) after:

• Window resize
• Tab change
• Show/Hide of footer

tricks used:

• $(window).resize(fn)
• $rootScope.$on('$stateChangeSuccess', fn() {setTimeout(fn, 0)});
• track show/hide of detail footer

GitHub

Implemented using:

• node webkit
• AngularJS
• UI router
• bootstrap

How to run:

• Download node-webkit
• Download POM360NW.nw
• Run it

> nw POM236NW.nw

NetFlix queue style list reordering using AngularJS

Looking at the code you will see that it was kind of difficult to implement this. I ran into several issues with ng-repeat, it's scope, child isolated scopes and $scope.$broadcast and so on. I will blog about those some other time.

This is implemented a reorder directive (which introduces it's own 'isolate' scope) that must wrap the content inside ng-repeat. The reorder directive itself transcludes [1] the contents. As noted above the reorder directive introduces an 'isolate' scope...which may affect some assumptions made by other included content about the $parent scope. I may have to solve it differently.

In any case, here is the demo:

Plunker

Well, drag and drop reordering is probably a better and direct UI paradigm for this kind of stuff. But this is accessible.

A simple JSON object editor using AngularJS

I want to develop a generic JSON editor, driven by json-schema. In preparation for that I developed a simple AngularJS directive editproperty. This directive lets you edit the object in a single line. Also implemented the new directive editobjectproperty. This displays the object and allows direct editing.

You can play with these directives here:

Note that the object keys are sorted.

This demo does not seem to work on Internet Explorer™ - the reason being IE does not like the directives as elements. May have to convert to directives as attributes.

You can download the implementation of the directive here. The implementation uses '=' (which sets up bi-directional binding) style scope to pass in the object from outer scope into the directive. Here is an excellent video by John Lindquist explaining the '=' scope. It also makes use of the $last variable of the ng-repeat directive to deal with comma formatting. I wish looping structures in all languages had some of these kinds of syntactic sugar such as first, last, non-first, even, odd.

BTW this was an excellent exercise in learning the recursive directive and template behavior of AngularJS.

Plunker

Try out

• Add
• Update
• Remove

use cases.

Well...you will say "What is the big deal? I can edit the JSON object as a simple text much faster"...and you would be right. The power of this will become apparent once I hook it up to JSON-schema. With that the property editor will only allow valid JSON object structure and property values in compliance with JSON-schema. I will be using this to implement Chrome Packaged App Manifest Version 2 Editor App.

I found Jsonary.com which is a similar concept. I will explore writing custom renderers using AngularJS and Twitter Bootstrap.

Todo

• Support object properties
• Support array properties  - partially done. I may have to write a new directive editarray .
• Support direct editing of property name and value in editobject tag
• Dropdown of existing properties to select from to edit or remove

Chrome Packaged App Manifest Version 2 Editor App

Started working on Chrome Packaged App Manifest Version 2 Editor App using AngularJS and Twitter Bootstrap.

Download

One of the cool trick I learned while implementing this is demonstrated by this fiddle. It deals with using AngularJS's ng-repeat with an object, and editing the values of properties of that object within it. It makes a clever use of angular.copy() to isolate input-bound variables.

Todo

• Implement Load and Save using file system API
• Implement complete Manifest Version 2
• Eclipse integration
• [Stretch Goal] Refactor into generic JSON editor...possibly using JSON Schema
• Define manifest version 2 JSON schema.
• Use the schema to implement the editor

TIP: Setting title attributes of option tags of select directive of angularjs

The Desktop App for YouTube™ is implemented using Angularjs. In it I use the select directive like this:

<select id="video-titles" multiple="" ng-model="selectedYouTubeVideoArray" ng-options="youTubeVideo.title for youTubeVideo in youTubeVideos">
</select>

The select directive generates the option tags based on the model. However this means that I cannot set the title attributes of option in the markup. I achieved in the JavaScript like this:

// populate the $scope.youTubeVideos array

$scope.youTubeVideos = [];

angular.forEach(data.data.items, function(item) {

    $scope.youTubeVideos.push(new YouTubeVideo(item));

});

// then loop through the options and set title

setTimeout(function()  {

    var options = document.querySelectorAll("#video-titles option");

    if (options) {

        for (var i = 0; i < options.length; i++) {

            options[i].title = options[i].textContent;

        }

    }

}, 0);

Note however that I had to use the setTimeout(..., 0) to set the title so that Angularjs actually gets the chance to create child option tags.

Hope this helps you!