Upon examining my App, I found that it is structured as follows:
var app = angular.module('cockpit', ['tenantService', 'ngMaterial', 'ngMdIcons']);
The controller associated with my App appears like this:
angular.module('cockpit').controller('TenantController', ['TenantService', function($scope, TenantService){
$scope.tenants = TenantService.get();
console.log('TenantController started', $scope.tenants);
}]);
In addition, the service utilized in my App is defined as shown below:
angular.module('tenantService', [])
.service('TenantService', function () {
this.get = function() {
return [
{
'name': 'fakeTenant',
'freeMemory': '45',
},
]
}
});
I have correctly imported the necessary dependencies by including the following scripts:
<script src="src/cockpit/app.js"></script>
<script src="src/cockpit/controllers/tenant_controller.js"></script>
<script src="src/cockpit/services/tenants.js"></script>
Within my HTML file, I have included the following to display the content:
<div ng-controller="TenantController">
{{tenants}}
</div>
However, upon checking the console, I encountered the error message:
TypeError: Cannot read property 'get' of undefined
at new <anonymous> (tenant_controller.js:2)
at Object.e [as invoke] (angular.js:4169)
at G.instance (angular.js:8422)
at angular.js:7677
at r (angular.js:330)
at J (angular.js:7676)
at g (angular.js:7062)
at J (angular.js:7701)
at g (angular.js:7062)
at g (angular.js:7065)
This issue raises the question of why the dependency is not being injected properly.