How can I hoist an object definition?

Question

In my js file in an Angular app I am building, I want to declare the controller s, service s etc up top, and then define them below.

I have this working for now and it's fine. The problem is, when I start a new file, I typically copy over the contents of an existing file and change the names of the functions. However, I have to go through a whole bunch of function names which is a pain. I'd rather simply change the name of the object containing these functions, and then only change

oldapp.controller

to

newapp.controller

For better illustration, this is what I have now

var pos__filejs_HomeApp = angular.module('ros.filejs.HomeApp', ['ui.router']);

pos_filejs_config.$inject = ['$stateProvider', '$urlRouterProvider'];
pos__filejs_HomeApp.config(pos_filejs_config);

pos_filejs_controller.$inject = ['$scope'];
pos__filejs_HomeApp.controller('ros.postjs.ctrl', pos_filejs_controller);

//----------------------------------------------------
//  FUNCTIONS
//----------------------------------------------------

function pos_filejs_config($stateProvider, $urlRouterProvider){
  // implementation
}

function pos_filejs_controller($scope){
  //implementation
}

and here's what I want to have:

var pos__filejs_HomeApp = angular.module('ros.filejs.HomeApp', ['ui.router']);

HomeApp.config.$inject = ['$stateProvider', '$urlRouterProvider'];
pos__filejs_HomeApp.config(HomeApp.config);

HomeApp.controller.$inject = ['$scope'];
pos__filejs_HomeApp.controller('ros.postjs.ctrl', HomeApp.controller);

//----------------------------------------------------
//  FUNCTIONS
//----------------------------------------------------

var HomeApp = {
  config: function ($stateProvider, $urlRouterProvider){
    // implementation
  },
  controller: function ($scope){
    //implementation
  }
}

This is quite a bit cleaner, especially as the files get bigger and more services, configs, are added.

The problem is, I can't seem to put the object implementation below the angular stuff because the object is not "hoisted" - that is, the reference to HomeApp at the top of the file is undefined since HomeApp is only defined lower down (it is not like this for function name(){...} .

How can I hoist the object so I can use it higher up in the file?

Answer 1

HomeApp is hoisted however HomeApp hoisted as "undefined". Hoisting does not defines value for you. According to me, You can think of code as

    var HomeApp = undefined;   
var pos__filejs_HomeApp = angular.module('ros.filejs.HomeApp', ['ui.router']);

    HomeApp.config.$inject = ['$stateProvider', '$urlRouterProvider'];
//Here HomeApp is undefined, Since you haven't assign any value;

    pos__filejs_HomeApp.config(HomeApp.config);
    HomeApp.controller.$inject = ['$scope'];
    pos__filejs_HomeApp.controller('ros.postjs.ctrl', HomeApp.controller);
//...

I am not sure why you wanna to write a code which is hard to understand :-D