How to put controllers and factories in separate files

I have one module ‘app’ and I am trying to separate it’s controllers and one factory into individual files. The app works when I chain all controllers in the main app.js file. It breaks instantly when I try to move them to new files.

I’ve tried everything to get my controllers/factories in a separate file but I constantly get this error:

[$controller:ctrlreg] The controller with the name ‘AppCtrl’ is not registered.
https://errors.angularjs.org/1.7.2/$controller/ctrlreg?p0=AppCtrl

I have declared the scripts in the main html file.. All of the js files are in the same directory. I am attempting to add the controller using angular.module('app) as the reference to the main module, but nothing works.

My directory structure:

|app

| app.js
| AppCtrl.js

|public

|index.html

app.js

angular.module('app', ['ngRoute']);

angular.module('app')
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        template: require('./home.html'),
        controller: 'AppCtrl'
      })
    $locationProvider.hashPrefix('');
  });

AppCtrl.js

angular.module('app')
.controller('AppCtrl', function ($scope, $route) {
//controller code
});

index.html

<!doctype html>
<html ng-app="app" lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

  <script src="../app/app.js"></script>
  <script src="../app/AppCtrl.js"></script>


  <base href="/">
</head>

Am I missing a step on getting these separated out?

Source: AngularJS