JSFiddle - React, Tailwind, and code Playground

by Ehren Dames

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<body ng-app="myApp" ng-strict-di>
    <div ng-controller="press" id="container">{{ hello }}</div>
</body>

CSS

#container {
    background-color: #f1f1f1;
    height: 20px;
    width: 100px;
}

JavaScript

var app = angular.module('myApp', ['myApp.press']);

  app.config(configure);
  configure.$inject = ['paginationProvider', 'paginationConfigProvider'];
  function configure(paginationProvider, paginationConfigProvider) {
    paginationConfigProvider.config.$paginationProvider = paginationProvider;
  }

  angular.module('myApp.press', ['myApp.pagination'])
      .controller('press', press);

  angular.module('myApp.pagination', [])
      .provider('paginationConfig', paginationConfig)
      .factory('pagination', pagination);

  function paginationConfig() {
      this.config = {};
      this.$get = function () {
          return {
              config: this.config
          };
      };
  }

  pagination.$inject = ['paginationConfig'];

  function pagination(paginationConfig) {
      var paginationProvider = paginationConfig.config.paginationProvider;
      var service = {
          activate: activate
      };

      return service;

      function activate() {
          return 'test';
      }
  };

  press.$inject = ['$scope', 'pagination'];

  function press($scope, pagination) {
      $scope.hello = pagination.activate();
      //$scope.hello = 'hello world';
  }