AngularJS 控制器究竟是如何定义的？

Question

我有一个关于控制器语法及其在 AngularJS 中声明方式的问题。我很确定我知道它们是如何工作的，但我的问题与语法有关。

所以我可能有这样的东西：

// MODULE:
var weatherApp = angular.module("weatherApp", ['ngRoute', 'ngResource']);

// Home Page Controller:
weatherApp.controller('homeController', ['$scope', function($scope) {
    // Controller business operation   
}]);

第一行声明了 weatherApp 变量，它是我的模块并且与我的页面相关联。 module() 是一种方法，它将模块名称和该模块使用的依赖项列表作为参数。是吗？

主要问题与控制器定义有关。

weatherApp.controller('homeController', ['$scope', function($scope) {
    // Controller business operation   
}]);

在前面的 weatherApp 变量（我的模块）上，我调用 controller() 方法来设置控制器设置。所以第一个参数是控制器名称（在本例中为homeController），然后是一个数组，该数组首先必须包含依赖项列表（在本例中只有[=34=提供的$scope服务]JS) 及其最后一个元素是一个函数，它将这些依赖项作为实现控制器行为的输入参数。

为什么Angular这样做？为什么依赖项和实现控制器的函数在一个数组中一起传递？

也许我在理解这种行为时遇到了一些困难，因为我来自 Java 背景，其中数组不能包含不同种类的对象并且函数不是对象。

Answer 1

Angular 以这种方式定义控制器，因为压缩器重命名控制器方法中的参数（例如 $scope），这会破坏 Angular 的依赖注入机制。参见：https://docs.angularjs.org/tutorial/step_05#a-note-on-minification

Answer 2

差：

weatherApp.controller('homeController', function($scope){
    // Controller business operation   
});

缩小后，参数也会缩小，angular 将无法再知道要注入哪些依赖项。

好:

weatherApp.controller('homeController', ['$scope', function($scope) {
    // Controller business operation   
}]);

数组语法：字符串中的依赖关系使缩小变得安全。

其他正确方式：

你也可以单独注入依赖：

function WeatherCtrl($scope, $http) {
    // Controller business operation   
}
WeatherCtrl.$inject = ['$scope'];
weatherApp.controller('WeatherCtrl', WeatherCtrl);

Answer 3

$injector 必须知道将哪些参数注入函数。可以通过三种不同的方式告诉注射器注射什么。

选项 1： 向函数添加名为 $inject 的属性：

FN.$inject=['a','b']

选项 2： 使用类似注释的数组：

['a','b', function(x,y) {...}]

选项 3： 如果没有 $inject 属性和注释，AngularJS 使用函数参数：

function ('a','b') {...}.

您始终必须使用依赖项的名称，这里是 a 和 b，而不是依赖项本身。

您的示例使用了第二种选择。

如果您缩小代码，则不能使用第三种选择，因为这会更改参数名称。

Answer 4

var app = angular.module('app',[])

//with this app reference you define controller like this

app.controller('myCtrl',['$scope',function($scope){

   //your stuff


}])

//我在这里附上运行代码，尽可能简单

var app = angular.module('myApp',[])
app.controller('myCtrl',['$scope',function($scope){

   $scope.name = "rahul";
   
}])

<html ng-app="myApp">
<head>
 //here inculde the angular library first
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
 /*expression for one way binding*/
 

     {{name}} 
     
     
 //ng-model for two way binding   
 
 
<input ng-model="name"/> 
</body>
</html>

记住，如果你想包含 jquery，那么先包含 angularjs 文件

AngularJS 控制器究竟是如何定义的？

How exactly is an AngularJS controller defined?

javascript

javascript-framework

angularjs

angularjs-controller