JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="sample">
    <div ng-view></div>

    <script type="text/ng-template" id="/template/main.html">
        A 
        <a ng-href="/{{user}}/{{fiddleId}}/embedded/result/foo">foo</a>
        <a ng-href="/{{user}}/{{fiddleId}}/embedded/result/bar">bar</a>
    </script>
    <script type="text/ng-template" id="/template/foo.html">
        B
        <a ng-href="/{{user}}/{{fiddleId}}/embedded/result/">main</a>
        <a ng-href="/{{user}}/{{fiddleId}}/embedded/result/bar">bar</a>
    </script>
    <script type="text/ng-template" id="/template/bar.html">
        C
        <a ng-href="/{{user}}/{{fiddleId}}/embedded/result/">main</a>
        <a ng-href="/{{user}}/{{fiddleId}}/embedded/result/foo">foo</a>
    </script>
    <script type="text/ng-template" id="/template/otherwise.html">
        D
        <a ng-href="/{{user}}/{{fiddleId}}/embedded/result/">main</a>
    </script>
</div>

JavaScript

angular.module("sample", [], function($routeProvider, $locationProvider) {
    $routeProvider
        .when("/:user/:fiddleId/embedded/result/", {
            templateUrl: "/template/main.html"
        })
        .when("/:user/:fiddleId/embedded/result/foo", {
            templateUrl: "/template/foo.html"
        })
        .when("/:user/:fiddleId/embedded/result/bar", {
            templateUrl: "/template/bar.html"
        })
        .otherwise({
            templateUrl: "/template/otherwise.html"
        });
    // hashの書き換えの代わりにHTML5のpushStateを使うモードを設定する。
    $locationProvider.html5Mode(true);
});

function Controller($scope) {
    $scope.data = "vvakame";
    $scope.reset = function () {
        $scope.data = "謎の誰か";
    };
}