In my project, I am looking to create an Angular module with a main controller, as well as additional controllers that are stored in separate files.
Main module:
var app = angular.module("main", []);
app.controller("mainCtrl", function ($scope) {
$scope.method1 = function (name) {
}
}
One of the additional controllers in a separate file:
var app = angular.module("main");//without []
app.controller("textCtrl", function ($scope) {
$scope.method1(); //successfully calling method1 from mainCtrl (separate file)
});
I include these files using the following script tags:
<script src="/modules/app.js"></script>
<script src="/modules/secondapp.js"></script>
My issue lies in the fact that while I can call a method in the main controller from the other controller, I am unable to call a method in the other controller from the main controller.
The overall structure is functioning as desired, but this particular problem is causing frustration.
Ultimately, my goal is to have each controller in its own separate file, all residing within the same module and able to share variables such as $scope.
An alternative solution would be to use services, however, this approach poses challenges as I would need to inject the service name from the second controller into the main controller, and there may be instances where the second controller is not loaded, resulting in an error when trying to inject the name.
I am seeking a well-structured approach to address this dilemma.