ANGULARJS controller detailed and sample code _ANGULARJS

Angularjs applications rely primarily on controllers to control the flow of data within the application. The controller is defined by the Ng-controller directive. A controller is a feature that contains properties/attributes and JavaScript objects. Each controller accepts the $scope parameter to specify the application/module, controlled by the controller.

<div ng-app= "" ng-controller= "Studentcontroller" > ...
</div>

Here, we have declared the controller studentcontroller using the ng-controller instruction. As a next step, we will define Studentcontroller as follows

<script>
function Studentcontroller ($scope) {
  $scope. Student = {
   firstName: "Yiibai",
   LastName: "com",
   fullname:function () {
     var studentobject;
     Studentobject = $scope. Student;
     return studentobject.firstname + "" + studentobject.lastname;
}} </script>

Studentcontroller defines $scope as a JavaScript object parameter.

The $scope represents the application, using the Studentcontroller object.

$scope. Student is the property of the Studentcontroller object.

FirstName and LastName are two properties of the $scope.student object. We have passed the default values to them.

FullName is a function of the $scope.student object, whose task is to return the merged name.

In the FullName function, we now want the student object to return the combination name.

As a description, you can also define the controller object in a separate JS file and put the relevant file in the HTML page.

You can now use the Studentcontroller student's properties using Ng-model or using an expression as follows.

Enter Name: <input type= "text" ng-model= "student.firstname" ><br>
Enter last name: <input type= "Text" ng-model= "Student.lastname" ><br>
<br> you
are entering: {{student.fullname ()}}

Now there are student.firstname and student.lastname two input boxes.

There are now student.fullname () methods added to HTML.

Now, as soon as you enter what is entered in the first name and LastName input box, you can see two names automatically updated.

Example

The following example shows the use of a controller.

The contents of the testangularjs.html file are as follows:

Output

Open textangularjs.html in your Web browser and see the following results:

The above is the ANGULARJS controller data collation, follow-up continue to collate relevant knowledge, thank you for your support to this site.