JSFiddle - React, Tailwind, and code Playground

by rippo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<div ng-app="app" ng-controller="testCtrl">
<ul>
<li ng-repeat='product in products'>{{product.Name}} - <em>{{product.Category}}</em></li>
</ul>
<p>{{products || json}}</p>
</div>

JavaScript

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

app.factory('products', function ($http) {
   var items = [];
   var myProductService = {};

   /*$http.get('/api/products')
      .then(function (res) {
         items = res.data;
      });*/
 
   myProductService.items = function () {
    var jsonData = [
        {"Id":1,"Name":"Tomato Soup","Category":"Groceries","Price":1},
        {"Id":2,"Name":"Yo-yo","Category":"Toys","Price":3.75},
        {"Id":3,"Name":"Hammer","Category":"Hardware","Price":16.99},
        {"Id":4,"Name":"Screwdriver","Category":"Hardware","Price":11.99}];
        return jsonData;
   };

   return myProductService;
});


app.controller("testCtrl", function ($scope, products) {
   $scope.products = products.items();
});