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">
      <input type="text" ng-model="first.itemQuality" placeholder="item quality">    
      <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) {
	var firstctrl = this;
	firstctrl.addItem = function(){
  	dataService.addItem(firstctrl.itemName,firstctrl.itemQuality);
  }
}

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

dataCheckService.$inject = ['$q','$timeout'];
function dataCheckService($q,$timeout){
	var checkservice = this;
  //checkName method
  checkservice.checkName = function(name){
    var result = {
      message: ""
    };
    //create the defer object 
    var defered = $q.defer();  
    //use timeout to simulate asynchronous behavior
  	$timeout(function(){
    	if (name.indexOf("cookie") === -1) {
      	//resolve the promise
        defered.resolve(result);
      } else {
      	//reject the promise
        result.message = "stay away from cookie!";
        defered.reject(result);
      }
    },3000);
    return defered.promise; //return the promise as the return value
  };
  //checkQuality method
  checkservice.checkQuality = function(number){
		var result = {
    	message: ""
    }
    var defered = $q.defer();
    $timeout(function(){
    	if(number <= 5){
      	defered.resolve(result);
      } else {
      	result.message = "Eat too much";
      	defered.reject(result);
      }
    },1000);
    return defered.promise;
  };
}

dataService.$inject = ['dataCheckService'];
function dataService(dataCheckService) {
	var items = [];
  var dataservice = this;
  dataservice.addItem = function(itemname,itemquality){
    //get the name promise for the name checking service method
    var namepromise = dataCheckService.checkName(itemname); 
    namepromise.then(function(response){
        //directly return the quality promise
    		return dataCheckService.checkQuality(itemquality); 
    }).then(function(response){ //chain the promise
    		items.push(itemname);
    }).catch(function(error){
    		console.log(error.message);
  ...