大佬教程收集整理的这篇文章主要介绍了AngularJs 基础教程 ―― 控制器,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
本文为H5EDU机构官方HTML5培训教程,主要介绍:AngularJs 基础教程―― 控制器
AngularJS控制器 AngularJS控制器控制AngularJS应用程序的数据。 AngularJS控制器是常规的JavaScript对象。 AngularJS控制器 AngularJS应用程序被控制器控制。 ng-controller指令定义了应用程序控制器。 控制器是JavaScript对象,由标准的JavaScript对象的构造函数创建。 AngularJS实例 <divng-app="myApp"ng-controller="myCtrl"> 名:<inputtype="text"ng-model="firstName"><br> 姓:<inputtype="text"ng-model="lastName"><br> <br> 姓名:{{firstName+""+lastNamE}} </div> <script> varapp=angular.module('myApp',[]); app.controller('myCtrl',function($scopE){ $scope.firstName="John"; $scope.lastName="Doe"; }); </script> 尝试一下 应用解析: AngularJS应用程序由ng-app定义。应用程序在<div>内运行。 ng-controller="myCtrl"属性是一个AngularJS指令。用于定义一个控制器。 myCtrl函数是一个JavaScript函数。 AngularJS使用$scope对象来调用控制器。 在AngularJS中,$scope是一个应用象(属于应用变量和函数)。 控制器的$scope(相当于作用域、控制范围)用来保存AngularJSModel(模型)的对象。 控制器在作用域中创建了两个属性(firstName和lastName)。 ng-model指令绑定输入域到控制器的属性(firstName和lastName)。 控制器方法 上面的实例演示了一个带有lastName和firstName这两个属性的控制器对象。 控制器也可以有方法(变量和函数): AngularJS实例 <divng-app="myApp"ng-controller="personCtrl"> 名:<inputtype="text"ng-model="firstName"><br> 姓:<inputtype="text"ng-model="lastName"><br> <br> 姓名:{{fullName()}} </div> <script> varapp=angular.module('myApp',[]); app.controller('personCtrl',function($scopE){ $scope.firstName="John"; $scope.lastName="Doe"; $scope.fullName=function(){ return$scope.firstName+""+$scope.lastName; } }); </script> 尝试一下 外部文件中的控制器 在大型的应用程序中,通常是把控制器存储在外部文件中。 只需要把<script>标签中的代码复制到名为personController.js的外部文件中即可: AngularJS实例 <divng-app="myApp"ng-controller="personCtrl"> FirstName:<inputtype="text"ng-model="firstName"><br> LastName:<inputtype="text"ng-model="lastName"><br> <br> FullName:{{firstName+""+lastNamE}} </div> <scriptsrc="personController.js"></script> 尝试一下 其他实例 以下实例创建一个新的控制器文件: angular.module('myApp',[]).controller('namesCtrl',function($scopE){ $scope.names=[ {name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'} ]; }); 保存文件为namesController.js: 然后,在应用中使用控制器文件: AngularJS实例 <divng-app="myApp"ng-controller="namesCtrl"> <ul> <ling-repeat="xinnames"> {{x.name+','+x.country}} </li> </ul> </div> <scriptsrc="namesController.js"></script> 尝试一下
以上是大佬教程为你收集整理的AngularJs 基础教程 ―― 控制器全部内容,希望文章能够帮你解决AngularJs 基础教程 ―― 控制器所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。