Category Archives: Javascript

The roles of AngularJS and Polymer

The roles of AngularJS and Polymer

Labels: angularjs, clientjs, dev, javascript, polymer, webcomponents

A key feature of AngularJS 2.0 is its support for Web Components [1]. Google’s Polymer is a Web Component polyfill (enabling them on all current browsers) and a framework on top of Web Components. This blog post describes how the Angular team sees the roles of AngularJS and Polymer.

via The roles of AngularJS and Polymer.

Debugging AngularJS Apps from the Console

We can access any scope even isolated ones! on the page with a simple JS one-liner:
angular.elementtargetNode.scope-> ChildScope {$id: “005″, this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}

Or for isolated scopes:
angular.elementtargetNode.isolateScope-> Scope {$id: “009″, $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}

Where targetNode is a reference to an HTML Node. You can grab one easily using document.querySelector.

via Debugging AngularJS Apps from the Console.

ExtJS and ColdFusion – grid paging only displays some pages, no error?

Ran into this problem the other day working up an ExtJS (v3.2.2) grid with a CF backend. As a database developer I immediately suspected problems with some of the data coming back and yet vgrepping the post response body in firebug wasn’t revealing it for me. I did notice that on good pages firebug would give me a JSON tab and on pages that would not render I didn’t get that (lightbulb going on!).

While googling around on this I did come across a nice JSON test site at http://www.jsonlint.com that will validate your JSON content and suggest reasons why it fails – sweet. Also, reread http://json.orgwhile I was at it – always a good time. The latter did help me clean up the CF code based JSON parsing that I was doing.

Finally, the solution was to write a little function to clean up illegal characters in some of my data columns that were causing the failures. Here’s the code, include it either in the page where you need it, or in application.cfc to have it available at all times. It does not handle all use cases but covered the bases for what I needed – see json.org for additional ideas.

// Takes a string and returns a valid JSON string
function JSONStringFix(str) {
var retStr = str;
retStr=replace(retStr,CHR(10),"n","All");
retStr=replace(retStr,"","\","All");
retStr=replace(retStr,'"','"',"All");
retStr=replace(retStr,"'","'","All");
Return retStr;
}

Here’s a snippet of using the function in a code block building up a JSON string/record to return clean data to the grid.

"someColumnName": "#JSONStringFix(qSomeQuery.someColumnName)#"

Dynamically Loading Controllers and Views with AngularJS and RequireJS – Dan Wahlin

Dynamically Loading Controllers and Views with AngularJS and RequireJS

via Dynamically Loading Controllers and Views with AngularJS and RequireJS – Dan Wahlin.

Excellent overview of an approach based on convention over configuration for lazy loading of AngularJS controllers (and potentially other artifacts as well).  I have been wrestling with this problem and this post is very complete and well explained.  Thanks Dan.

PS – why is it that you always find the thing in the last place you look? :-)

Isomorphic JavaScript: The Future of Web Apps – Airbnb Engineering

A Hybrid Approach

At the end of the day, we really want a hybrid of the new and old approaches: we want to serve fully-formed HTML from the server for performance and SEO, but we want the speed and flexibility of client-side application logic.

To this end, we’ve been experimenting at Airbnb with “Isomorphic JavaScript” apps, which are JavaScript applications that can run both on the client-side and the server-side.

An isomorphic app might look like this, dubbed here “Client-server MVC”

via Isomorphic JavaScript: The Future of Web Apps – Airbnb Engineering.