Angular JS 学习之控制器

Posted 2020-08-19 小春熙子

1.AngularJS控制器 控制AngularJS的应用程序的数据；AngularJS控制器是常规的javascript对象；

 

2.AngularJS应用程序被控制器控制，ng-controller指令定义了应用程序控制器，控制器是javaScript对象，由标准的javaScript对象的构造函数创建；

<div ng-app="myApp" ng-controller="myCtrl">

名：<input type="text" ng-model="firstName"><br>

姓:<input type="text" ng-model="lastName"><br>

姓名：{{firstName+""+lastName}}

</div>

<script>

var app=angular.module(‘myApp‘,[]);

app.controller(‘myCtrl‘,function($scope){

　　$scope.firstName="John";

　　$scope.lastName="Doe";

});

</script>

3.解释代码：

**AngularJS应用程序由ng-app定义，应用程序在<div>内运行；

**ng-controller="myCtrl"属性是一个AngularJS指令，用于定义一个控制器；

**myCtrl函数是一个JavaScript函数；

**AngularJS使用$scope对象来调用控制器；

**在AngularJS中，$scope是一个应用象（属于应用变量和函数）；

**控制器的$scope（相当于作用域，控制范围）用来保存AngularJS Model（模型）的对象；

**控制器在作用域中创建了两个属性（firstName和lastName）；

**ng-model指令绑定输入域到控制器的属性(firstName和lastName)；

 

4.控制方法：控制器也可以有方法；

<div ng-app="myApp" ng-controller="personCtrl">

名：<input type="text" ng-model="firstName"><br>

姓：<input type="text‘ ng-model="lastName"><br>

<br>

姓名：{{fullName}}

</div>

<script>

var app=angular.module(‘myApp‘,[]);

app.controller(‘personCtrl‘,function($scope){

　　$scope.firstName="John";

　　$scope.lastName="Doe";

　　$scope.fullName=function(){

　　　　return $scope.firstName+"  "+$scope.lastName;

　　};

});

</script>

 

5.外部文件中的控制器：在大型的应用程序中，通常把控制器存储在外部文件中；

<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:{{firstName+" "+lastName}}

</div>

<script  src="personController.js"></script>