Different approach to write controller in angular js

Question

i am pretty new in angular js. so different approach in angular coding confuse me. i just found two different approach to write angular controller declaration.

first approach

angular.module('App', [])
      .controller('AppCtrl', function ($scope) {

          $scope.model = 0;

          $scope.initSlider = function () {

          };
    });

2nd Approach

angular.module('MyApp', []);

function MyCtrl($scope) {
    angular.element(document).ready(function () {
        document.getElementById('msg').innerHTML = 'Hello';
    });
}

just see the first code there controller declared like

.controller('AppCtrl', function ($scope) {
})

but in second one just a function has been declared as controller

function MyCtrl($scope) { }

http://jsfiddle.net/tnq86/15/

http://jsfiddle.net/cVsdp/4/

just tell me two different approach has been taken to declare controller ? which one is right one and when people follow second approach where controller word is not used to declared controller. i need guide line to understand 2 different approach.

Answer 1

Putting aside the logic in your second controller.

The first options is the recommended one.

The only reason the second option worked in the first place was for demo's purpose and should not be used. Even more that way of declaring a controller was deprecated in 1.3+.

For more information, have a look at: https://docs.angularjs.org/guide/migration. Specifically the section that talks about Controllers.

Extract from it:

$controller will no longer look for controllers on window. The old behavior of looking on window for controllers was originally intended for use in examples, demos, and toy apps. We found that allowing global controller functions encouraged poor practices, so we resolved to disable this behavior by default.

Answer 2

You have to follow

1st Approach

angular
.module('App', [])
      .controller('AppCtrl', function ($scope) 
      {
       //you code
      };
});

2nd Approach

angular
.module('App', [])
      .controller('AppCtrl', ['$scope', function ($scope) {
        //you code
       };
}]);

3rd Approach

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

function SomeController($scope) { 
      //you code
}

I would like to suggest 2nd approach, it also work after minified JavaScript. or you can also follow the Angular Style Guide.

Answer 3

In my enterprise we are developping in angular, and the style that we use I guess it's clearer.

(function() {
  'use strict';

  function myController(_, $window) {
    ...
  }

  //Injections into the controller
  myController.$inject = ['lodash', '$window'];
  angular.module('myModule').controller('myController', myController);
})();