CODEWITHSUNDEEP
javascriptangularjs
Ramzy Abourafeh
Ramzy Abourafeh

Reputation: 1195

AngularJS controller and methods

I'm a beginner in angularjs with a few questions about controllers.
Here's my example controller:

function exampleController($scope)
{
   $scope.sampleArray = new Array();

   $scope.firstMethod = function()
   {
      //initialize the sampleArray
   };

   $scope.secondMethod = function()
   {
      this.firstMethod();
   };
};

Here are my questions:

Upvotes: 22

Views: 64677

Answers (3)

Mark Rajcok
Mark Rajcok

Reputation: 364687

@Josh and @Christopher already covered your questions, so I won't repeat that.

I found ng-initialize but I can't know how to use that :-(

The directive is actually ng-init. Sometimes (e.g., if you are starting to use Angular in parts of an application and you still need to dynamically generate a view/HTML page server-side), ng-init can sometimes a useful way to initialize something. E.g.,

<div ng-controller="ExampleCtrl">
   <form name="myForm">
     <input type="text" ng-model="folder" ng-init="folder='Bob'">

Here's an example where someone needed to use ng-init: rails + angularjs loading values into textfields on edit

I'd also like to mention that controllers are not singletons. If you use ng-view, each time you go to a different route, a new controller is created. The controller associated with the view you are leaving is destroyed, and the controller associated with the view you are going to is executed. So that "initialization code" in a controller could get executed multiple times while an app is running. E.g, if you visit a page, go elsewhere, then come back, the same controller function (and its "initialization code") would be executed twice.

If you want something to truly run once, put it in a service or in a module's config() or run() methods. (Services are singletons, and hence each service is instantiated only once, so initialization code in a service is only run once.)

Upvotes: 7

Christopher Marshall
Christopher Marshall

Reputation: 10736

you call the first method by using $scope.

So 

   $scope.secondMethod = function()
   {
      $scope.firstMethod();
   };

Not really sure what you mean in your second question.

For your third quesiton, you can either have the method run automatically "onload" on controller, OR run it via an front-end angular binding.

e.g. Run Automatically

function exampleController($scope)
{
   $scope.sampleArray = new Array();

   $scope.firstMethod = function()
   {
      //initialize the sampleArray
   };

   $scope.secondMethod = function()
   {
      $scope.firstMethod();
   };


   $scope.secondMethod(); // runs automatically.

};

Run on binding

<div ng-controller="ExampleController"> <!-- example controller set up in namespace -->

<button class="btn" ng-click="secondMethod()">Run Second Method</button>

</div>

Upvotes: 7

Josh David Miller
Josh David Miller

Reputation: 120513

You call a method the same way you declared it:

$scope.secondMethod = function() {
  $scope.firstMethod();
};

Which you can also call from HTML like so:

<span>{{secondMethod()}}</span>

But controllers don't really have "constructors" - they're typically used just like functions. But you can place initialization in your controller function and it will be executed initially, like a constructor:

function exampleController($scope) {
  $scope.firstMethod = function() {
    //initialize the sampleArray
  };

  $scope.secondMethod = function() {
    $scope.firstMethod();
  };

  $scope.firstMethod();
}

Upvotes: 32

Related Questions