AngularJS 0006:控制器
发布时间:2020-12-17 09:45:24 所属栏目:安全 来源:网络整理
导读:AngularJS 控制器主要控制程序数据交互,用ng-controller来实现。 html xmlns="http://www.w3.org/1999/xhtml"head runat="server" title/title script src="Scripts/angular.min.js"/script/headbody div ng-app="myProgram" ng-controller="myCtrl"卡牌名称
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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |