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），后跟一个首先必须包含依赖项列表的数组（在本例中只包含AngularJS提供的$scope服务）及其last元素是一个函数，它将这些依赖项作为实现控制器行为的输入参数。

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

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

Answer 1

<强>为：

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

当缩小时，参数会缩小，而角度将无法再知道要注入的依赖项。

不可

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

数组语法：字符串中的依赖项使缩小安全。

其他正确方法：

你也可以单独注入依赖项：

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

Answer 2

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

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控制器究竟是如何定义的？

4 个答案: