×

Html & Html5

The World's best Software Development Study Portal

AngularJS Controllers


  • AngularJS controllers are used to control the flow of data of AngularJS application.

  • A controller is defined using ng-controller directive.

  • A controller is a JavaScript object containing attributes/properties and functions.

  • Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.

  • AngularJS controllers control the data of AngularJS applications.

  • AngularJS controllers are regular JavaScript Objects.




  • 	<div ng-app="myApp"  ng-controller="myCtrl" >
    
          First Name: <input type="text" ng-model="firstName">
          Last Name: <input type="text" ng-model="lastName">
    
    Full Name: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script>

    Output

    First Name:

    Last Name:

    Full Name: {{firstName + " " + lastName}}




    Controller Methods

    The example above demonstrated a controller object with two properties: lastName and firstName.

    A controller can also have methods variables as functions.
    The ng-controller="myCtrl" attribute defines a controller.

    The myCtrl function is a JavaScript function.

    AngularJS will invoke the controller with a $scope object.

    A controller can also have methods.


    Controllers In External Files

    In larger applications, it is common to store controllers in external files like.

    <script src="personController.js"></script>