JSFiddle - React, Tailwind, and code Playground

by pythondave

HTML

<div ng-app="authApp">
    <div ng-controller="MB">
        Application title: {{ data.title }}
        <hr>
         scope variable: {{ scopevar }}
        <hr>
        Tabs: <span ng:repeat="tab in data.maintabs">{{ tab }} </span>
        <hr>
        <button ng:click="changeTitle()">Change Title</button>
        <button ng:click="addTab()">Add Tab</button>
        <button ng:click="changeScopeVar()">Change scope var</button>
    </div>
</div>

JavaScript

var authApp = angular.module('authApp', ['EASGenericServices']);

angular.module('EASGenericServices', []).
    factory('AppConfig', function() {
    
        var appData = {
            maintabs: ['one', 'two', 'three'],
            title: 'Application Title 2'
        };
        
        return {
            data: appData,
            setTitle: function(title) {
               appData.title = title;
            },
            addTab: function() {
                appData.maintabs.push('new');
            }
        }
        
    });


var controllers = controllers || {};
controllers.MB = function($scope, AppConfig) {
  
    $scope.data = AppConfig.data;
    $scope.scopevar = 'init value';

    $scope.changeTitle = function() {
        AppConfig.setTitle('blah');
    }
    
    $scope.addTab = function() {
        AppConfig.addTab();
    }
   
    $scope.changeScopeVar = function() {
        $scope.scopevar = 'updated value';
    }
    
}
    
authApp.controller(controllers);