Contact Sing up Log in
IMG-LOGO
Latest News : OnePlus Launch Android 11 Tiktok Deal With Oracle Why choose PHP for WEB ? China Ban to sell 5G networks Kit in UK from Huawei UV light to kill coronavirus ?
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.