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

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>

输出如下：

文章图片
控制器方法
第一个示例演示了具有两个属性的控制器对象：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>

输出如下：
在写名字之前：

文章图片
写下名字后：

文章图片
外部文件中的控制器
在较大的应用程序中, 通常将控制器存储在一个外部文件中, 你只需要复制该文件nime并将其粘贴到< script> 标记中即可。这里的外部文件名是" lsbin.js"
【AngularJS如何使用控制器（代码示例）】例子：

< !DOCTYPE html> < html> < head> < script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > < /script> < script src= "https://www.lsbin.com/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>

输出如下：