JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<script src="https://code.angularjs.org/1.2.1/angular-route.js"></script>
<section ng-app="app" ng-controller="AppCtrl">{{1+2}}
    <div>Location: {{location}}</div>
    <ul>
        <li><a href="#/search">search</a></li>
        <li><a href="#/search?foo=bar">search foo=bar</a></li>
        <li><a href="#/search?foo=baz">search foo=baz</a></li>
        <li><a href="#/search?foo=baz&page=2">search foo=baz page=2</a></li>
        <li><a href="#/">default</a>
        </li>
    </ul>
    <ng-view />
    
    
    <script type="text/ng-template" id="search.html">
        <h1>Search</h1>
        <div>{{time}}</div>
        <div>Location: {{location}}</div>
        <div>Foo: {{foo}}</div>
        <div>Page: {{page}} [ <a href="" ng-click="showPage(1)">1</a> <a href="" ng-click="showPage(2)">2</a> <a href="" ng-click="showPage(3)">3</a> ]</div>
        
        <div>
            <form ng-submit="search()">
            <select ng-model="nextFoo">
                <option value="foo">foo</option>
                <option value="bar">bar</option>
                <option value="baz">baz</option>
            </select>
            <button type="submit">Go</button>
            </form>
        </div>
    </script>
</section>

JavaScript

var module = angular.module("app", ['ngRoute']);
module.config(['$routeProvider', '$locationProvider', function ($routeProvider,  $locationProvider) {
    $routeProvider.when('/search', {
        templateUrl: "search.html",
        controller: 'SearchCtrl',
        reloadOnSearch: false
    }).otherwise({
        template: "<h1>Default</h1>"
    });
    
    //$locationProvider.html5Mode(true);
}]);

module.controller('AppCtrl', function ($scope, $location) {
});

module.controller('SearchCtrl', function ($scope, $location) {
    $scope.time = new Date().valueOf();
    $scope.location = $location.path();
    
    $scope.foo = $location.search().foo;
    $scope.page = $location.search().page || 1;
    
    $scope.showPage = function(pageNum) {
        $scope.page = pageNum;
    }
    
    $scope.search = function(event, route) {
        $location.search({
            foo: $scope.nextFoo
        });
    };

    $scope.$watch('foo', function(foo) {
        $scope.nextFoo = foo;
    });
    
    $scope.$on('$routeUpdate', function(event, route) {
        $scope.location = $location.path();
        $scope.foo = route.params.foo;
        $scope.page = route.params.page;
    });
});