A brief introduction to the use of AngularJS controllers

A brief introduction to the use of AngularJS controllers_AngularJS

WBOY

Release： 2016-05-16 15:54:39

Original

980 people have browsed it

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>

Copy after login

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>

Copy after login

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

Copy after login

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>

Copy after login

Output

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

2015616120726250.png (679×365)