JSFiddle - React, Tailwind, and code Playground

by gonglei

HTML

<div ng-app="MyApp">
    <div>
        <div id="page1" ng-controller="Ctrl1">
            {{ content }} - {{ $location.absUrl() }}
            <button ng-click="goPage2">Page2</button>
        </div>
        <hr>
        <div id="page2" ng-controller="Ctrl2">
            {{ content }} - {{ $location.absUrl() }}
            <button ng-click="goPage3">Page3</button>
        </div>
        <hr>
        <div id="page3" ng-controller="Ctrl3">
            {{ content }} - {{ $location.absUrl() }}
            <button ng-click="goPage1">Page1</button>
        </div>
    </div>
</div>

JavaScript

var app = angular.module('MyApp', []);

//app.config(function ($routeProvider) {
//    $routeProvider
//    .when('#page1', {templateUrl: '#page1'})
//    .when('#page2', {templateUrl: '#page2'})
//    .when('#page3', {templateUrl: '#page3'})
//});

app.controller('Ctrl1', function($scope, $location) {
    $scope.content = 'Page 1';
    $scope.goPage2 = function() {
        alert('to page2');
        $location.url('#page2');
    }
});

app.controller('Ctrl2', function($scope, $location) {
    $scope.content = 'Page 2';
    $scope.goPage3 = function() {
        $location.url('#page3');
    }
});

app.controller('Ctrl3', function($scope, $location) {
    $scope.content = 'Page 3';
    $scope.goPage1 = function() {
        $location.url('#page1');
    }
});