AngularJS 0006：控制器

AngularJS 控制器主要控制程序数据交互，用ng-controller来实现。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-app="myProgram" ng-controller="myCtrl">

卡牌名称: <input type="text" ng-model="cardName"><br>
介绍: <textarea name="cardInfo"  ng-model="cardInfo"></textarea> <br>
<br>
{{cardName + "：" + cardInfo}}
</div>
<script>
    var app = angular.module('myProgram', []);
    app.controller('myCtrl', function ($scope) {
        $scope.cardName = "哥布林小屋";
        $scope.cardInfo = "能放出哥布林投矛手，千万别向里瞧，相信我";
    });
</script>
</body>
</html>

结果

由前面的只是我们来看这段代码，
ng-app 定义了一个AngularJS 应用程序，这个应用程序在 <div> 内运行。
ng-controller="myCtrl" 是一个 AngularJS 指令，定义了一个控制器。
在JS中myCtrl是一个函数，
函数中使用$scope对象来调用控制器，一般$scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (cardName 和 cardInfo)。
ng-model 指令绑定输入域到控制器的属性（cardName和 cardInfo。

控制器方法
上面是直接赋值，但是控制器也可以赋函数，

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/angular.min.js"></script>
</head>
<body>
    <!--控制器中的方法-->
    <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 = "youshan";
        $scope.lastName = "yang";
        $scope.fullName = function () {
            return $scope.firstName + " " + $scope.lastName;
        }
    });
</script>
</body>
</html>

结果

外部文件中的控制器
一般我们在实际项目中，会把控制器存储在外部文件中，比如，下面代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="myname">
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="mynameController.js"></script>

</body>
</html>

结果

结果是一致的，

这段代码，把myname控制器放在了mynameController文件中，程序在执行时，会根据ng-controller="myname"，该指令找到对应的控制器文件，可以理解为默认加上Controller后缀找到了那个JS文件。

工程下载：http://download.csdn.net/detail/yysyangyangyangshan/9713044

AngularJS 0006：控制器

猜你喜欢