Accidentally Deleting Your Angular App Is Easier Than You Think

Good News

Well, not the whole app and not forever. That's the good news.

The bad news: it's an easy, simple, easily missable mistake.

For some context, I started an Ionic app which has all of the controllers in the same controller.js file. I started by refactoring the three controllers into their own files.

Here's the offender, controllers.js:

angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {

  // Form data for the login modal
  $scope.loginData = {};

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };
})
.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [];
})
.controller('PlaylistCtrl', function($scope, $stateParams) {
});

Spot the Mistake

After my refactor, here's AppCtrl.js:

 angular.module('starter.controllers', [])
    .controller('AppCtrl', function($scope, $ionicModal, $timeout) {

      // Form data for the login modal
      $scope.loginData = {};

    // Open the login modal
      $scope.login = function() {
        $scope.modal.show();
      };
})

And PlaylistsCtrl.js:

angular.module('starter.controllers', [])
.controller('PlaylistsCtrl', function($scope) {
     $scope.playlists = [];
})

Each file has been added to index.html, but only the last one will load.

Ponder, but don't rip you hair out.

Simple Fix

This creates a module:
angular.module('starter.controllers', [])

This accesses a module which has already been created:
angular.module('starter.controllers')

So, each time I called angular.module('starter.controllers', []), it would create the module, then wipe it clean to start a brand new one for each successive file. Hence, only the last file in index.html would be accessible to the app.