Angular: Static tree data

http://angularjs.org/

by mhevery

HTML

<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.9.18/angular-0.9.18.js"></script>

<div ng:controller="Cntl">
  <ng:include src=" 'node.html' "/>
</div>

CSS

ul {
    font-size: 20px;
    margin-left: 20px;
    font-weight: bold;
    
}

ul ul {
    font-size: 16px;
}

ul ul ul {
    font-size: 12px;
    font-weight: normal;
}

JavaScript

Cntl.$inject = ['$xhr.cache'];
function Cntl($xhrCache) {
    $xhrCache.data['node.html'] = {
      value: 
        '<ul>' + 
          '<li ng:repeat="node in node.children">' + 
            '{{node.name}}' +
            '<ng:include src="\'node.html\'"></ng:include>' +
          '</li>' + 
        '<ul>'
    };
    
    this.data = [{
        name: '1',
        children: [{
            name: '11',
            children: [{
                name: '111'}, {
                name: '112'}]}, {
            name: '12',
            children: [{
                name: '121'}, {
                name: '122'}]}]}, {
        name: '2',
        children: [{
            name: '21'}, {
            name: '22'}]}];
    
    this.node = { children: this.data };
}