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

问题描述 投票:2回答:4

我有一个与控制器的语法有关的问题以及它们在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背景,其中数组不能包含不同类型的对象,而且函数不是对象。

javascript angularjs javascript-framework angularjs-controller
4个回答
5
投票

坏:

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

当这被缩小时,参数被缩小并且角度将不再能够知道要注入哪些依赖性。

好:

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

数组语法:字符串中的依赖项使minification安全。

其他正确的方法:

您还可以单独注入依赖项:

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

1
投票

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


0
投票

$injector必须知道注入函数的参数。有三种不同的方法可以告诉注射器注射什么。

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

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

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

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

选项3:如果没有$inject属性且没有注释,AngularJS使用函数参数:

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

你总是必须使用依赖项的名称,这里是ab,而不是依赖项本身。

您的示例使用第二种替代方法。

如果缩小代码,则无法使用第三种替代方法,因为这会更改参数名称。


-1
投票
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文件

© www.soinside.com 2019 - 2024. All rights reserved.