Best way of defining controller in angularJs

Option 1:

var myapp = angular.module("mainApp",[]);
myapp.controller("testController",function($scope)
{
    $scope.value="test";
})

Option 2:

angular.module("mainApp", ["moduleController"]);
angular.module("moduleController",[]).controller("testController",function($scope){
    $scope.value="test";
})

Option 2 is better because this will allow you to write your controllers in separate files. As a result your code will be more readable. It'll also help you if you want to reuse your controllers in other AngularJS projects.

For example, you can write the following code in one file e.g app.js:

angular.module('mainApp',['ngRoute', 'appController']);

And you can write the controller in another file e.g controllers.js:

var appController= angular.module('appController', []);

appController.controller('testController', ['$scope',
    function($scope) {
        $scope.value="test";
    }
]);

Now, you can reuse the controllers in another project by just adding the controllers.js file in the project and adding dependency to appController in the app.js file.

Neither, none of them will run in production environment where all script will be minified. Angular's injector subsystem is able to find and resolve $scope, $location, $etc and provide them to the component as requested.

myapp.controller("testController",function($scope)
{
   $scope.value="test";
})

However, upon minification, the code above will end up looking something like:

a.controller("testController",function(b)
{
   b.value="test";
})

which would cause the dependency injection to fail and result in a runtime error.

You will have to use it as below:

var myapp=angular.module("mainApp",[]);
myapp.controller("testController", ['$scope',function($scope)
{
   $scope.value="test";
}]);

In this case, the controller function is initialized inside of an array after a list of each dependency as string literals. This ensure dependency injection is properly maintained, even through minification or uglification.