JSFiddle - React, Tailwind, and code Playground

by Chris Bao

HTML

<div ng-app="app">
        <h1>Custom Service</h1>
    <div ng-controller='FirstCtrl as first'>
      <input type="text" ng-model="first.itemName" placeholder="item name">
      <button ng-click="first.addItem();">Add Item To Shopping List</button>
    </div>

    <div ng-controller='SecondCtrl as second'>
      <ol>
        <li ng-repeat="itemname in second.items">
           {{ itemname }}
          <button ng-click="second.removeItem($index);">Remove Item</button>
        </li>
      </ol>
    </div>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.6.2/angular.min.js"></script>
<style>

JavaScript

function FirstCtrl(dataService) {
	this.addItem = function(){
  	dataService.addItem(this.itemName);
  }
}

function SecondCtrl(dataService) {
	this.items = dataService.getItem();
  this.removeItem = function(index){
  	dataService.removeItem(index);
  }
}

function dataService() {
	var items = [];
  this.addItem = function(itemname){
  	items.push(itemname);
  }
  this.getItem = function(){
  	console.log("debugging...")
  	return items;
  }
  this.removeItem = function(index){
    items.splice(index,1);
  }
}

angular
	.module('app', [])
  .controller('FirstCtrl', FirstCtrl)
  .controller('SecondCtrl', SecondCtrl)
  .service('dataService',dataService);