How to display the list of functions in iMenu and collapse/uncollapse functions in angular js file

Question

I use js2-mode with emacs-prelude, imenu displays the list of functions and I can collapse and uncollapse the functions defined in a regular js file like this

function testFunction1(){
    console.debug("test function");
}

function testFunction2(arg1, arg2){
    console.debug("test function2");
}

It however doesn't work on a angular js file

'use strict';
app.controller('TestController', ['$scope', 'TestService',
    function($scope, TestService){

        function testFunction1(obj) {
            console.debug("Test Function");
        }

        var testVariable = {
            'field1': 'val1',
            'field2': 'val2'
        };

        $scope.scopeFunction1 = function(){
            console.debug("Scope Function ");
       };

       $scope.scopeVar ={
        'field1': 'val1',
        'field2': 'val2'
    };
}]);

It doesn't recognize - testFunction1 or scopeFunction1 as a function, they are not displayed on the iMenu and I couldn't collapse/uncollapse them. How can we configure emacs for working with angular js files.

Answer 1

Solution 1 (recommended):

A perfect solution for BOTH js-mode and js2-mode:

https://github.com/redguardtoo/emacs.d/blob/master/lisp/init-javascript.el

Screen shot,

Solution 2 (js2-mode only):

It's a little bit more complex to set up, but the imenu item will display more context and I GUESS imenu functions extracted this way could be hide/show by js2-mode:

you need change js2-imenu-extension-styles, please make sure you've installed latest js2-mode. Only in latest version of js2-mode, that variable is configurable since my pull request was merged just a few days ago (https://github.com/mooz/js2-mode/commit/31c49e02b58de7aa959b1cd03fe8381c545da810)

For :call-re part, use the regex I provided in solution1, for other parts, just copy/paste from samples defined in https://github.com/mooz/js2-mode/blob/master/js2-imenu-extras.el

In summary, solution 1 is simpler to setup which I recommend. solution 2 is more official and will give you more context information. so your choice.

BTW, for anyone who are interested in tech details,

1. This article explains the problem, my plan of the solution: http://blog.binchen.org/posts/why-emacs-is-better-editor-part-two.html

2. This is the actual implementation, after one month discussion with the js2-mode maintainers https://github.com/mooz/js2-mode/pull/169

3. you can use BOTH solution 1 and solution 2, the imenu items in solution 2 will take priority, you will NOT get duplicated imenu items

Answer 2

Someone else can provide more details, hopefully.

The short answer, as far as I can see, is that the js2-mode.el code uses a parser to add items to the Imenu menu, and this parser does not recognize the function definitions you have that are nested inside function($scope, TestService) - which is itself inside an array argument passed to app.controller etc.

Imenu typically fills out its menu by regexp matching. But js2-mode.el uses a parser to do that. You will need to descend into the details of this parsing to see what the problem is in this case. (At least it's not obvious to me, at first view.)