AngularJS 控制器

1.　　AngularJS 控制器：

AngularJS 控制器控制AngularJS 应用程序的数据。
ng-controller指令定义了应用程序控制器。

AngularJS 控制器是常规的JavaScript对象，由标准的JavaScript对象的构造函数创建。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular.min.js"></script></head><body><div ng-app="myApp"><!--AngularJS应用程序由ng-app定义，在这个div内运行--><div ng-controller="myCtrl"><!--ng-controller="myCtrl"属性是一个指令，用于定义一个控制器--><input ng-model="carname" /><!--ng-model指令绑定输入域到控制器的属性-->车名：{{carname}}</div><p>{{name}}</p></div><script>var app = angular.module("myApp", []);app.controller('myCtrl', function($scope, $rootScope){/*myCtrl是一个JavaScript函数*/$scope.carname = 'Volvo';/*$scope是一个局部的作用域，只作用域定义的控制器内*/$rootScope.name = 'wgl'/*$rootScope是一个根作用域，作用于ng-app定义的html元素内*/})</script></body>
</html>

2.　　控制器方法：可以在这个控制器中定义一个方法，然后在控制器定义的局部作用域中使用这个方法

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义，在这个div内运行-->姓名：{{xingMing()}}</div><script>var app = angular.module("myApp", []);app.controller('myCtrl', function($scope){/*myCtrl是一个JavaScript函数*/$scope.xing = '王';$scope.ming = '甘林';$scope.xingMing = function(){return $scope.xing+$scope.ming;};})</script></body>
</html>

3.　　外部文件中的控制器：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义，在这个div内运行-->姓名：{{xingMing()}}</div><script type="text/javascript" src="js/xingMing.js"></script></body>
</html>

var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) { /*myCtrl是一个JavaScript函数*/$scope.xing = '王';$scope.ming = '甘林';$scope.xingMing = function() {return $scope.xing + $scope.ming;};
});

4.　　总结：从mvc的思想上可以看出，在实际开发中我们主要用到的是外部文件中的控制器这种方法，这样可以是代码分离，使得后期的维护更加方便。

转载于:https://www.cnblogs.com/wgl1995/p/6264009.html

AngularJS 控制器相关推荐

在AngularJS控制器之间共享数据
本文翻译自:Share data between AngularJS controllers I'm trying to share data across controllers. 我正在尝试跨控制 ...
AngularJS控制器和过滤器学习（三）
AngularJS控制器 AngularJS 控制器控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的JavaScript对象 <h2>AngularJS 控 ...
AngularJS控制器和AngularJS过滤器的学习（3）
前面简单的学习了AngularJS的表达式和指令,就可以说大概对AngularJS有了一定的了解吧,嘿嘿,下面就来总结学习一下AngularJS的控制器和过滤器哦. 说起来AngularJS控制器,其 ...
AngularJS控制器中的#39;this#39;与$ scope
本文翻译自:'this' vs $scope in AngularJS controllers In the "Create Components" section of Angu ...
AngularJS 控制器中处理DOM事件
# AngularJS 控制器中处理DOM事件标签(空格分隔): AngularJS - AngularJS应用中的DOM事件可以在控制器中完成.AJ框架为我们提供了事件绑定指令,只需要在原生的av ...
angularjs控制器之间的数据共享与通信
1.可以写一个service服务,从而达到数据和代码的共享; var app=angular.module('app',[]);app.service('ObjectService', [Object ...
AngularJS控制器(Controller)
AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动.控制器采用ng-controller指令定义.控制器是一个包含属性/属性和JavaScript对象的功能.每个控制器接受$scope ...
angularjs控制器controller
不要视图去复用Controller,一个控制器一般只负责一小块视图不要在Controller中操作DOM,这不是控制器的职责不要在Controller里面做数据格式化,ng有很好用的表单控件不要 ...
[angularjs] angularjs系列笔记（四）控制器
Scope作用域 Scope作用域是应用在HTML视图和Js控制器之间的纽带 Scope是一个对象,有可用的属性和方法根作用域所有的应用都有一个$rootScope,它可以作用在ng-app指令包 ...

AngularJS 控制器

AngularJS 控制器相关推荐

最新文章

热门文章