JSFiddle - React, Tailwind, and code Playground

by arjunasuresh3

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="//unpkg.com/show-current-browser-url"></script>
    <script src="//unpkg.com/[email protected]/angular.js"></script>
    <script src="//unpkg.com/[email protected]/release/angular-ui-router.js"></script>
    <script src="_main.js"></script>
    <script src="z_extras.js"></script>
    <title>Plunk demonstrating ui-router issue</title>
  </head>

  <body ng-app="demonstrateissue">
      
      <a ui-sref="product({ type: 'berry', productId: '1' })">product({ type: 'berry', productId: '1' })</a><br>
      <a href="#!/shopping/berries/abc">#!/berries/abc</a><br>
      <a href="#!/shopping/berry/25">#!/berry/25</a><br>
      <a href="#!/shopping/nuts/12">#!/nuts/12</a><br>
      <a ui-sref="product({ type: 'nut', productId: '1' })">product({ type: 'nut', productId: '1ss' })</a><br>
      
      <div ui-view>ui-view not populated</div>  
    
      <div class="header">
        Current URL: <b>{{$location.url() }}</b> <br>
        Current State: <b>{{$state.current.name }}</b> <br>
        Current Params: <b>{{$state.params | json }}</b><br>
      </div>
  
    <style>
      body {  margin-top: 7em; } 
      .link {  text-decoration: underline; color: blue; } 
      .link:hover { cursor: pointer; }
       .header { 
        position: fixed;
        right: 0;
        top: 1.5em;
        height: 6em;
        width: 100%;
        border-bottom: 1px solid gray;
      }
    </style>
  </body>
</html>

JavaScript

"use babel";

// Here's a skeleton app.  Fork this plunk, or create your own from scratch.
var app = angular.module('demonstrateissue', ['ui.router']);

// Empty config block.  Define your example states here.
app.config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider) {
  
  var productTypes = {
    berry: ['berries', 'berry'],
    nut: ['nuts', 'nut'],
    juice: ['juice'],
  }

  $urlMatcherFactoryProvider.type('productType', {
    encode: val => {
    //debugger;//
      console.log('encode', btoa(val));
      return btoa(val);
    },
    /* decode: string => {
     //      // console.log('decode', atob(string));
    console.log('decode', string);
          return string;
    }, */
  });
  
  $stateProvider.state('product', {
    url: '/shopping/{type:productType}/:productId',
    template: '{{ $resolve.$stateParams }}',
    resolve: { '$stateParams': '$stateParams' }
  })
    
});

app.run(function($rootScope, $state, $location) {
  
  $rootScope.$state = $state;
  $rootScope.$location = $location;
  
  function message(to, toP, from, fromP) { 
    return from.name  + angular.toJson(fromP) + " -> " + to.name + angular.toJson(toP);
  }
  
  $rootScope.$on("$stateChangeStart",   function(evt, to, toP, from, fromP)      { console.log("Start:   " + message(to, toP, from, fromP)); });
  $rootScope.$on("$stateChangeSuccess", function(evt, to, toP, from, fromP)      { console.log("Success: " + message(to, toP, from, fromP)); });
  $rootScope.$on("$stateChangeError",   function(evt, to, toP, from, fromP, err) { console.log("Error:   " + message(to, toP, from, fromP), err); });
});