Angular app is not defined when adding a custom filter outside of function

Question

Trying to follow some examples, but I get app is not defined

app.js

(function () {
   "use strict";
   var app = angular.module("deviceManagement",['angularUtils.directives.dirPagination']);
}());

So I have HOPING to be able to use or attach to "app"

I have a controller js file

(function () {
   "use strict";
angular
    .module("deviceManagement")
    .controller("DeviceListCtrl",
    ProductListCtrl);

function ProductListCtrl($http, $scope) {
    var vm = this;

    vm.devices = [];

    deviceList();


    function deviceList() {

      //..........
    }

  }
} ());

THEN RIGHT UNDER the ABOVE CODE I DO THIS

app.filter('deviceStatus', function () {

    var deviceStatusLookup = {
        1: "New Device",
        2: "Activated",
        3: "Unactivated"
    };

    return function (statusId) {
        var output = deviceStatusLookup[statusId];
        return output;
    }
});

Error on page console

deviceListCtrl.js:73 Uncaught ReferenceError: app is not defined

Answer 1

Check that you have included the app.js file.

Also, I would change the below:

app.filter('deviceStatus', function () {

to this:

angular
    .module("deviceManagement")
    .filter('deviceStatus', function () {

It is a good idea to not use var app and to just refer to the module, e.g. angular.module("deviceManagement"). See this answer.

Answer 2

Well in you case the issue is that in here:

(function () {
   "use strict";
   var app = angular.module("deviceManagement",['angularUtils.directives.dirPagination']);
}());

You have app in a lambda function, and it exists just in there.

To make it works you should have:

(function (window) {
   "use strict";
   var app = angular.module("deviceManagement",['angularUtils.directives.dirPagination']);
   window.app = app || {};
}(window));

So here we are injecting the window element in the lambda so you can define app globally (window.app = app || {}).

Note: Consider that the window.app approach is not the best.

Probably the angular.module("deviceManagement") syntax is the best way to go, in a way to have your code more modular.