未知提供程序:从外部js方法调用角度服务时出现$resourceProvider错误

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-resource.min.js"></script>

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

<script src="path/to/your/external.js"></script>

app.run(function($rootScope) {
    $rootScope.$on('callResource', function(event, data) {
        var Resource = $rootScope.$new().$resource('/api/resource/:id');
        Resource.get({id: data.id}, function(response) {
            console.log(response);
        });
    });
});

function callResourceFromOutside(id) {
    var event = new CustomEvent('callResource', { detail: { id: id } });
    document.dispatchEvent(event);
}

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

app.factory('ResourceService', function($resource) {
    return $resource('/api/resource/:id', { id: '@id' });
});

app.controller('MainCtrl', function($scope, ResourceService) {
    $scope.getResource = function(id) {
        ResourceService.get({ id: id }, function(response) {
            $scope.resource = response;
        });
    };
});

function callResourceFromOutside(id) {
    var event = new CustomEvent('callResource', { detail: { id: id } });
    document.dispatchEvent(event);
}