angular prototype

src/main/webapp/css/app.css

@@ -0,0 +1,3 @@
+.css-treeview .selected {
+	font-weight: bold;
+}

src/main/webapp/directives/category.html

@@ -0,0 +1,12 @@
+<span> <input type="checkbox" checked="checked" /> 
+	<label ng-click="categoryClick({id: node.id})"
+		   ng-class="{selected: (node.id == selectedId && selectedType == 'category')}">{{node.name}}
+	</label>
+	<ul>
+		<li ng-repeat="feed in node.feeds">
+			<a ng-click="feedClick({id: feed.id})"
+			   ng-class="{selected: (feed.id == selectedId && selectedType == 'feed')}">{{feed.name}}
+			</a>
+		</li>
+	</ul>
+</span>

src/main/webapp/js/controllers.js

@@ -0,0 +1,56 @@
+var module = angular.module('commafeed.controllers', []);
+
+module.controller('CategoryTreeCtrl',
+		function($scope, $routeParams, $location) {
+
+			$scope.selectedType = $routeParams._type;
+			$scope.selectedId = $routeParams._id;
+
+			$scope.root = {
+				children : [ {
+					id : "1",
+					name : "News",
+					feeds : [ {
+						id : "2",
+						name : "Cyanide & Happiness"
+					} ],
+					children : [ {
+						id : "2",
+						name : "Comics",
+						feeds : [ {
+							id : "1",
+							name : "Dilbert"
+						} ]
+					} ]
+				}, {
+					id : '3',
+					name : "Blogs",
+					feeds : [ {
+						id : "3",
+						name : "Engadget"
+					} ]
+				} ]
+			};
+
+			$scope.feedClicked = function(id) {
+				$location.path('/feeds/view/feed/' + id);
+			};
+
+			$scope.categoryClicked = function(id) {
+				$location.path('/feeds/view/category/' + id);
+			};
+		});
+
+module.controller('FeedListCtrl', function($scope, $routeParams, $http) {
+
+	$scope.entries = [ {
+		id : '1',
+		title : '',
+		content : '',
+		date : '',
+		feed : '',
+		url : '',
+		read : false,
+		starred : false,
+	} ];
+});

src/main/webapp/js/directives.js

@@ -0,0 +1,23 @@
+var module = angular.module('commafeed.directives', []);
+
+module.directive('category', function($compile) {
+	return {
+		scope: {
+			node: '=',
+			selectedType: '=',
+			selectedId: '=',
+			feedClick: '&',
+			categoryClick: '&'
+		},
+		restrict : 'E',
+		replace: true,
+		templateUrl: 'directives/category.html',
+		link: function(scope, element) {
+            if (scope.node.children) {
+                var ul = element.find('ul');
+                ul.prepend('<category ng-repeat="child in node.children" node="child" feed-click="feedClick({id:id})" category-click="categoryClick({id:id})" selected-type="selectedType" selected-id="selectedId"></category>');
+                $compile(ul.contents())(scope);
+            }
+	     }
+	};
+});

src/main/webapp/js/main.js

@@ -0,0 +1,11 @@
+var app = angular.module('commafeed', [ 'commafeed.directives',
+		'commafeed.controllers' ]);
+
+app.config([ '$routeProvider', function($routeProvider) {
+	$routeProvider.when('/feeds/view/:_type/:_id', {
+		templateUrl : 'templates/feeds.html'
+	});
+	$routeProvider.otherwise({
+		redirectTo : '/feeds/view/category/all'
+	});
+} ]);

src/main/webapp/templates/feeds.html

@@ -0,0 +1,14 @@
+<div class="container-fluid">
+	<div class="row-fluid">
+		<div class="span2" ng-controller="CategoryTreeCtrl">
+			<div class="css-treeview">
+				<ul>
+					<li ng-repeat="node in root.children">
+						<category node="node" feed-click="feedClicked(id)" category-click="categoryClicked(id)" selected-type="selectedType" selected-id="selectedId"></category>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<div class="span10" ng-controller="FeedListCtrl"></div>
+	</div>
+</div>