function is undefined if no module is declared in Angular

Question

I am new in Angular and I am studying controllers. In my code I setup a simple controller access but when I tried to run in my browser I encountered a series of error messages that looks like this:

"Error: [ng:areq] Argument 'personController' is not a function, got undefined

In my file I haves something like this:

 <h1>CONTROLLER</h1>
 <div class="row" ng-app="" ng-controller="personController">

    <div class="col-sm-6">

        <div class="form-group">
            <label class="col-md-3">First Name: </label>
            <input type="text" class="form-control" ng-model="firstname" />
        </div>

        <div class="form-group">
            <label class="col-md-3">Last Name: </label>
            <input type="text" class="form-control" ng-model="lastname" />
        </div>

        <div class="form-group">
            <p>Full Name: {{ firstname + ', ' + lastname }}
        </div>

    </div>

</div>
<script type="text/javascript">

    function personController($scope) {
        $scope.firstname = 'Jerielle';
        $scope.lastname = 'Doe';
    }

</script>

But when I tried to declare a module it works:

 <h1>CONTROLLER</h1>
 <div class="row" ng-app="myApp" ng-controller="personController">

    <div class="col-sm-6">

        <div class="form-group">
            <label class="col-md-3">First Name: </label>
            <input type="text" class="form-control" ng-model="firstname" />
        </div>

        <div class="form-group">
            <label class="col-md-3">Last Name: </label>
            <input type="text" class="form-control" ng-model="lastname" />
        </div>

        <div class="form-group">
            <p>Full Name: {{ firstname + ', ' + lastname }}
        </div>

    </div>

</div>
<script type="text/javascript">

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

    myApp.controller('personController', function($scope) {
        $scope.firstname = 'Jerielle';
        $scope.lastname = 'Doe';
    });

</script>

I am following the tutorials in w3schools.

My question is can i create a controller w/o creating first the module?

Answer 1

1st one you used is nothing but global function declaration of controller, in which you declare controller as function. To analyse the Angular the function should be treated as controller we need to use post-fix as Controller.

The reason it is not working because you are using Angular 1.3 + version where the declaration of global function is disabled by default. Whatever you need to do is just by creating a module using angular.module and then append the component to it.

For getting you code working you need to enable to setting in angular configuration phase

app.config(['$controllerProvider',
  function($controllerProvider) {
    $controllerProvider.allowGlobals();
  }
]);

NOTE

Though you can enable this global declaration function using above setting to make your 1st code working, I'd not prefer to do this. Use angular.module to make your code good as area base.

Here is the similar answer which explains

Answer 2

You do need to create an App. This is true for any angular component (Controllers, Directives, services etc.). This is because when you use a controller, angularhas done more than just bind a function, there are additional features that have been added to you functions (similar to inheritance), that add your controller to digest cycles, scopes, etc.

Answer 3

The controller is a part of the module. Basicly the module is the thing that 'creates' your app, the controller executes the commands you want it to execute in order for your app to be as you want it to be. Compare it to a human body. The module is the torso, while the controllers are the arms. You can't have a functioning human body with arms, but without torso.

Answer 4

Use this approach , its better even after the minification

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

  myApp.controller('parentController',parentController);

   parentController.$inject = ["$scope"] // inject dependencies 

    function parentController($scope) {

    .....
   }