AngularJS 中控制器声明的区别 [英] Difference in controller declaration in AngularJS

查看:20
本文介绍了AngularJS 中控制器声明的区别的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经看到控制器以如下两种方式声明.但这有什么区别?

I have seen controller being declared in two ways as below. But what diff does this make?

  1. appmodule.controller('Actrl',['$scope',function($scope) {}]);
  2. appmodule.controller('Actrl',function($scope) {});

但是,大多数情况下,第一个不起作用.为什么?

But, most of the times, the 1st doesn't work. Why?

推荐答案

两者的语法相同,但首选第一个 (有错别字,请参阅下面的说明) 如果您正在缩小您的代码.

Both the syntax are same but the first one is preferred (there is a typo, see below description) if you are minifying your code.

Angular 根据名称解析依赖,所以当你写 appmodule.controller('Actrl',function($scope) {}); 语法时,Angular 注入了 $ 的依赖scope 通过读取参数名称 $scope.但是当您的代码被缩小用于生产级别时,您的代码将变成:

Angular resolves the dependency based on the name so when you write appmodule.controller('Actrl',function($scope) {}); syntax, Angular injects the dependency of $scope by reading the argument name $scope. But when your code is minified for production level use then your code will become like:

appmodule.controller('Actrl', function(a) {});

现在,Angular 将无法解析名称为 a 的依赖项.这就是为什么使用第一种方法,即 appmodule.controller('Actrl',['$scope', function($scope) {}]);.现在,当您的代码最小化用于生产时,您的代码将如下所示:

Now, the Angular will not be able to resolve the dependency with the name a. That is why the first approach is used i.e. appmodule.controller('Actrl',['$scope', function($scope) {}]);. Now when your code is minimized for production, your code will be like this:

 appmodule.controller('Actrl',['$scope', function(a) {}]);

现在,Angular 可以匹配 a$scope 的基于索引的位置.

Now, Angular can match the index based position that a is $scope.

您的代码中有一个拼写错误,列表不应该在 function 声明之前关闭.

There is a typo in your code where the list should not be closed before the function declaration.

阅读Dependency Annotation 以了解关于此主题的更多信息内联数组注释.

Read the Dependency Annotation for more information on this under the topic Inline Array Annotation.

Angular 调用某些函数(如服务工厂和控制器)通过注入器.您需要注释这些函数注入器知道将哪些服务注入到函数中.使用服务名称注释代码的三种方式信息:

Angular invokes certain functions (like service factories and controllers) via the injector. You need to annotate these functions so that the injector knows what services to inject into the function. There are three ways of annotating your code with service name information:

  • 使用内联数组注释(首选)
  • 使用 $inject 属性注解
  • 隐含来自函数参数名称(有警告)

关于两种不同风格的另一个更详细的描述:a-note-on-minification:

Another more detailed description over the two different style: a-note-on-minification:

由于 Angular 从控制器的名称推断控制器的依赖关系控制器构造函数的参数,如果你要缩小 PhoneListCtrl 控制器的 JavaScript 代码,所有它的函数参数也将被缩小,并且依赖项注入器将无法正确识别服务.

Since Angular infers the controller's dependencies from the names of arguments to the controller's constructor function, if you were to minify the JavaScript code for PhoneListCtrl controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly.

我们可以通过用名称注释函数来解决这个问题的依赖项,以字符串形式提供,不会被缩小.有两种方法可以提供这些注入注释:

We can overcome this problem by annotating the function with the names of the dependencies, provided as strings, which will not get minified. There are two ways to provide these injection annotations:

这篇关于AngularJS 中控制器声明的区别的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆