JSFiddle - React, Tailwind, and code Playground

by supatwo

HTML

<div ng-app="myApp" ng-controller="MyCtrl">

<div> {{hellos[0]}} </div>
<div> {{hellos[1]}} </div>
<div> {{hellos[2]}} </div>


<div> Data = {{data}}</div>
</div>

JavaScript

// Source: https://groups.google.com/forum/#!topic/angular/hVrkvaHGOfc
// jsFiddle: http://jsfiddle.net/pkozlowski_opensource/PxdSP/14/
// author: Pawel Kozlowski

var myApp = angular.module('myApp', []);
 
//service style, probably the simplest one
//When declaring serviceName as an injectable argument you will be provided with an instance of the function. In other words 
//new FunctionYouPassedToService().
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World! from Service"
    };
});
 
//factory style, more involved but more sophisticated
//When declaring factoryName as an injectable argument you will be provided with 
//the value that is returned by invoking the function reference passed to module.factory.
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World! from Factory"
        }
    };
});
    
//provider style, full blown, configurable version     
//new ProviderFunction().$get()
myApp.provider('helloWorld2', function() {
    // In the provider function, you cannot inject any
    // service or factory. This can only be done at the
    // "$get" method.
 
    this.name = 'Default';
 
    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Hello, " + name + "!"
            }
        }
    };
 
    this.setName = function(name) {
        this.name = name;
    };
});
 
//hey, we can configure a provider!            
//convention over configuration, we must suffix provider to config with"Provider" when configing it in module.config
myApp.config(function(helloWorld2Provider){
    helloWorld2Provider.setName('World, from provider');
});
        
 


function MyCtrl($scope, helloWorld2, helloWorldFromFactory, helloWorldFromService) {

    
    $scope.data = "hehehe";
    $scope.hellos = [
        helloWorld2.sayHello(),
       ...