js-data localForage

by Aides

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<div ng-app="App" ng-controller="appCtrl as $ctrl">
  <button ng-click="$ctrl.toggleComponent()">
    Toggle
  </button>
  <test ng-if="$ctrl.componentEnabled">

  </test>
  <div>
    <ul>
      <li ng-repeat="item in $ctrl.notifications">{{item}}</li>
    </ul>
  </div>
</div>

TypeScript

class TestController
  {
  	static $inject = ['$rootScope'];
  	constructor(private $rootScope)
    {
    	console.log('test');
    }
    
    this.testText = 'Foobar';
    
    this.fireNotification = () =>
    {
    	console.log('button clicked');
    	this.$rootScope.$emit('buttonClicked');
    }
  }
  
  angular.module('App', [])
	.controller('appCtrl', ['$rootScope', function($rootScope)
  {
  	$rootScope.$on('buttonClicked', () =>
    {
    	console.log('buttonClicked');
    	this.notifications.push('buttonClicked');
    });
  
  	this.notifications = [];
  	this.componentEnabled = true;
  
  	this.toggleComponent = () =>
    {
    	this.componentEnabled = !this.componentEnabled;
    }
  })
	.component('test', 
  {
  	template: `<button ng-click="testComponent.fireNotification()">
    						 Notify $rootScope
               </button>
               <p ng-bind="testComponent.testText></p>`, 
  	controller: 'TestController',
    controllerAs: 'testComponent'
  })
  .controller('TestController', TestController);