JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<div ng-app='app'>
  <!-- main-view -->
  <div ui-view></div>
  
  <!-- inline templates -->
  <script type='text/ng-template' id='templates/app.html'>
  	<div>
      <h1>App</h1>
      <p>Current path: {{ vm.state.current.name }}</p>
      <div ui-view></div>
		</div>
  </script>
  <script type='text/ng-template' id='templates/index.html'>
  	<div>
      <h2>Index</h2>
      <a ui-sref='app.contact'>go to contact</a>
		</div>
  </script>
  <script type='text/ng-template' id='templates/contact.html'>
  	<div>
      <h2>Contact</h2>
      <a ui-sref='app.index'>back to index</a>
		</div>
  </script>
</div>

CSS

html, body{
  font-family: arial, sans-serif;
}

JavaScript

angular.module('app', ['ui.router'])

.config(function($urlRouterProvider, $stateProvider){
	$urlRouterProvider.otherwise('/');
	$stateProvider
  	.state('app', {
      template: '<app></app>'
    })
  	.state('app.index', {
    	url: '/',
      template: '<index></index>'
    })
  	.state('app.contact', {
    	url: '/contact',
      template: '<contact></contact>'
    });
})

.component('app', {
  templateUrl: 'templates/app.html',
  controller: function($scope, $state){
  	var vm = $scope.vm = {
    	state: $state
    };
  	console.info('app.controller executed');
    // ..
  }
})

.component('index', {
	templateUrl: 'templates/index.html',
  controller: function(){
  	console.info('index.controller executed');
  	// ..
  }
})

.component('contact', {
	templateUrl: 'templates/contact.html',
  controller: function(){
  	console.info('contact.controller executed');
    // ..
  }
});