Retrieve an angularjs controller defined using the module pattern

Question

I would like to define my controller using the module pattern like this:

    (function(ng, app) {

    // Controller constructor.
    function Controller($scope) {

        this.scope = $scope;
        this.scope.fmembers = [
             {
                 name: 'Member 1',
                 role: 'Head of Family',
                 age: 55
             },
             {
                 name: 'Member 2',
                 role: 'Brother of Head of Family',
                 age: 51
             }
        ];

        Controller.prototype = {

            getFMembers: function() {
                return this.scope;
            }
        };

        return( this );
    }

    // Define the Controller as the constructor function.
    app.controller('ftreeController', Controller );
})(angular, anmDesktop);

If I do that how can I retrieve this controller (ftreeController) from the module? For example, I would like to use freeController in the routeprovider in app.config:

$routeProvider.when('/view2', {
    templateUrl: 'partials/partial2.html', 
    controller: ftreeController'
});

In the routeprovider described above, I get an error (ftreeController not defined ...)

Thank you.

Josh David Miller · Accepted Answer · 2013-01-05 06:58:24Z

2

There were a few errors in your code (like missing quotes) that I assume are copy and paste errors when making the post. Correcting those, it's just a matter of loading order.

The controller must be defined before the routes are configured and your app must be defined before both. I also put routes in a similarly-defined file to show how this could work on scale.

However, absent a loading system like AMD, I am not sure why you are choosing to define your code this way, but it will work.

I created a Plunker to demonstrate it working.

A few things to keep in mind: first, controllers in Angular are just functions. I am not sure why you created a copy of the scope and added it as a member property of the controller object nor why you declared a controller function off the prototype. Because of Angular's dependency injection, the function will have everything it needs when it runs, so we can just use a normal, plain-old javascript function. In most angular projects, controllers are just defined like this:

app.controller( 'myCtrl', function( $scope ) { 
    //... 
});

answered Jan 5, 2013 at 6:58

Josh David Miller

121k16 gold badges129 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gurunandan Bhat Over a year ago

Thanks for pointing the way. I was trying to avoid exposing controllers by name (like the ones generated by angular-seed). Clearly the method controller method of app in your solution allows me to do this much better as well not define named objects. Thanks once again

Josh David Miller Over a year ago

@Ya.Perelman Glad I could help out. I prefer the way sprout handles modules as opposed to seed: github.com/thedigitalself/angular-sprout

Collectives™ on Stack Overflow

Retrieve an angularjs controller defined using the module pattern

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related