JSFiddle - React, Tailwind, and code Playground

by Jscaptcha

HTML

<html ng-app='myApp'> 
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  </head>
  <body>
  	<div ng-controller='myController as vm'>
  		 	{{vm.message}}
  	</div>
  	<my-directive></my-directive>
  	<div ng-controller='mySecondController as vm'>
  		{{vm.message}} <br>
  		{{vm.providerMessage}}
  	</div>
  	 <div ng-controller='myThirdController as vm'> Service Usen name is :
      	 	 {{vm.serviceData.userName}}<br>
      	 	 <pop-up linkname ='click me'> </pop-up>
  	 	<br>
  	 </div>
  </body>
</html>

JavaScript

var myApp = angular.module('myApp',[]);
myApp.config(function(myProviderProvider){
	myProviderProvider.setValue('provider for which value is set through config');
})


myApp.controller ('myController',myController);
myApp.controller ('mySecondController',mySecondController);
myApp.controller ('myThirdController',myThirdController);
myApp.directive('myDirective',myDirective);
myApp.directive('popUp',popUp);
myApp.factory('myFactory',myFactory);
// myApp.factory('userServiceFactory',userServiceFactory);
myApp.provider('myProvider',myProvider);  <!-- Used for configure object before use it  -->
myApp.service('myService',myService);
myApp.value('currentDate', Date());



myController.$inject =['$scope','currentDate','$filter'];
mySecondController.$inject =['$scope','myFactory','myProvider'];
myThirdController.$inject =['$scope','myService','$log'];
// userServiceFactory.$inject =['$http'];
function myController($scope,currentDate,$filter )
{
	var vm = this;
	vm.message ='Hello good morning' + $filter('date')(currentDate,'M/d/yy h:mm a');
}
function myDirective ()
{
	return {
		template:'<strong>Directive tag is used</strong>'
	}
}	
function myFactory ()
{
	var service ={
		getAlertBox :getAlertBox
	};
	return service;
	
	function getAlertBox(){
				return 'Alert box is added in page through factory'
		}
}

function popUp(){
	return {
		restict :'E',
		replace :true,
		scope:{
			linkname:'@'
		},
		template:'<div><a href="#" ng-click="showPopup()">{{linkname}}</a>' +
				'  <div class="modal fade" id="loginModal" tabindex="-1" + role ="dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" > ' +
				'    <div class = "modal-dialog" > ' +
				'      <form name = "form" ng-submit = "submit()" > ' +
				'        <div class = "modal-content" > ' +
				'          <div class = "modal-header" > ' +
				'            <button type="button" class = "close" data-dismiss="modal" aria-hidden="true" ng-click="cancel()" > Cancel </button>' +
				'              <h3> </h3 > '...