How to define Methods in Controller ?

viastudyviastudy 9:44 PM

Normally, one would want to define multiple methods in the controller to separate the business logic.
For example, suppose if you wanted to have your controller do 2 basic things,

Perform the addition of 2 numbers
Perform the subtraction of 2 numbers
You would then ideally create 2 methods inside of your controller, one to perform the addition and the other to perform the subtraction.

Let's see a simple example of how you can define custom methods within an Angular.JS controller. The controller will simply return a string.

<!DOCTYPE html>
<html>
<head>
 <meta chrset="UTF 8">
<title>Event Registration</title>
 <link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> ViASTUDY Global Event</h1>
<script src="lib/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
 Tutorial Name :<input type="text" ng-model="tutorialName"><br>
<script src="lib/jquery-1.11.3.min.js"></script>
<div ng-app="DemoApp" ng-controller="DemoController">
 <br>
 This tutorial is {{tutorialName}} 
</div>
 $scope.tName = function() {
<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
</html>
return $scope.tName;
    };
});
</script> 
</body>
    Code Explanation:
    1. Here, we are just defining a function which returns a string of "AngularJS". The function is attached to the scope object via a member variable called tutorialName.
    2. If the command is executed successfully, the following Output will be shown when you run your code in the browser.

angular.module('app',[]).controller('HelloWorldCtrl',function($scope)
{
 $scope.message = "Hello World"
});
    The above code does the following things,
    1. Define a module called "app" which will hold the controller along with the controller functionality.
    2. Create a controller with the name "HelloWorldCtrl". This controller will be used to have a functionality to display a "Hello World" message.
    3. The scope object is used to pass information from the controller to the view. So in our case, the scope object will be used to hold a variable called "message".
    4. We are defining the variable message and assigning the value "Hello World" to it.
    Step 2) Now, in your Sample.html file add a div class which will contain the ng-controller directive and then add a reference to the member variable "message"
    Also don't forget to add a reference to the script file app.js which has the source code for your controller.
    <!DOCTYPE html>
    <html ng-app="app">
    <head>
     <meta chrset="UTF 8">
     <title>Event Registration</title>
     <link rel="stylesheet" href="css/bootstrap.css"/>
    </head>
    <body>
    <h1> ViASTUDY Global Event</h1>
     <div ng-controller="HelloWorldCtrl">{{message}}</div>
    <div class="container">
    </div>
    <script src="lib/angular.js"></script>
    <script src="https://code.angularjs.org/1.6.9/angular.js"></script>
    <script src="app.js"></script>
    <script src="lib/bootstrap.js"></script>
    <script src="lib/jquery-1.11.3.min.js"></script>
    </body>
    </html>
    If the above code is entered correctly, the following Output will be shown when you run your code in the browser.
Tags

Post a Comment

0 Comments