JSFiddle - React, Tailwind, and code Playground

AngularJS ui-router

by oktaviardi pratama

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.0/angular-ui-router.js"></script>
<div ui-view="top" class="top">
    <br />
    $scope.testmsg = {{testmsg}}
    <br />
    $scope.statename = {{statename}}
    <br />
    top!
</div>
<div ui-view="middle" class="middle">middle!</div>
<div ui-view="bottom" class="bottom">bottom!</div>

CSS

.top {
    border: 1px solid black;
    position: relative;
    width: 400px;
    height: 200px;
}
.middle {
    border: 1px solid blue;
    position: relative;
    width: 400px;
    height: 200px;
}
.bottom {
    border: 1px solid red;
    width: 400px;
    height: 200px;
}

JavaScript

/* myApp module */
var myApp = angular.module('myApp', ['ui.router'])
    .config(['$stateProvider', function ($stateProvider) {

    $stateProvider.state('home', {
		url: "/",
        views: {
            'top': {
				url: "",
                template: '<div>top! {{topmsg}}</div>',
                controller: function ($scope) {
                    $scope.topmsg = "loaded top!";
                    console.log("top ctrl!");
                }
            },
            'middle': {
				url: "",
                template: '<div>middle! {{middlemsg}}</div>',
                controller: function ($scope) {
                    $scope.middlemsg = "loaded middle!";
                    console.log("middle ctrl!");
                }
            },
            'bottom': {
				url: "",
                template: '<div>bottom! {{bottommsg}}</div>',
                controller: function ($scope) {
                    $scope.bottommsg = "loaded bottom!";
                    console.log("bottom ctrl!");
                }
            }
        },
        onEnter: function () {
            console.log("entered home state");
        }
    });
}])
    .run(function ($rootScope, $state, $stateParams) {
//    $rootScope.$state = $state;
//    $rootScope.$stateParams = $stateParams;
//    $state.transitionTo('home');
      //console.log("runnin'");
})
    .controller('MyAppCtrl', function ($scope, $state/*, $stateParams*/) {
        $scope.statename = $state.current.name;
        $scope.testmsg = "app scope working!";
        console.log("MyAppCtrl initialized!");
        $state.go("home");
});