JSFiddle - React, Tailwind, and code Playground

by jrab227

HTML

<script>
    require ([], function (ng) {
        // bootstrap angular with app called main
    });
</script>

<div ng-app="app">
    
    <div ng-controller="modelCtrl"> {{link}} </div>
    
</div>

JavaScript

define ('main', [ 'angular' ], function (ng) {
    return ng.module ('main', []);
});

define ('sub', [ 'main', 'angular'], function (main, ng) {
   main.requires.push ('sub');
    
    return ng.module ('sub', []);
});

define ('sub-contr', [ 'sub' ], function (sub) {
    sub.controller (function () {});
}



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

//I have a main application with a mock API to a datastore
main.factory('API', [function(){
    return {
        'model': {
            'get':function(){
                return "Hi";
            }
        }   
    };
}]);

//I want a reusable component that depends on an 'app' with an API,
//   which uses the API to get the model and couple it with the controller
main
.factory('modelServ',['API', function(API){
    return API.model.get();
}]) //The problem is here, when the app compiles template, it won't see this 
//controller since the app doesn't depend on it.
.controller('modelCtrl',['modelServ','$scope', function(model, $scope){
    $scope.link = model;
}]);