Angular.js resource with event-driven design

cell.md

Cell event

本質上Cell比較類似Controller，針對任一Resource的CRUD行為可以事件驅動方式被呼叫。

• Example FoosCell

Funcaion	Function params	Event	Event params
index	event	'foos:index'	-
show	event, foo	'foos:show'	foo
new	event	'foos:new'	-
create	params	-	-
edit	event, foo	'foos:edit'	foo
update	params	-	-
destroy	event, foo	'foos:destroy'	foo

• Add event listener in AppCtrl

   $scope.$on('foos:index', FoosCell.index);
   $scope.$on('foos:show', FoosCell.show);
   $scope.$on('foos:new', FoosCell.new);
   $scope.$on('foos:edit', FoosCell.edit);
   $scope.$on('foos:destroy', FoosCell.destroy);
  

• Trigger event

  • In javascript

   $rootScope.$broadcast('foos:index');
   $rootScope.$broadcast('foos:show', foo);
  

  • In view

   <div ng-click="helper.trigger('foos:index')">List</div>
   <div ng-click="helper.trigger('foos:show', foo)">Display foo</div>