This article mainly introduces the use of ANGULARJS controller, the article gives a specific example of the object used in HTML, the need for friends can refer to the
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:fun Ction () {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 the 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:
<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 your Web browser and see the following results:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
