JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>
<div ng-app="demoApp" ng-controller="parentctrl">
  <script type="text/ng-template" id="service1.html">
  	Service page 1
    {{received}}
  </script>
  <script type="text/ng-template" id="service2.html">
  	Service page 2
    <button ng-click="emit()">call service 1</button>
  </script>
  
  <div ng-view=""></div>
  <a href="#/service1">service 1 page</a>
  <a href="#/service2">service 2 page</a>
</div>

JavaScript

angular.module('demoApp', ['ngRoute'])
	.controller("parentctrl", function($rootScope, $scope) {
  	$scope.$on('emitdata', function(event, data) {
      //$scope.$broadcast('broadcast-data', data);
      $rootScope.received = data;
    });
  })
  .controller("ctrl1", function($rootScope, $scope) {
  	$scope.received = $rootScope.received || 'nothing received';
    /*scope.$on('broadcast-data', function(event, data) {
      $scope.received = data;
      console.log('received data', data)
    });*/
	})
  .controller("ctrl2", function($scope) {
    $scope.emit = function() {
      $scope.$emit('emitdata', {'key': 'uu'});
    };
	})
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
     .when('/service1', {
      templateUrl: 'service1.html',
      controller: 'ctrl1'
    })
    .when('/service2', {
      templateUrl: 'service2.html',
      controller: 'ctrl2'
    })
    .otherwise({redirectTo:'/service1'});

    // configure html5 to get links working on jsfiddle
    //$locationProvider.html5Mode(true);
  });