JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script>
<script src="https://code.angularjs.org/1.2.6/angular-route.min.js"></script>
<div ng-app="routingDemo">
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header"> 
            <a class="navbar-brand" href="#/">Static pages demo</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#/pages/1">Page 1</a></li>
                <li><a href="#/pages/2">Page 2</a></li>
            </ul>
        </div>
    </nav>
    <div class="container" ng-view></div>
</div>

JavaScript

'use strict';

var pageTemplate = "<div>{{page.title}}<div>";
var pageTitles = ['Page1', 'Page2'];

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

app.config(['$routeProvider', '$locationProvider',

function ($routeProvider, $locationProvider) {
    //$locationProvider.html5Mode(true);

    $routeProvider.
    when('/', {
        //templateUrl: 'partials/phone-list.html',
        template: "<div>main page</div>",
        //controller: 'MainCtrl'
    }).
    when('/pages/:pageId', {
        //templateUrl: 'partials/phone-detail.html',
        template: pageTemplate,
        controller: 'PagesCtrl'
    }).
    otherwise({
        redirectTo: '/'
    });
}]);

app.controller('PagesCtrl', ['$scope', '$routeParams', function ($scope, $routeParams) {
    $scope.page = {
        'title': pageTitles[$routeParams.pageId - 1]
    };
}]);