Alloy and require external JS

Question

Right now I have a function in my alloy.js file that is a global.

Alloy.Globals.indicator = function(parent)
{
  var view = Ti.UI.createView({
    width: '100%',
    height: '100%',
    backgroundColor: '#000',
    opacity: 0.6,
    visible: false
  });

  function osIndicatorStyle()
  {
    style = Ti.UI.iPhone.ActivityIndicatorStyle.PLAIN;
    if ('iPhone OS' !== Ti.Platform.name) style = Ti.UI.ActivityIndicatorStyle.DARK;
    return style;
  };

  var activityIndicator = Ti.UI.createActivityIndicator({
    style: osIndicatorStyle(),
    height: Ti.UI.FILL,
    width: 100
  });

  view.add(activityIndicator);
  parent.add(view);

  function openIndicator()
  {
    view.visible = true;
    activityIndicator.show();
  }

  view.openIndicator = openIndicator;

  function closeIndicator()
  {
    activityIndicator.hide();
    view.visible = false;
  }

  view.closeIndicator = closeIndicator;
  return view;
};

I'd rather not have this large function as a global and instead import it to the files I need using require.

I have searched and cannot figure out first, where to place this file and second how to actually "require" it.

All this simply does is create a view that acts as a modal view with a activity indicator. The function also includes two function to show and hide it.

Answer 1

Make a folder called "lib" inside the "app" folder.

Inside this folder, make a file called whatever you like e.g. functions.js:

var functionName = function(){
     //your function code here
}
exports.functionName = functionName;

In your controller:

var functions = require('functions');
functions.functionName();

You might want to also look at Widgets which are re-usable components complete with view/controller/styles as I think this would fit your requirement slightly better.

Link to docs