Wednesday, February 27, 2013

AngularJs and Xml

Scenario: using an xml database, need to make a list of documents for user to select to edit.  This info is in the database as xml.

Problem: When converting xml to json on the server… single items are not arrays, more than one item is an array.  Array items need to be an array even if there is only one item. 

Solution: convert client side with https://code.google.com/p/x2js/ 

When x2js converts xml to Json, it provides both an array format or a single item format for elements that could be either. 

Oh! Namespace support!  That made my day!  It was even done in an elegant manner.  Namespaces stay out of the way till you get down to work on the text element!

I was expecting the JSON to be  f.rows.f.row.f.name

but no, it was so much better -  rows.row.name.__text

for the namespace – rows.row.name.__prefix

I found this on http://rabidgadfly.com/2013/02/ I’m glad he created this post a week before I needed it.

Mad style points for Glenn for use of http://plnkr.co and for the Guitar legends xml data set!

Tuesday, February 26, 2013

Directives, Buttons, and Directives

For the most part, this is considered a bad-dog thing to do in AngularJs.  But sometimes… it just has to be done.  I came across this after hours and hours of fighting, then I looked deeper into ng-view.  If the directive tag was in a different file loaded in via the view, it will render properly.

Scenario:

Main page and a button.  The button opens a modal with a form.  When the form is submitted, that data is used to make a new directive DOM element on the main page. 

Problem: 

The new instance of the directive is just string on a page.  The directive never get applied.  We want the div on 8888 to say ‘Hello World!.  Without this $compile function, we would see <div>Hello World</div>.  The directive is never applied.

  <div ng-app="poc">
<div ng-controller="mainCtrl">
<div>Test 1 : sanity check</div>
<div xrx-hello-world></div>
<div>Test 2 : applied using getElementById(8888)</div>
<div id="8888">Replace Me</div>
<div xrx-add-button=""></div>
</div>
</div>


  
 
var poc = angular.module('poc', ['ngResource', 'ngSanitize']);

poc.directive("xrxHelloWorld", function () {
return {
priority: 50,
restrict: 'A',
replace: false,
transclude: true,
scope: false,
template: '<div>Hello World</div><div ng-transclude></div>',
};
});

poc.directive('xrxAddButton', function ($compile) {
return {
priority: 50,
restrict: 'A',
replace: false,
transclude: true,
scope: false,
template: '<button>Click</button><div ng-transclude></div>',
link: function (scope, element, attr) {
var btn = angular.element(element.children()[0]);

var handleClick = function () {
var directiveStr = '<div xrx-hello-world></div>';
var directiveDom = angular.element(directiveStr);
var newDomHome = angular.element($('#8888')).html(directiveDom);
$compile(newDomHome);
};
btn.bind('click', handleClick);
}
};
});







Thursday, February 21, 2013

AngularJS ng-click button click notes

Video Link

The presenter in the video nails it when they say 'Extreme Separation' of concerns.  I love this separation, but when prototyping... it makes you think.  Times that by 10 when you have chained directives!

I do think that it's more Angular-esque to use ng-click.

This example shows ng-click with a directive. http://jsfiddle.net/V7Kpb/12/


Quick show hide box
<div class="btn btn-info" ng-model="showSummary"
       ng-click="showSummary = 2/showSummary" 
       ng-init="showSummary=0">
  Show Summary
</div>
<div class="well well-small" ng-show="showSummary">My Text Here</div>



Wednesday, February 20, 2013

Angular Notes for the day

Found a good resource today AngularJs Cheetsheet.  They hid it on the home page of the google group for AngularJs.

Painful lesson earlier this week.  Don't forget the 'ng-transclude' attribute in the HTML for your template!

Nice sample for calling controller methods in html with angular expression on jsFiddle.


<span ng-class="cssActiveIf(folder)">
        <a href="javascript:void(0)">{{folder.name}}</a>
  </span>

function AssetCtrl($scope) {

 $scope.cssActiveIf = function(item) {
        return (item === $scope.selection.currentFolder) ? "active" : "";
    };
}