Home >Web Front-end >JS Tutorial >A brief introduction to the use of AngularJS controllers_AngularJS

A brief introduction to the use of AngularJS controllers_AngularJS

WBOYOriginal: 2016-05-16 15:54:391016browse

AngularJS applications mainly rely on controllers to control the flow of data within the application. Controllers are defined using the ng-controller directive. A controller is a function that contains properties/properties and JavaScript objects. Each controller accepts the $scope parameter to specify the application/module that is controlled by the controller.

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

Here, we have declared the controller studentController using the ng-controller directive. As 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 JavaScript object parameter.
$scope represents the application, using the studentController object.
$scope.student is a property of the studentController object.
FirstName and lastName are two properties of the $scope.student object. We've passed default values to them.
fullName is a function of the $scope.student object, its task is to return the merged name.
In the fullName function, we now want the student object to return the combined name.
As a note, you can also define the controller object in a separate JS file and put the relevant file in the HTML page.

Now you can use the studentController attribute using ng-model or using expressions as follows.

Enter first 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()}}

There are now two input boxes: student.firstName and student.lastname.
There is now student.fullName() method added to HTML.
Now, as long as you enter what you enter in the first name and lastname input boxes, you can see the two names automatically update.

Example

The following example will demonstrate the use of a controller.
The content of the testAngularJS.html file is as follows:

<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">

Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
function studentController($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Output

Open textAngularJS.html in a web browser and see the following results:

2015616120726250.png (679×365)

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief introduction to JavaScript’s support for the traditional document object model_Basic knowledgeNext article：A brief introduction to JavaScript’s support for the traditional document object model_Basic knowledge

See more

A brief introduction to the use of AngularJS controllers_AngularJS

Related articles