AngularJS如何使用控制器?代码示例

2021年3月19日18:17:11 发表评论 666 次浏览

AngularJS控制器在AngularJS应用程序中起着重要作用。所有AngularJS应用程序主要依靠控制器来控制该应用程序中的数据流。基本上, 它控制AngularJS应用程序的数据, 而控制器则是Javascript对象, 由标准JavaScript创建对象构造函数.

ng-controller指令定义应用程序控制器。在AngularJS中, 控制器是由Javascript构造函数定义的, 并用于AngularJS范围以及该函数$ scope)是在定义控制器时定义的, 它返回的是$ scope.firstname和$ scope.lastname.

语法如下:

<element ng-controller="expression">Contents...</element>

例子:本示例使用ng-controller指令显示用户的First和Second输入的串联。

<!DOCTYPE html>
<html>
  
<head>
     <title>ng-controler Directive</title>
  
     <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
     </script>
  
     <script>
         var app = angular.module( 'myApp' , []);
         app.controller( 'myCtrl' , function ($scope) {
             $scope.firstName = "Geeks" ;
             $scope.lastName = "Geeks" ;
         });
     </script>
  
</head>
<center>
  
     <body>
         <h1 style= "color:green" >lsbin</h1>
         <h2>ng-controler Directive</h2>
         <div ng-app= "myApp" ng-controller= "myCtrl" >
  
             First Name:
             <input type= "text" ng-model= "firstName" >
             <br> Last Name:
             <input type= "text" ng-model= "lastName" >
             <br>
             <br> Full Name: {{firstName + "for" + lastName}}
  
         </div>
  
     </body>
</center>
  
</html>

输出如下:

AngularJS |控制器1

控制器方法

第一个示例演示了具有两个属性的控制器对象:Fname和Lname。在AngularJS中, 定义控制器时定义了函数($ scope), 并返回$ scope.firstname和$ scope.lastname的串联。在这里, 控制器也可以具有方法(变量作为函数):

例子:

<!DOCTYPE html>
<html>
  
<head>
     <title>ng-controler Directive</title>
  
     <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
     </script>
  
     <script>
         var app = angular.module( 'geeks' , []);
         app.controller( 'personCtrl' , function ($scope) {
  
             $scope.fullName = function () {
                 return $scope.firstName + " " + $scope.lastName;
             };
         });
     </script>
  
</head>
<center>
<body style= "padding: 30px" >
     <div ng-app= "geeks" ng-controller= "personCtrl" >
         <h1 style= "color:green" >lsbin</h1>
         <h2>ng-controler Directive</h2> First Name:
         <input type= "text" ng-model= "firstName" >
         <br><br> Last Name:
         <input type= "text" ng-model= "lastName" >
         <br>
         <br> Full Name: {{fullName()}}
     </div>
</body>
</center>
</html>

输出如下:

在写名字之前:

AngularJS |控制器2

写下名字后:

AngularJS |控制器3

外部文件中的控制器

在较大的应用程序中, 通常将控制器存储在一个外部文件中, 你只需要复制该文件nime并将其粘贴到<script>标记中即可。这里的外部文件名是" lsbin.js"

例子:

<!DOCTYPE html>
<html>
<head> 
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
    </script>
    <script src= "lsbin.js" ></script>
</head>
<body>
    <center>
       <h1 style= "color:green" >lsbin</h1>
       <h2>ng-controler Directive</h2>
        
       <div ng-app= "myApp" ng-controller= "personCtrl" >
           First Name: <input type= "text" ng-model= "firstName" >
           <br>
           Last Name: <input type= "text" ng-model= "lastName" >
           <br><br>
           Full Name: {{fullName()}}
       </div>
    </center>
</body>
</html>

输出如下:

AngularJS |控制器4

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: