AngularJS applications mainly rely on controllers to control the flow of data in the application. The controller is defined using the ng-controller instruction. A controller is a function that contains properties/properties and JavaScript objects. Each controller accepts the $scope parameter to specify the application/module, which is controlled by the controller.
<div ng-app="" ng-controller="studentController">...</div>
Here we have declared a controller studentController that uses the ng-controller directive. As the next step, we will define the 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.
$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 have passed the default value to them.
fullName is a function of the $scope.student object, and its task is to return the merged name.
In the fullName function, we now want the student object to return the name of the combination.
As an illustration, it is also possible to define the controller object in a separate JS file and put the HTML pages in the file.
You can now use ng-model or use the expression as follows to use studentController's properties.
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()}}Now there are two input boxes: student.firstName and student.lastname.
Now there is the student.fullName() method added to HTML.
Now, just enter the first name and lastname input box to enter what to enter, and you can see that the two names are automatically updated.
example
The following example will show 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:
The above is the information sorting out the AngularJS controller. We will continue to sort out the relevant knowledge in the future. Thank you for your support for this website.