After initially having everything in one app.js file, I realized that it was not the best approach. So, I decided to split things up into different files - controllers.js and services.js. The idea was to have three separate files for better organization (considering I only had controllers and services).
In the main entrance point app.js, I defined the main module and used the other two as dependencies. However, I encountered issues with this setup. Below are the definitions of each file:
app.js:
angular.module("personasApp", ["ngRoute", "personasApp.services", "personasApp.controllers"])
.config(function($routeProvider) {
$routeProvider
// Define routing logic here
});
controllers.js
angular.module("personasApp.controllers", ["ngRoute"])
// Define controller functions here
);
services.js
angular.module("personasApp.services", ["ngRoute"])
// Define service functions here
);
Lastly, in my index.html file, I reference the script app.js