JSFiddle - React, Tailwind, and code Playground

by Graham Walters

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular-route.js"></script>
<div class="container" ng-app="ngApp">
    <ng-view>Loading...</ng-view>
    .
</div>

<script type="text/ng-template" id="View1.html">
    <h1>View 1</h1>
    <h1>[[ message ]]</h1>
</script>

<script type="text/ng-template" id="View2.html">
    <h1>View 2</h1>
    <h1>[[ message ]]</h1>
</script>

CSS

.done-true {
    text-decoration: line-through;
}

JavaScript

var ngApp = angular.module('ngApp', ['ngRoute']);
ngApp.config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

ngApp.config(function ($routeProvider) {
    $routeProvider.
    when('/View1', {
      controller: 'View1',
        templateUrl:'View1.html'
    }).
    when('/View2', {
      controller: 'View2',
      templateUrl:'View2.html'
    }).
    otherwise({
      redirectTo: '/View1'
    });
});

ngApp.controller('View1', function ($scope) {
    $scope.message = 'This is View 1';
});

ngApp.controller('View2', function ($scope) {
    $scope.message = 'This is View 2';    
});