AngularJS入门(6)---控制器

控制器

  1. 什么是控制器
    控制器实际上就是JS函数,它们不需要扩展任何AngularJS特定的类,也不需要调用任何特定的AngularJS API,就可以正常工作。

  2. 控制器的作用
    控制器主要用来初始化作用域实例,在实际运用中,初始化又分为:

  • 提供模型的初始值;
  • 增加UI相关的行为)(函数)以扩展$scope对象
    注意:在设定模型初始值时,控制器和ng-init指令都可以,但是控制器可以让我们在JS代码中表达初始化逻辑,而不是污染HTML模板。
  1. 一个具体的实例
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

<body>
<div ng-app="myApp" ng-controller="myContr">
        我最好的闺蜜姓:<input type="text" ng-model="firstName"></br></br>
        她名为????:<input type="text" ng-model="lastName"></br></br>
        <p>所以她的全名是:{{firstName}}{{lastName}}</p>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myContr', function ($scope) {
            $scope.firstName = "李";
            $scope.lastName = "林";
        });
    </script>
</body>
</html>
  • ng-controller=“myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器
  • AngularJS 使用$scope 对象来调用控制器
  • 控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
  • 控制器在作用域中创建了两个属性 (firstName 和 lastName)
  • ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)
  1. 控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

控制器也可以有方法(变量和函数):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
 <div ng-app="myApp" ng-controller="myContr">
        姓:<input type="text" ng-model="firstName"></br></br>
        名:<input type="text" ng-model="lastName"></br></br>
        姓名:{{name()}}
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myContr', function ($scope) {
            $scope.firstName = "张";
            $scope.lastName = "敏";
            $scope.name = function () {
                return $scope.firstName + $scope.lastName;
            }
        });
    </script>
</body>
</html>

注意调用函数的时候一定要加括号({{name()}})。

  1. 外部文件中的控制器

在大型的应用程序中,通常是把控制器存储在外部文件中。只需要把脚本标签中的代码复制到指定的外部文件中即可
.html文件代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
 <div ng-app="myApp" ng-controller="myContr">
        姓:<input type="text" ng-model="firstName"></br></br>
        名:<input type="text" ng-model="lastName"></br></br>
        姓名:{{name()}}
    </div>
    <script src = "myController.js"></script>
</body>
</html>

指定外部文件(我例子里是myController.js)的代码:

var app = angular.module('myApp', []);
app.controller('myContr', function ($scope) {
    $scope.firstName = "张";
    $scope.lastName = "敏";
    $scope.name = function () {
        return $scope.firstName + $scope.lastName;
    }
});
  1. 其他实例

先创建一个新的控制器文件(kexinController.js)

angular.module('myApp', []).controller('myContr', function ($scope) {
    $scope.names = [{
            name: '可馨馨',
            person: '姑姑'
        },
        {
            name: '花花',
            person: '爸爸'
        },
        {
            name: '笨虎',
            person: '爷爷'
        }
    ];
});

然后在应用中使用控制器文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
 <div ng-app="myApp" ng-controller="myContr">
        可馨的外号是<li ng-repeat="x in names">
            {{x.name}}这是{{x.person}}给起的
        </li>
    </div>
    <script src="kexinController.js"></script>
</body>
</html>

注意记得在.js文件书写时,不要忘记“ ” , s c o p e 是 一 个 类 , 而 ”,scope是一个类,而 ,scope$scope是对象,一个scope类里可以有很多对象,函数里具体用的也是对象。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值