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

【问题标题】：How exactly is an AngularJS controller defined?AngularJS 控制器究竟是如何定义的？
【发布时间】：2016-02-17 19:30:18
【问题描述】：

我有一个与控制器的语法以及它们在 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），后面是一个数组，它首先必须包含依赖项列表（在这种情况下只有AngularJS提供的$scope服务），它的最后一个元素是将这些依赖项作为实现控制器行为的输入参数的函数。

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

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

【问题讨论】：

这主要是为了避免缩小/编译错误。
我可以向您推荐这份风格指南：github.com/johnpapa/angular-styleguide#controllers。也许初学者最好遵循风格指南，这样你就不会学到错误的东西

标签： javascript angularjs javascript-framework angularjs-controller

【解决方案1】：

不好：

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);

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

选项1：在函数中添加一个名为$inject的属性：

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

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

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

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

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

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

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

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

【讨论】：

【解决方案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 文件

【讨论】：