Contact Sing up Log in
IMG-LOGO
Latest News : Samsung Galaxy Z Fold3 Quantum computing big take... iPhone 13 series is expected to launch in September Facebook removes malicious accounts, groups and pages Windows 11 Introducing
Home Tutorial controllers of AngularJS

controllers of AngularJS

by MH RISHAD - 25 Dec 2019
IMG

AngularJS controllers control the data of AngularJS applications.

AngularJS controllers are regular JavaScript Objects.

AngularJS Controllers

AngularJS applications are controlled by controllers.

The ng-controller directive defines the application controller.

A controller is a JavaScript Object, created by a standard JavaScript object constructor.

 

AngularJS Example

<div ng-app="FirstApp" ng-controller="FirstCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{FirstName + " " + lastName}}
</div>
<script>
var app = angular.module('FirstApp', []);
app.controller('FirstCtrl', function($scope) {
  $scope.FirstName = "Smith";
  $scope.LastName = "Cree";
});
</script>

 

Application explained:

The AngularJS application is defined by  ng-app="FirstApp". The application runs inside the <div>.

The ng-controller="FirstCtrl" attribute is an AngularJS directive. It defines a controller.

The FirstCtrl function is a JavaScript function.

AngularJS will invoke the controller with a $scope object.

In AngularJS, $scope is the application object (the owner of application variables and functions).

The controller creates two properties (variables) in the scope (FirstName and lastName).

The ng-model directives bind the input fields to the controller properties (FirstName and 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):

 

AngularJS Example

<div ng-app="FirstApp" ng-controller="PersonCtrl">
First Name: <input type="text" ng-model="FirstName"><br>
Last Name: <input type="text" ng-model="LastName"><br>
<br>
Full Name: {{FullName()}}
</div>
<script>
var app = angular.module('FirstApp', []);
app.controller('PersonCtrl', function($scope) {
  $scope.FirstName = "Smith";
  $scope.LastName = "Cree";
  $scope.FullName = function() {
    return $scope.FirstName + " " + $scope.LastName;
  };
});
</script>

Controllers in External Files

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

Just copy the code between the <script> tags into an external file named personController.js:

 

AngularJS Example

<div ng-app="FirstApp" ng-controller="PersonCtrl">
First Name: <input type="text" ng-model="FirstName"><br>
Last Name: <input type="text" ng-model="LastName"><br>
<br>
Full Name: {{FullName()}}
</div>
<script src="PersonController.js"></script>

 

Another Example

For the next example we will create a new controller file:

angular.module('FirstApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
  ];
});

Save the file as namesController.js:

 

And then use the controller file in an application:

 

AngularJS Example

<div ng-app="FirstApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>
<script src="namesController.js"></script>
Share:
Share

0 Comments

Leave a Comment

Required fields are marked *

Stay Connected

Most Popular

Featured Video

Subscribe

Get all latest content delivered to your email free.