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.$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.js
| AppCtrl.js




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

  .config(function ($routeProvider, $locationProvider) {
      .when('/', {
        template: require('./home.html'),
        controller: 'AppCtrl'


.controller('AppCtrl', function ($scope, $route) {
//controller code


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

  <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="" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
  <script src=""></script>

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

  <base href="/">

Am I missing a step on getting these separated out?

Source: AngularJS