AngularJS basic study Notes controller

The AngularJS controller is used to control the data of AngularJS applications.

The AngularJS controller is just a regular JavaScript object.

AngularJS controller
AngularJS applications is controlled by a controller.

The ng-ES17en directive defines an application controller.

A controller is an JavaScript object that can be created using the standard JavaScript object constructor.

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

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('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
</script>

Code explanation:

AngularJS application is defined by ES31en-ES32en ="myApp". The effective scope of application is located at the location of ES35en-ES36en < div > In the.

ng-controller ="myCtrl" property is 1 AngularJS directive, which defines 1 controller.

The myCtrl function is a normal JavaScript function.

AngularJS USES the $scope object to invoke the controller.

In AngularJS, $scope is an application object (that is, the owner of the application variable and function).

The controller contains two properties (or variables) : firstName and lastName. They are attached to the $scope object.

The ES67en-ES68en directive binds the value of the input tag to the controller properties (firstName and lastName).

Method of controller
The example above shows that the controller object contains two properties: lastName and firstName.

The controller can also contain methods (assigning functions to variables) :

<div ng-app="myApp" 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('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  }
});
</script>

Place the controller in an external file
In large applications, controller code is often written in external files.

will < script > The code in the tag is copied to the personController.js external file:

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

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 src="personController.js"></script>

Another example
Create a new controller file and name it ES96en.js:

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

Then use this controller file in application:

<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>

This is the end of this article, I hope you enjoy it.