JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script type="text/ng-template" id="page.html">
    <h1> Some title </h1>
</script>
<body>
    <header> 
        <h1> Title </h1>
    </header>
    <main ui-view="main"></main>
</body>

JavaScript

var app = angular.module('test', ['ui.router']);

    app.config(config);

    app.controller('ParentCtrl', ['$scope', function ($scope) {
        console.log('parentCtrl');
    }]);

    app.controller('Child1Ctrl', ['$scope', function ($scope) {
        console.log('Child1Ctrl');
    }]);

    app.controller('Child2Ctrl', ['$scope', function ($scope) {
        console.log('Child2Ctrl');
    }]);

    function config($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/parent');

        $stateProvider.state('parent', {
            abstract: true,
            views: {
                'main': {
                    controller: 'ParentCtrl',
                    controllerAs: 'parentCtrl',
                    templateUrl: 'page.html'
                }
            },
            url: '/parent/'

        });
        $stateProvider.state('parent.child1', {
            views: {
                'main': {
                    controller: 'Child1Ctrl',
                    controllerAs: 'child1Ctrl',
                    templateUrl: 'page.html'
                }
            },
            url: 'child1?param2',
        });
        $stateProvider.state('parent.child2', {
            views: {
                'main': {
                    controller: 'Child2Ctrl',
                    controllerAs: 'child2Ctrl',
                    templateUrl: 'page.html'
                }
            },
            url: 'child2?param1', //is this /parent/child2... ?
        });
    }