从创建AngularJS控制器的两种方式应该使用哪些,为什么?(From two ways of C

2019-10-18 13:53发布

在大多数演示以下方法给出

第一种方法:

function MyCtrl( $scope ){

$scope.someValue = "All your base are belong to us!";

}

第二种方法:

app.controller("MyController",funciton( $scope ){

  $scope.someValue = "All your base are belong to us!";

});

什么是使用两种方法的利弊?

Answer 1:

我会极力推荐第二个。

这背后的原因是微小 。 角将尝试与您在通过模板调用控制器的名字ng-controller ,例如:

<div ng-controller="Controller">
   <!-- [...] -->
</div>

假设你有一个这样的控制器:

function Controller($scope) {};

然后再缩小它(有一些minifiers),你会得到这样的输出:

function c(s) {};

快速编辑:我丑化检查了它 - 它会保护你的函数名(你会没事的),我在我的一个项目,这实际上错位的方法名(我想我必须更换它使用基于Maven的minifier )

您的应用程序可能只是从打破。

因此,建议使用字符串作为像这样的控制器标识符(和注射等):

var app = angular.module("module", []);
app.controller("Controller", ['$scope', function(scope) {

}]);

这将从打破了应用程序停止minifier。 把注射这样的原因如下:

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

function Ctrl($scope, $location) {
   $scope.test = 42;
};

将获得精缩到(由UglifyJS):

function Ctrl(a){a.test=2}var app=angular.module("module",[])

和角度不会知道你所需要的$scope在这里。

如果缩小不要紧,你可以使用一个,因为这个问题真的只是打破了可维护性和可读性。 另外,如果你有一个控制器多个模块,第二个不会让你陷入困境。



Answer 2:

我会尽力给出一个简要总结每个选项的利弊。

1)以下的版本在网络上的例子经常使用,因为它很容易编写 。 我不会在真正的代码,推荐它然而,有两个原因。 首先,它可以打破可怕,如果您压缩代码(你应该),其次你与全局通常是不好的形式,鼓励马虎的依赖是很难测试乱抛垃圾。

function MyCtrl( $scope ){
  $scope.someValue = "All your base are belong to us!";
}

2)你写的第二个版本是更好的。 它包含的应用程序,这是很好的功能,但它仍然可以从一些minifiers打破。

app.controller("MyController",function( $scope ){
  $scope.someValue = "All your base are belong to us!";
});

3),使之更好,让我们做到这一点,而不是。 需要注意的是,现在的功能是它的依赖列表中。 依赖关系的这种“双重”的命名有助于缩小的代码的东西角跟踪。

app.controller("MyController", ['$scope', function( $scope ){
  $scope.someValue = "All your base are belong to us!";
}]);

4)您也可以将控制器,这样的事情后,注入你的依赖。 这也应该是从minifiers安全的,因为据我所知(我还没有使用这个版本我自己)。

app.controller("MyController",function( $scope ){
  $scope.someValue = "All your base are belong to us!";
}).$inject = ['$scope'];

因此,3和4是最好的。 他们生存缩小文件,它们允许你编写测试时,容易出现模拟出任何依赖。 据我所知,3和4的区别是化妆品这样既应该一样精细。 我个人使用3,我认为它看起来稍微更好:)



Answer 3:

不同的是,第二个版本定义了你的应用空间控制器。 因此,app.controller电话。 与众不同的是,据我所知,你只能使用内部的NG-应用=“yourApp”,而不是到处都在网站上的控制器。



Answer 4:

就个人而言,我更喜欢第二个方法,因为它更容易查看代码,它是更容易维护,这些都只是我的thoughts.But与第1种方法,你可以把它作为其他应用程序的控制器。

以下是我从发现

http://www.bennadel.com/blog/2421-Creating-AngularJS-Controllers-With-Instance-Methods.htm

In most AngularJS demos, you will see Controllers being defined as free-standing JavaScript functions:

function MyCtrl( $scope ){

    $scope.someValue = "All your base are belong to us!";

}

These functions are then referenced in the View using the ngController directive:


<div ng-controller="MyCtrl">

    {{ someValue }}

</div>

NOTE: You should never ever abbreviate "Controller" as "Ctrl". I am only doing that here because this it is what you will typically see in a demo. You should try to avoid abbreviations as much as humanly possible when naming things in programming.

The expression used to define the ngController directive is the name of the Controller in your dependency injection (DI) framework. In an AngularJS application, the dependency injection framework is provided directly by AngularJS. This means that, rather than using a free-standing function, we can use the AngularJS controller() method to define our Controllers:


// Define "MyController" for the Dependency Injection framework
// being used by our application.
app.controller(
    "MyController",
    funciton( $scope ){

        $scope.someValue = "All your base are belong to us!";

    }
);

Here, we are defining the controller as an identifier - MyController - and a constructor function. And, once we can do this, we can get much more fine-tuned in how we actually define our constructor function.


文章来源: From two ways of Creating AngularJS Controllers which should be used and why?