Visual Studio AngularJS模板说明

Question

当我使用VS2015模板创建一个新控制器时，我得到以下代码：

(function () {
    'use strict';

    angular
        .module('app')
        .controller('controller', controller);

    controller.$inject = ['$scope']; 

    function controller($scope) {
        $scope.title = 'controller';

        activate();

        function activate() { }
    }
})();

问题：

1. 为什么VS模板将代码包装在自调用函数中？
2. activate()功能有什么用？我想在里面编写什么代码，为什么我需要一个单独的函数而不是只是在控制器中编写代码？
3. controller.$inject = ['$scope'];被认为是一种更好的做法，然后在数组中编写依赖项（作为控制器函数的参数）。

Answer 1

为什么VS模板将代码包装在自调用函数中？

因为它可以防止破坏全局命名空间。在这种情况下，在没有IIFE的情况下，controller将成为全球命名空间的成员。

activate()功能有什么用？

它有助于分别分离控制器变量和代码的声明和执行。在调用activate函数之前，我们通常使用this.语法将所有依赖项声明为控制器成员。

您将在activate函数内编写执行代码。

controller.$inject = ['$scope'];被认为是更好的做法吗？

其实，是！它可以帮助您将控制器定义与其角度对应物分开。它可以帮助您避免在angular.module( ... ).controller块中编写整个控制器代码，以提高代码的可读性。

编辑1：

如果没有IIFE，名为controller的函数将成为全局命名空间的成员，并且可以在整个页面中访问。它还有可能被后续代码覆盖。不要将AngularJS与此混合，因为这是JavaScript所做的事情。

activate函数只是一个分离问题的层。您可以完全在函数controller中编写代码。但是以这种方式，分离哪个代码控制器正在执行以及哪些代码将变量绑定到控制器变得更加困难。举个例子：

function controller($scope) {
  var vm = this;
  vm.data = [];
  $scope.title = 'controller';

  activate();

  ///
  function activate() {
    getData()
      .then(data => {
        // do something with data
      });

    // ...
  }

  function getData() {
    ...
  }
}

通过阅读上面的代码，人们可以很容易地了解在控制器中使用的线路下面的变量，而无需特别进入控制器的深度。通过遵循这个约定，我们将始终知道控制器将在调用activate()的地方开始执行业务逻辑。