The ng-controller Directive in AngularJS is used to add a controller to the application. It can be used to add methods, functions, and variables that can be called on some event like click, etc to perform certain actions.
Syntax:
<element ng-controller="expression">
Contents...
</element>
Parameter value:
- expression: It refers to the name of the controller.
Example 1: This example uses the ng-controller Directive to display the input elements.
HTML
<!DOCTYPE html> <html> <head> <title>ng-controller Directive</title> <script src= </script> </head> <body ng-app="app" style="text-align:center"> <h1 style="color:green">GeeksforGeeks</h1> <h2>ng-controller Directive</h2> <br> <div ng-controller="geek"> Name: <input class="form-control" type="text" ng-model="name"> <br><br> You entered: <b> <span>{{name}}</span> </b> </div> <script> var app = angular.module('app', []); app.controller('geek', function($scope) { $scope.name = "geeksforgeeks"; }); </script> </body> </html> |
Output:
Example 2: This example uses the ng-controller Directive to display content after clicking the button.
HTML
<!DOCTYPE html> <html> <head> <title>ng-controller Directive</title> <script src= </script> </head> <body ng-app="app" style="text-align:center"> <h1 style="color:green"> GeeksforGeeks </h1> <h2>ng-click Directive</h2> <div ng-controller="app"> <button class="btn btn-default" ng-click="best()"> Button 1 </button> <button class="btn btn-primary" ng-click="notbest()"> Button 2 </button> <br> <p>Quick sort is <b>{{res}}</b>.</p> </div> <script> var app = angular.module('app', []); app.controller('app', function($scope) { $scope.best = function() { return $scope.res = "best"; }; $scope.notbest = function() { return $scope.res = "not always good"; }; }); </script> </body> </html> |
Output:
Share your thoughts in the comments
