Can we use angular js ng init directive for Controller initialize?

[Jeevanandanj]

After developing an application, I had come across with great confusion.

can we use ngInit directive for Controller to initialize or get the data for the current view (controller)?

I am using ngInit for controller, since sometime the scripts are loading two times. If I call a server side method, in the controller function end, then two calls will go to the server.

If ngInit for controller is wrong to initialize data, can you please suggest a solution.

EXAMPLE

app.controller('testcontrol', ['$scope', '$http', function($scope, $http) {
    $scope.resultset = [];
    $scope.GetData =function(){
       $http.get('http://localhost:3000/testdata').then(function(data) {
          $scope.resultset = data.data.resultset;
          console.log($scope.resultset);
      },function(error) {
        $scope.error = error;
      })
    }

    $scope.init=function(){
        $scope.GetData();
    }
}]);

HTML:

<div class="wrapper-md" ng-init="init()" ng-controller="testcontrol">
    <ul>
        <li data-ng-repeat="result in resultset">
            {{result.name}}
        </li>
    </ul>
</div>

[petebacondarwin]

There is no need to use ng-init here. The controller's constructor function is called whenever the controller is instantiated, so you can just call the relevant initialization code there. This is one of the main goals of a controller...

app.controller('Testcontrol', ['$scope', '$http', function($scope, $http) {
    $scope.resultset = [];
    $scope.GetData =function(){
       $http.get('http://localhost:3000/testdata').then(function(data) {
          $scope.resultset = data.data.resultset;
          console.log($scope.resultset);
      },function(error) {
        $scope.error = error;
      })
    }
    $scope.GetData();
}]);

HTML:

<div class="wrapper-md" ng-controller="Testcontrol">
    <ul>
        <li data-ng-repeat="result in resultset">
            {{result.name}}
        </li>
    </ul>
</div>

By the way, you should give your controller names that start with uppercase characters.

[petebacondarwin]

Closing as this is not an issue with Angular, but more of a support question. Hopefully the feedback I have given will be sufficient to help you.

[Jeevanandanj]

Thanks. Even I didn't post it as bug. I want to know the reason, that's it.

And I've another question. Angular Team suggested that NgInit directive should be used only for ng-repeat. Not for other things.

Why we should not use for other things?

Is there any issue?

[petebacondarwin]

@Jeevanandanj - sorry to be confusing. The issue tracker should really only be used for bug reporting and feature requests.

Regarding ng-init, we should try to minimise the programmatic logic that is in the template. We can unit test JS code files but it is not so easy to test code in templates. The controllers are the place to put initialization logic. The only place where we felt that ng-init provided something that wasn't easily achievable elsewhere was the ability to set an alias for the current item in an ng-repeat iteration.

[MrOutput]

I appreciate that you said not to do the init logic in the template which sounds like good design. However, you never did address the OP's real concern, that his requests were being made twice. If the correct way to do init logic is in the controller, what is causing the init logic to be called twice?

I am also having the same issue, and this is not the first time. Several of my colleagues have also experienced the same issue. Thank you for your time in advance.

[petebacondarwin]

@MrOutput could you provide an example of a controller being called twice? It is difficult to diagnose your problem without a reproducible example.

[MrOutput]

I wish I could provide an example, but I can't purposely reproduce the error, if I could, I'd fix it. It happens in angular occasionally. Perhaps something wasn't setup correctly in a service or directive. I am not sure how it happens, or what causes it. It just does. Everything in controller space, gets called twice. Usually controller setup occurs in controller space (init, fetching db data etc). And that means that my XMLHttpRequests are also called twice, making the application 2x slower and doubling my database load for no reason. I cannot reproduce the error.

[petebacondarwin]

I'm afraid there is nothing we can do if you cannot reproduce the error.

[fionagithub]

Why does AngularJS include an empty option in select? and my default value is empty ?
blow is my code:

.directive('gettheme',function( ){
return {
    restrict:"AE",
   template:"<select ng-init='themedata=theme[0]' ng-model='themedata' ng-options='item for item in theme' class='form-control'></select>",
    link:function(scope, element, attrs){
      scope.theme=['macarons', 'infographic'];
    }
}
})

[lucaslm]

How about lifecycle hooks? Is it preferable to use, for instance, this.$onInit on the controller over a ng-init directive on the template?
Also it might solve the loading twice issue, right?