AngularJS Basic Study Notes Controller_AngularJS

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

AngularJS controllers are ordinary JavaScript objects.

AngularJS Controller
AngularJS applications are controlled through controllers.

The ng-controller directive defines an application controller.

A controller is a JavaScript object that can be created through standard JavaScript object constructors.

<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 ng-app="myApp". The effective scope of the application is in the

where ng-app is located.

　ng-controller="myCtrl" attribute is an AngularJS directive, which defines a controller.

The myCtrl function is an ordinary JavaScript function.

AngularJS uses the $scope object to call controllers.

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

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

The ng-model directive binds the value of the input tag to the controller's properties (firstName and lastName).

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

Controllers can also contain methods (assign 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>

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

Copy the code in the <script> tag to the personController.js external file: <br /> </script>

<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 namesController.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 the 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>

The above is the entire content of this article, I hope you all like it.