JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<script src="https://code.angularjs.org/1.4.8/angular-route.min.js"></script>
<script type="text/ng-template" id="embedded.home.html">
  <h1> Home </h1> {{paramValue}}
  <button ng-click="clickMe()">Click me</button>
</script>

<script type="text/ng-template" id="embedded.about.html">
  <h1> About </h1>
</script>

<div>
  <div id="navigation">
    <a href="#/home">Home</a>
    <a href="#/about">About</a>
  </div>

  <div ng-view></div>

</div>

JavaScript

angular.module('FunnyAnt.Examples.Routing', ['ngRoute']);

 angular.module('FunnyAnt.Examples.Routing')
   .controller('HomeController', function($scope, $routeParams, $location) {
     $scope.paramValue = $routeParams.myValue;
     $scope.clickMe = function() {
       console.log('clickMe', $routeParams)
       $location.path('/home').search({
         myValue: "Custom Get Params" + Math.random()
       });
     };
   });
 angular.module('FunnyAnt.Examples.Routing')
   .service('MyService', function($http) {
     console.log("service loaded")
     this.someMethod = function() {
       console.log("resolve method called")
       return $http({
         url: '/'
       }).success(function() {
         console.log('resolve reloaded')
       });
     }
   })
 angular.module('FunnyAnt.Examples.Routing')
   .controller('AboutController', function($scope) {});

 angular.module('FunnyAnt.Examples.Routing')
   .config(function($routeProvider) {
     $routeProvider.
     when('/home', {
       templateUrl: 'embedded.home.html',
       controller: 'HomeController',
       resolve: {
         someMethod: function(MyService) {
           return MyService.someMethod()
         }
       }
     }).
     when('/about', {
       templateUrl: 'embedded.about.html',
       controller: 'AboutController'
     }).
     otherwise({
       redirectTo: '/about'
     });
   });