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() { }
    }
})();

问题：

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

Answer 1

Why does VS template wraps the code in a self invoking function?

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

What's the thing with the activate() function?

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

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

Do the controller.$inject = ['$scope']; considered a better practice?

其实是的！它可以帮助您将控制器定义与其对应的 angular 分开。它可以帮助您避免在 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() 的地方开始执行业务逻辑。

Visual Studio 的 AngularJS 模板说明

Visual Studio's AngularJS Template Explained

self-invoking-function

angularjs

angularjs-controller

angularjs-injector

visual-studio-2015