Unable to understand the controller functionality in Angular JS

Question

I am new to Angular JS.I am trying to gain some in depth knowledge in it by understanding the controller functionality.

I came across the following code snippets.

var App = angular.module('clientApp', ['ngResource', 'App.filters']);
 App.controller('ClientCtrl', ['$scope',function ($scope) {

   }]);

What significant difference does it make if i write :

 var App = angular.module('clientApp', ['ngResource', 'App.filters']);
 App.controller('ClientCtrl', function ($scope) {

   });

My Understanding: I do understand that something written in the square brackets is dependency for that particular module or controller.However,I couldnot understand the reason for writing

          "['$scope',function($scope)"

instead of

   App.controller(controllername,function($scope){

   });

Any help wouls be highly appreciated!

you don't have to do that, and in fact i think it makes angular code a lot harder to scan/read. i don't mind libs and other black boxes using it (for min), but i don't think the (hopefully) tiny application files will slow down startup because they aren't minified... — dandavis
– dandavis, Commented Apr 9, 2016 at 21:56

Arizona2014 · Accepted Answer · 2016-04-09 21:40:30Z

1

It enables AngularJS code to be minified. AngularJS uses parameter names to inject the values to your controller function. In JavaScript minification process, these parameters are renamed to shorter strings. By telling which parameters are injected to the function with a string array, AngularJS can still inject the right values when the parameters are renamed.

answered Apr 9, 2016 at 21:40

Arizona2014

1,3472 gold badges18 silver badges33 bronze badges

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

Comments

Marco V · Accepted Answer · 2016-04-10 00:56:17Z

It should actually be written like this according to the John Papa Style Guide:

First we create and name a module called 'app'. We also create a controller called 'SomeController'.

angular
    .module('app')
    .controller('SomeController', SomeController);

Now we inject the dependencies we require into the controller

SomeController.$inject = ['dataservice', 'logger'];

Now we create the corresposnding function for the controller. Notice how the dependencies are included?

function SomeController(dataservice, logger) {
    var vm = this;
    vm.avengers = [];

    activate();

    function activate() {
        return getAvengers().then(function() {
            logger.info('Activated Avengers View');
        });
    }

    function getAvengers() {
        return dataservice.getAvengers()
            .then(function(data) {
                vm.avengers = data;
                return vm.avengers;
            });
    }
}

Collectives™ on Stack Overflow

Unable to understand the controller functionality in Angular JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related