angular.js 中的 app.controller 与函数 [英] app.controller vs function in angular.js
问题描述
我正在学习 angular.js，想知道什么时候应该使用 app.controller("MyCtrl",...) 以及什么时候 function MyCtrl($scope){...} 应该使用.
在此示例中，我认为两种方法之间没有太大区别(指向 plunker 的链接)::>
index.html:
<div ng-controller="FirstCtrl as app1"><button class="btn" ng-model="app1.count"ng-click="app1.increment()">单击以增加{{ app1.count }}<div ng-controller="SecondCtrl"><button class="btn" ng-model="count"ng-click="增量()">单击以增加{{ 数数 }}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script><script type="text/javascript" src="example.js"></script>
example.js:
var app = angular.module("myApp", []);app.controller("FirstCtrl",function () {this.count = 0;this.increment = 函数 (){this.count = this.count + 1;}});函数 SecondCtrl($scope){$scope.count = 0;$scope.increment = function (){$scope.count = $scope.count + 1;}}在您的两种用法中，推荐的方法是注入 $scope 并使用它(而不是使用 this，您也可以在第二种方法中执行此操作).
方法一和方法二的区别在于如何支持缩小.在前者中，您可以提供一组注入参数，而在后者中，您可以修改 $inject.这当然有点技术性，但强烈建议支持缩小.请参阅文档中的关于缩小的说明.
前者也没有在全局范围内命名函数，这通常是一件好事！
I'm learning angular.js, and wonder when app.controller("MyCtrl",...) should be used and when function MyCtrl($scope){...} should be used.
I see no big differences between the two approaches in this example (link to a plunker):
index.html:
<body ng-app="myApp">
<div ng-controller="FirstCtrl as app1">
<button class="btn" ng-model="app1.count"
ng-click="app1.increment()">
Click to increment</button>
{{ app1.count }}
</div>
<div ng-controller="SecondCtrl">
<button class="btn" ng-model="count"
ng-click="increment()">
Click to increment</button>
{{ count }}
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<script type="text/javascript" src="example.js"></script>
</body>
example.js:
var app = angular.module("myApp", []);
app.controller("FirstCtrl",function () {
this.count = 0;
this.increment = function (){
this.count = this.count + 1;
}
});
function SecondCtrl($scope){
$scope.count = 0;
$scope.increment = function (){
$scope.count = $scope.count + 1;
}
}
In both of your usages, the recommended approach is to inject $scope and use that (rather than using this, which you can do in the second approach as well).
The difference between approach one and two is in how to support minification. In the former, you can supply an array of injected arguments, whereas in the latter you modify $inject. This is of course a bit technical but it is highly recommended to support minification. See A note on minification in the documentation.
The former also does not name the function in the global scope, which is generally a good thing!
这篇关于angular.js 中的 app.controller 与函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
