Detailed explanation of controller in AngularJS introductory tutorial

2021-07-06 09:53:36
OfStack

AngularJS controller

The AngularJS controller controls the data of the AngularJS application.

The AngularJS controller is a regular JavaScript object.

AngularJS Controller

The AngularJS application is controlled by the controller.

The ng-controller directives define the application controller.

The controller is an JavaScript object, which is created by the constructor of the standard JavaScript object.

AngularJS instance


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

 Name : <input type="text" ng-model="firstName"><br>
 Last name : <input type="text" ng-model="lastName"><br>
<br>
 Name : {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  }
});
</script>

</body>
</html>

Run results:

Name:
Last name:

Name: John Doe

The AngularJS application is defined by ng-app. Applications in the < div > Run inside.

The ng-controller= "myCtrl" attribute is an AngularJS instruction. Used to define 1 controller.

The myCtrl function is an JavaScript function.

AngularJS uses the $scope object to invoke the controller.

In AngularJS, $scope is an application image (belonging to application variables and functions).

The controller's $scope (equivalent to scope, control scope) is used to hold the AngularJS Model (model) objects.

The controller creates two attributes (firstName and lastName) in the scope.

The ng-model instructions bind the input fields to the attributes of the controller (firstName and lastName).

Controller method

The above example demonstrates a controller object with lastName and firstName properties.

The controller can also have methods (variables and functions):

AngularJS instance


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

 Name : <input type="text" ng-model="firstName"><br>
 Last name : <input type="text" ng-model="lastName"><br>
<br>
 Name : {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  }
});
</script>

</body>
</html>

Running effect:

Name:
Last name:

Name: John Doe

Controllers in external files

In large applications, the controller is usually stored in an external file.

Just put < script > The code in the tag can be copied to an external file named personController. js:

AngularJS instance


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

 Name : <input type="text" ng-model="firstName"><br>
 Last name : <input type="text" ng-model="lastName"><br>
<br>
 Name : {{firstName + " " + lastName}}

</div>

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

</body>
</html>

Run results:

Name:
Last name:

Name: John Doe

Other instances

The following example creates a new controller file:


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

Save the file as namesController. js:

Then, use the controller file in the application:

AngularJS instance


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl"> 

<ul>
 <li ng-repeat="x in names">
  {{ x.name + ', ' + x.country }}
 </li>
</ul>

</div>

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

</body>
</html>

Running effect:

Jani, Norway Hege, Sweden Kai, Denmark

The above is the collation of AngularJS controller data, which will be supplemented in the future.