AngularJs - Functions In Controller

AngularJs Functions In Controller

Functions in Controller

Creating Controllers in AngularJS

You might now be having a question in your mind:

Is it that the controllers can have code only for model creation/initialization. Is it possible to write code or functions which can perform model manipulations?

Well, yes.

Controllers can have model manipulation code as well. Functions can also be defined inside the controllers.

Let us now see how we can declare functions within a controller and how this can be accessed from a web page.

Let us now see how we can invoke the function from the view:

Functions defined inside controller can be invoked from view by any of the below ways:

Invoking using Angular expression

Invoking on events like click, change, etc

Let us first understand the differences between the two ways of invocation.

Invoke function using Angular expression	Invoking on events like click, change, etc.
Sample: {{getLength()}}	Sample: <button ng-click="getStrength()"> Get Strength of password</button>
As expressions are evaluated on page load, function call will happen for the first time, on page load itself.
Expressions continue to be evaluated and updated instantly due to two way binding and hence any update to the model used in the function will cause re-invocation of the function written inside an expression.	Function is invoked only when the click event is triggered for the button.

Let us now invoke the getLength() function and getStrength() function from the view.

Declaring Functions in a Controller

Highlights:

Declare functions inside an Angular controller

Use the function declared in an Angular view.

Demosteps:

Create a duplicate of 5-Controller.html and save the file as 5-Controller_3.html. 5-Controller_3.html page will look like shown below, on page load.

The length of password will be displayed as ‘8’ on page load, as the default password set inside the controller is of length 8.

On clicking the button ‘Get Strength of password’, the appropriate message is displayed, as shown below.

Let us now change the password to ‘pass’. The display about the current length is instantly updated, as shown below.

Only on click of the ‘Get Strength’ button, the current strength is shown.

Let us now modify 5-Controller_3.html, to contain the below code to display the expected output:

CODE/PROGRAM/EXAMPLE

<html ng-app="app">  
<head>   
   <script src="lib/Angular/angular.js"></script>
   <script src="js/controllers.js"></script>
   <script src="js/app.js"></script>
</head>
<body>   
     <div id="div1" ng-controller="userCtrl" style="border: 1px solid red">
    <p><label for="username">Username:</label>
    <input type="text" name="username" ng-model="username" id="username" >
    <span id="displayUsername"> Your username is:<i>{{ username }}</i>  </span></p>
    
    <p><label for="mobile">Mobile:</label> 
    <input type="number" name="mobile" ng-model="mobile"  id="mobile" >
    <span id="displayMobile"> Your mobile number is:<i>{{ mobile }}</i>
    </span></p>
    
    <p><label for="password">Password:</label>
        
        <input type="password" id="password" ng-model="password" name="password" /> 
        <span id="displayPassword"> Your entered the password: <i>{{password}}</i>.
        .
        Length is {{getLength()}}!
        </span></p>
        <button ng-click="getStrength()">Get Strength of password</button>

    </div>
    <br>
      <div id="div2" ng-controller="anotherUserCtrl" style="border: 1px solid blue">
        <p><label for="mobile">Mobile:</label> 
    <input type="number" name="mobile" ng-model="mobile"  id="mobile" >
    <span id="displayMobile"> Your mobile number is:<i>{{ mobile }}</i>   </span></p>
    </div>
</body>
</html>

#angular_Functions_in_Controller #angularjs_Functions_in_Controller #angular_Declaring_Functions_in_a_Controller #angularjs_Declaring_Functions_in_a_Controller #angular_Declaring_Functions_in_a_Controller_example

(New page will open, for Comment)

Not yet commented...