JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>

<p><b>Simple service demo</b></p>
<p>'The service 'nameService' is injected into the controllers, so that they can access it's its state (name property) and its methods (setFirstName() and setLastName()).

<fieldset ng:controller="FirstController">
    <legend>This lives in the FirstController</legend>
    <p>{{testName}} </p>
    <p><button ng:click="ns.setFirstName(newFirstNameInput)">Set first name</button><input type="text" name="newFirstNameInput" value="Liza" /></p>
</fieldset>

<fieldset ng:controller="SecondController">
    <legend>This lives in the SecondController</legend>
    <p>{{anotherTestName}}</p>
    <p><button ng:click="ns.setLastName(newLastNameInput)">Set lastname</button> <input type="text" name="newLastNameInput" value="Minelli" /></p>
</fieldset >

CSS

fieldset {
 border: 1px blue solid;   
 margin: 8px;   
 padding: 8px;
}

JavaScript

angular.service('nameService', function() {
    return {
        name :           {first:'Diana', last:'Ross'},
        setFirstName:    function(newFirstName) {
                                this.name.first = newFirstName;
                         },   
        setLastName:     function(newLastName) {
                                this.name.last = newLastName;
                         }   
    };
}, {$inject: []});
    
    
function FirstController(nameService) {
    this.ns = nameService;
    this.testName = this.ns.name;  
}
FirstController.$inject = ['nameService'];
    
function SecondController(nameService) {
    this.ns = nameService;  
    this.anotherTestName = this.ns.name;  
}
SecondController.$inject = ['nameService'];