JSFiddle - React, Tailwind, and code Playground

by Amal Das

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body ng-app='demo'>
<script type="text/ng-template" id="home.html">
    <h1> viewA </h1>
    <a href="#/about"><img src="src" /></a>
</script>

<script type="text/ng-template" id="about.html">
    <h1> viewB </h1>
    <h4>Click me to see ViewA: <input id="myCheckBox" type="checkbox" ng-model="checked" ng-change='checkView()'></h4>
</script>

<div>
    <div ng-view></div>
</div>
</body>

JavaScript

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

demo.controller('HomeController', function ($scope) {});

demo.controller('AboutController', function ($scope,$location) {
	$scope.checkView=function(){
    //if($scope.checked)
    if($('#myCheckBox').prop('checked') == true)
  	    $location.url('/home');
  }
});

demo.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});