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

i think you should use app.controller in your deviceListCtrl.js in place of angular.controller — MukulSharma, Sep 02 '16 at 00:59

score 3 · Accepted Answer · edited May 23 '17 at 12:32

3

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.

edited May 23 '17 at 12:32

Community

1
1

answered Sep 02 '16 at 01:22

ScottL

1,755
10
7

Yep @ScottL this one is definitely the best approach. – borracciaBlu Sep 02 '16 at 01:31
Thanks , this make sense to me now. – Sep 02 '16 at 21:35

borracciaBlu · Answer 2 · 2016-09-02T01:49:46.960

0

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.

edited Sep 02 '16 at 01:49

answered Sep 02 '16 at 01:29

borracciaBlu

4,017
3
33
41

1. don't you mean IIFE? (not lambda) 2. What is a better approach? – Sep 02 '16 at 01:38
thanks @CodingAway i have to confess you that i didn't know that the pattern name of the `(function(){ ... })()` was IIFE. The syntax `function()` is for anonymous functions and so I called `lambda` – borracciaBlu Sep 02 '16 at 01:45
The best approach as @ScottL suggested is the `angular.module("deviceManagement")` one but it was not explaining why you were receiving `app is not defined` . – borracciaBlu Sep 02 '16 at 01:47

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

2 Answers2

To make it works you should have:

Linked