JSFiddle - React, Tailwind, and code Playground

by epinapala

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<body ng-app="MyApp" ng-controller="MyCtrl">

  <ul class="nav nav-pills">
    <li><a href="#/">Home</a></li>
    <li><a href="#/page">Next Page</a></li>
  </ul>

  <div class="alert" ng-show="flash.getMessage()">
    <b>Alert!</b>
    <p>{{flash.getMessage()}}</p>
  </div>

  <ng-view></ng-view>

  <script type="text/ng-template" id="home.html">
    <h3>Home</h3>

    <form ng-submit="submit(message)" class="form-inline">
      <input type="text" ng-model="message" autofocus>
      <button class="btn">Submit</button>
    </form>

  </script>

  <script type="text/ng-template" id="page.html">
    <h3>Next Page</h3>

  </script>

</body>

JavaScript

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

app.config(function($routeProvider) {
  $routeProvider.
    when("/home", { templateUrl: "home.html" }).
    when("/page", { templateUrl: "page.html" }).
    otherwise({ redirectTo: "/home" });
});

app.factory("flash", function($rootScope) {
  var queue = [];
  var currentMessage = "";

  $rootScope.$on("$routeChangeSuccess", function() {
    currentMessage = queue.shift() || "";
  });

  return {
    setMessage: function(message) {
      queue.push(message);
    },
    getMessage: function() {
      return currentMessage;
    }
  };
});

app.controller("MyCtrl", function($scope, $location, flash) {
  $scope.flash = flash;
  $scope.message = "Hello World";

  $scope.submit = function(message) {
    flash.setMessage(message);
    $location.path("/page");
  }
});