Mobx + React simple todolist

ES5 example

HTML

<script src="https://npmcdn.com/[email protected]/lib/mobx.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<body ng-app="app">
  <page>
    <item></item>
  </page>
</body>

JavaScript

var Todo = function (title) {
	this.id= Math.random();
	this.title = title;
}

var app = angular.module("app", []);

app.service("actions", function(store) {
	var counter = 0;
  
  this.editAction = function() {
    store.todos[0].title = "Edited" + counter++;
  };
  
  this.addAction = function() {
    store.todos.push(new Todo("Title " + counter++));
  };
});

app.service("store", function() {
	this.todos = [
  	new Todo("Get Coffee"),
    new Todo("Write simpler code")
  ];
});

app.component("page", {
	template: "<div><item title='$ctrl.store.todos[0].title'></item><div>Total: {{$ctrl.getSize()}}</div></div>",
  controller: function(store) {
    this.store = store;
    this.getSize = function() {
    	return this.store.todos.length;
    };
  }
});

app.component("item", {
	bindings: {
  	title: "<"
  },
	template: "<span>{{$ctrl.title}}</span> <button ng-click='$ctrl.handleEditClick()'>Edit</button><button ng-click='$ctrl.handleAddClick()'>Add</button>",
  controller: function(actions) {
    this.handleEditClick = function() {
      actions.editAction();
    };
    this.handleAddClick = function() {
      actions.addAction();
    };
  }
});